Adding slideshow nav buttons in Image Thumbnail Viewer II

[buvwon]

Script: Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

Other Script: Blending Image Slideshow Script
http://www.dynamicdrive.com/dynamicindex14/image4.htm

Here's a link to my working file:
http://www.deanamason.com/2006/picpage12.htm

OK... so what I would like to do is add the ability to have a "next" and "back" arrow so that users could either click on the thumbnail or click on the next and back buttons below the main photo.

I don't know how to code anything... but I'm thinking that there's got to be a way to tell the script to move to the subsequent image in an array. I mean that has to be what is happening for slideshow scripts like Blending Image Slideshow Script (see link above). All I would want to do is be able to put that on an onClick on a little arrow gif. I would want the images to transition just as smoothly as they do and in exactly the same way as they do now when a user clicks on another thumbnail.

Thanks in advance!

P.S. Is this the best way to be accomplishing my goals here... or should I just create a separate page for each image and do it that way?? Ideas? Advice? Suggestions?

P.P.S. I have a friend who is using Windows XP and IE 6. On her (hi res) monitor, the table stretches out horizontally and there is white space to the right and left of the horizontal bar at the bottom... inside the black outline. It's weird. And I don't know if this could be related, but she apparently has some setting (which I can't figure out or find where to change) that makes all the images look crappy and compressed. Maybe that's part of the problem. So if you see an obvious error in my table that you think might be doing that, please let me know. I tried to use gif image spacers. (And I know I'm not supposed to do layouts with tables anymore.) Thanks!

[jscheuer1]

.

Edit: The below solution applies to an outdated version of this script. It will not work with the current version. If you came here looking for this sort of a solution, either continue looking or start a new thread on the topic.

Add to the Image Thumbnail Viewer II script, just below the 'No need to edit beyond here' line:

///////No need to edit beyond here/////
function findLoaded(){
if(typeof document.getElementById('dynloadarea').getElementsByTagName('img')[0]!=='undefined'){
var theImg = document.getElementById('dynloadarea').getElementsByTagName('img')[0].src
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
if (theImg.indexOf(dynimages[i_tem][0])>-1)
return i_tem
}
else
return -1
}

function nextImg(){
if (findLoaded()<dynimages.length-1)
modifyimage('dynloadarea', findLoaded()+1)
else
modifyimage('dynloadarea', 0)
}

function previousImg(){
if (findLoaded()>0)
modifyimage('dynloadarea', findLoaded()-1)
else
modifyimage('dynloadarea', dynimages.length-1)
}

Then you can use buttons, images or whatever, example images:

<a href="#" onclick="nextImg();return false;"><img src="next.gif"></a>
<a href="#" onclick="previousImg();return false;"><img src="previous.gif"></a>

example buttons:

<input type="button" value="Next" onclick="nextImg();"> 
<input type="button" value="Previous" onclick="previousImg();">

Edit: The above solution applies to an outdated version of this script. It will not work with the current version. If you came here looking for this sort of a solution, either continue looking or start a new thread on the topic.

[martino]

Hello,

Is there a way to have an initial image display automatically as apposed to clicking to view the first image?

In reference to: http://www.dynamicdrive.com/dynamici...thumbnail2.htm for onclick()

Thanks,
Martin

[martino]

Please disregard the last message, I was able to fix it by adding the following code:
<div id="dynloadarea" style="width:100%;height:100%"><img src="images/portfolios/SB/sb1.jpg"></div>

I'm sure there is a better way of modifying this code as I notice that the transition isn't the smoothest.
Please let me know if you have a better solution.

Thanks,
Martin

[jscheuer1]

Actually, that is how it is done. I never noticed a problem with the transition.

[martino]

Hi John,

The problem is that there are 2 types of sizes in the gallery: Horizontal (501px x 397) and Vertical (424px x 488px)

I notice a hard transition between the 2 types when selected. Is there another way of setting these sizes to show them centered?

Thanks,
Martin

[jscheuer1]

Yes, use a table's cell as your id="dynloadarea" element. Set its dimensions to the largest height and largest width:

<td id="dynloadarea" align="center" valign="middle" width="501" height="488">

You may want to pad the height and width, like 521x508.

[martino]

You're brilliant! Thanks...it worked.

[buvwon]

Please disregard the last message, I was able to fix it by adding the following code:
<div id="dynloadarea" style="width:100%;height:100%"><img src="images/portfolios/SB/sb1.jpg"></div>

I'm sure there is a better way of modifying this code as I notice that the transition isn't the smoothest.
Please let me know if you have a better solution.

Thanks,
Martin

I did the same by adding the following code:
<body onLoad="modifyimage('dynloadarea', 0);return false">

Is one way better than the other, John?

Thanks!

[jscheuer1]

I did the same by adding the following code:
<body onLoad="modifyimage('dynloadarea', 0);return false">

Is one way better than the other, John?

Thanks!

Generally, images hard coded into the HTML will load faster. On a simple page, it would be hard to tell. Whatever looks best to you is fine. I like to avoid doing anything onload if I can - it is one of the most common causes of script conflicts.