Is this not possible?
I worked up one last night but couldn't quite get it right and gave up
because it was very late, wish I would have saved the code. :D
Basically I added the five items in divs in the header below your nav code.
<div id="feature1"><a href="/gallery/2768973"><img src="/photos/147371072-Ti-1.jpg" width="100" height="100" /></a><br /><br />2007 Henlopen</div>
<div id="feature2"><a href="/gallery/2642639"><img src="/photos/139622529-Ti-1.jpg" width="100" height="100" /></a><br /><br />2007 High Tide - Session 1</div>
<div id="mySlideshow"></div>
<div id="feature3"><a href="/gallery/2686597"><img src="/photos/142242472-Ti-1.jpg" width="100" height="100" /></a><br /><br />2007 High Tide - Session 2</div>
<div id="feature4"><a href="/gallery/2689448"><img src="/photos/142428586-Ti-3.jpg" width="100" height="100" /></a><br /><br />2007 High Tide - Session 3</div>
Then added CSS to position each.
#feature1,
#feature2,
#mySlideshow,
#feature3,
#feature4 {display; none;}
.homepage #feature1 {
display: block;
position: relative;
text-align:center;
height: 100px;
width: 100px;
margin-top: 50px;
margin-left: 50px;
}
.homepage #feature2 {
display: block;
position: relative;
text-align:center;
height: 100px;
width: 100px;
margin-top: 110px;
margin-left: 50px;
}
.homepage #mySlideshow {
position: relative;
height: 400px;
width: 600px;
margin-left: 171px;
margin-top: -340px;
}
.homepage #feature3 {
display: block;
position: relative;
text-align:center;
height: 100px;
width: 100px;
margin-top: -370px;
margin-left: 790px;
}
.homepage #feature4 {
display: block;
position: relative;
text-align:center;
height: 100px;
width: 100px;
margin-top: 110px;
margin-left: 790px;
margin-bottom: 80px;
}
.homepage #featuredBox {
display:none;}
It's not perfect but a start. The images are not fixed and move when
browser is stretched but I'm sure it can be solved.
Remove the two existing myslideshow statements towards the end also.
Anyway, put these in and you can see what it looks like.