Enforcer
17 Nov 2009, 10:42 AM
Hey guys, my problem is I need this code to be tweaked so that when the page is loaded there are 5 thumbnail images between the forward and backward buttons. Currently, the way it is configured, only three images show to start, but as you click on a thumbnail to load a new picture, more thumbnails show up, up to five. I tried to change this myself, only to have the wrong image load when the thumbnail is clicked and other problems. So here is the code in question:
<body onload="preloadImages();" bgcolor="black">
<div id="wrapper">
<div id="layer1">
<div style="position:relative;width:958px;height:645px;-adbe-g:p;">
<div style="position:absolute;top:544px;left:112px;width:69px;height:25px;">
<a onmouseover="changeImages('HomeText','Images/HomeTextRolloverGif.gif');return true" onmouseout="changeImages('HomeText','Images/HomeTextGif.gif');return true" href="IanGIbbonsPhotographyMain.html"><img id="HomeText" src="Images/HomeTextGif.gif" alt="" name="HomeText" height="25" width="69" border="0" /></a></div>
<div style="position:absolute;top:544px;left:256px;width:84px;height:23px;">
<a onmouseover="changeImages('AboutText','Images/AboutTextRolloverGif.gif');return true" onmouseout="changeImages('AboutText','Images/AboutTextGif.gif');return true" href="IanGIbbonsPhotographyAbout.html"><img id="AboutText" src="Images/AboutTextGif.gif" alt="" name="AboutText" height="23" width="84" border="0" /></a></div>
<div style="position:absolute;top:544px;left:400px;width:67px;height:25px;">
<a onmouseover="changeImages('HireText','Images/HireTextRolloverGif.gif');return true" onmouseout="changeImages('HireText','Images/HireTextgif.gif');return true" href="IanGIbbonsPhotographyHire.html"><img id="HireText" src="Images/HireTextgif.gif" alt="" name="HireText" height="25" width="67" border="0" /></a></div>
<div style="position:absolute;top:544px;left:528px;width:112px;height:21px;">
<a onmouseover="changeImages('ContactText','Images/ContactTextRolloverGif.gif');return true" onmouseout="changeImages('ContactText','Images/ContactTextGif.gif');return true" href="IanGIbbonsPhotographyContact.html"><img id="ContactText" src="Images/ContactTextGif.gif" alt="" name="ContactText" height="21" width="112" border="0" /></a></div>
<div style="position:absolute;top:544px;left:704px;width:131px;height:22px;">
<a onmouseover="changeImages('CalendarText','Images/CalendarTextRolloverGif.gif');return true" onmouseout="changeImages('CalendarText','Images/CalendarTextGif.gif');return true" href="#"><img id="CalendarText" src="Images/CalendarTextGif.gif" alt="" name="CalendarText" height="22" width="131" border="0" /></a></div>
<div style="position:absolute;top:80px;left:128px;width:69px;height:317px;">
<table>
<tr>
<td>
<div align="center">
<a href="javascript:prevSet()"><img class="nobo" src="Images/prevSet.gif" alt="Previous Set" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
<tr>
<td><a href="javascript:setPic(-2)"><img id="thumbnail1" src="Images/dot.gif" alt="" name="thumbnail1" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(-1)"><img id="thumbnail2" src="Images/dot.gif" alt="" name="thumbnail2" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(0)"><img id="thumbnail3" src="Images/thumbnails/Image1.png" alt="" name="thumbnail3" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(1)"><img id="thumbnail4" src="Images/thumbnails/Image2.png" alt="" name="thumbnail4" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(2)"><img id="thumbnail5" src="Images/thumbnails/Image2.png" alt="" name="thumbnail5" style="border-style: none" /> </a></td>
</tr>
<tr>
<td>
<div align="center">
<a href="javascript:nextSet()"><img class="nobo" src="Images/nextSet.gif" alt="Next" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
</table>
</div>
<div style="position:absolute;top:97px;left:280px;width:565px;height:386px;">
<img id="BigPic" src="Images/Photography/Start.png" alt="Enforcer" name="BigPic" /></div>
<csnopos>
<cspos xpos="80" xpos="0">
<script type="text/javascript" language="javascript">
filenames = new Array (
"Image1.png",
"Image2.png",
"Image2.png",
"Image4.png",
"Image5.png" )
descriptions = new Array (
"Image1.png",
"Image2.png",
"Image3.png",
"Image4.png",
"Image5.png" )
picCount = filenames.length;
index = 0;
function getPic(i) {
return filenames[i];
}
function getDesc(i) {
return descriptions[i];
}
function setPic(thumb) {
if ( index + thumb >= 0 && index + thumb < picCount ) {
index = index + thumb;
var mainPic = document.getElementById('BigPic');
newPic = "Images/Photography/" + getPic(index);
mainPic.src = newPic;
updateThumbs();
}
}
function prevPic() {
if ( index > 0 ) {
index--;
updateThumbs();
}
}
function nextPic() {
if ( index < picCount ) {
index++;
updateThumbs();
}
}
function prevSet() {
if ( index > 5 ) {
index = index - 5;
} else {
index = 3;
}
updateThumbs();
}
function nextSet() {
if ( index < picCount - 5 ) {
index = index + 5;
} else {
index = piccount - 3;
}
updateThumbs();
}
function first() {
index = 2;
updateThumbs();
}
function last() {
index = picCount - 4;
updateThumbs();
}
function updateThumbs() {
for ( i = 1; i < 6; i++ ) {
var thumbPic = document.getElementById('thumbnail' + i);
thumbindex = index + (i - 3);
if ( thumbindex >= 0 && thumbindex < picCount ) {
newPic = "Images/thumbnails/" + getPic(thumbindex);
} else {
newPic = "Images/dot.gif";
}
thumbPic.src = newPic;
}
}
</script>
You can find this in practice here:
https://campfireditties2.sslpowered.com/iangibbonsphotography.ca/IanGIbbonsPeople.html
Any help would be tremendously appreciated.
<body onload="preloadImages();" bgcolor="black">
<div id="wrapper">
<div id="layer1">
<div style="position:relative;width:958px;height:645px;-adbe-g:p;">
<div style="position:absolute;top:544px;left:112px;width:69px;height:25px;">
<a onmouseover="changeImages('HomeText','Images/HomeTextRolloverGif.gif');return true" onmouseout="changeImages('HomeText','Images/HomeTextGif.gif');return true" href="IanGIbbonsPhotographyMain.html"><img id="HomeText" src="Images/HomeTextGif.gif" alt="" name="HomeText" height="25" width="69" border="0" /></a></div>
<div style="position:absolute;top:544px;left:256px;width:84px;height:23px;">
<a onmouseover="changeImages('AboutText','Images/AboutTextRolloverGif.gif');return true" onmouseout="changeImages('AboutText','Images/AboutTextGif.gif');return true" href="IanGIbbonsPhotographyAbout.html"><img id="AboutText" src="Images/AboutTextGif.gif" alt="" name="AboutText" height="23" width="84" border="0" /></a></div>
<div style="position:absolute;top:544px;left:400px;width:67px;height:25px;">
<a onmouseover="changeImages('HireText','Images/HireTextRolloverGif.gif');return true" onmouseout="changeImages('HireText','Images/HireTextgif.gif');return true" href="IanGIbbonsPhotographyHire.html"><img id="HireText" src="Images/HireTextgif.gif" alt="" name="HireText" height="25" width="67" border="0" /></a></div>
<div style="position:absolute;top:544px;left:528px;width:112px;height:21px;">
<a onmouseover="changeImages('ContactText','Images/ContactTextRolloverGif.gif');return true" onmouseout="changeImages('ContactText','Images/ContactTextGif.gif');return true" href="IanGIbbonsPhotographyContact.html"><img id="ContactText" src="Images/ContactTextGif.gif" alt="" name="ContactText" height="21" width="112" border="0" /></a></div>
<div style="position:absolute;top:544px;left:704px;width:131px;height:22px;">
<a onmouseover="changeImages('CalendarText','Images/CalendarTextRolloverGif.gif');return true" onmouseout="changeImages('CalendarText','Images/CalendarTextGif.gif');return true" href="#"><img id="CalendarText" src="Images/CalendarTextGif.gif" alt="" name="CalendarText" height="22" width="131" border="0" /></a></div>
<div style="position:absolute;top:80px;left:128px;width:69px;height:317px;">
<table>
<tr>
<td>
<div align="center">
<a href="javascript:prevSet()"><img class="nobo" src="Images/prevSet.gif" alt="Previous Set" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
<tr>
<td><a href="javascript:setPic(-2)"><img id="thumbnail1" src="Images/dot.gif" alt="" name="thumbnail1" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(-1)"><img id="thumbnail2" src="Images/dot.gif" alt="" name="thumbnail2" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(0)"><img id="thumbnail3" src="Images/thumbnails/Image1.png" alt="" name="thumbnail3" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(1)"><img id="thumbnail4" src="Images/thumbnails/Image2.png" alt="" name="thumbnail4" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(2)"><img id="thumbnail5" src="Images/thumbnails/Image2.png" alt="" name="thumbnail5" style="border-style: none" /> </a></td>
</tr>
<tr>
<td>
<div align="center">
<a href="javascript:nextSet()"><img class="nobo" src="Images/nextSet.gif" alt="Next" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
</table>
</div>
<div style="position:absolute;top:97px;left:280px;width:565px;height:386px;">
<img id="BigPic" src="Images/Photography/Start.png" alt="Enforcer" name="BigPic" /></div>
<csnopos>
<cspos xpos="80" xpos="0">
<script type="text/javascript" language="javascript">
filenames = new Array (
"Image1.png",
"Image2.png",
"Image2.png",
"Image4.png",
"Image5.png" )
descriptions = new Array (
"Image1.png",
"Image2.png",
"Image3.png",
"Image4.png",
"Image5.png" )
picCount = filenames.length;
index = 0;
function getPic(i) {
return filenames[i];
}
function getDesc(i) {
return descriptions[i];
}
function setPic(thumb) {
if ( index + thumb >= 0 && index + thumb < picCount ) {
index = index + thumb;
var mainPic = document.getElementById('BigPic');
newPic = "Images/Photography/" + getPic(index);
mainPic.src = newPic;
updateThumbs();
}
}
function prevPic() {
if ( index > 0 ) {
index--;
updateThumbs();
}
}
function nextPic() {
if ( index < picCount ) {
index++;
updateThumbs();
}
}
function prevSet() {
if ( index > 5 ) {
index = index - 5;
} else {
index = 3;
}
updateThumbs();
}
function nextSet() {
if ( index < picCount - 5 ) {
index = index + 5;
} else {
index = piccount - 3;
}
updateThumbs();
}
function first() {
index = 2;
updateThumbs();
}
function last() {
index = picCount - 4;
updateThumbs();
}
function updateThumbs() {
for ( i = 1; i < 6; i++ ) {
var thumbPic = document.getElementById('thumbnail' + i);
thumbindex = index + (i - 3);
if ( thumbindex >= 0 && thumbindex < picCount ) {
newPic = "Images/thumbnails/" + getPic(thumbindex);
} else {
newPic = "Images/dot.gif";
}
thumbPic.src = newPic;
}
}
</script>
You can find this in practice here:
https://campfireditties2.sslpowered.com/iangibbonsphotography.ca/IanGIbbonsPeople.html
Any help would be tremendously appreciated.