Adding slideshow nav buttons in Image Thumbnail Viewer II

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!

.

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:

Code:

---

///////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:

HTML Code:

---

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

---

example buttons:

HTML Code:

---

<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.

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

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

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

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

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

HTML Code:

---

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

---

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

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

Quote:

---

Originally Posted by 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

---

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!

Quote:

---

Originally Posted by buvwon

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.

Hi John,

Your solution worked beautifully for this site (http://www.deanamason.com/women), but now I can't get it to work for the site I am currently working on. It only goes to the first and last images and that's it. I don't know how to code, but it appears to be going into the else part of the statement every time. But I don't really know.

Here is the page where the arrows are not working.
http://www.bradleynewton.com/rick/ex...excerpts2.html


Thanks in advance!

I also have another question in reference to the page above (http://www.bradleynewton.com/rick/ex...excerpts2.html) and the arrow modification you made for me.

Is there any way to get the little black box to be filled in depending on what image you are on. What I mean is when you click the right or left arrow or when you click the little box itself, the box associated with that image would darken (as they do on mouseover), but stay filled in. So if you were on the 10th image in the array, the box on the top right would filled in. Additionally, if you clicked this box, the 10th image would display and the box would stay filled in.

Thanks so much!

Quote:

---

Originally Posted by buvwon

I also have another question in reference to the page above (http://www.bradleynewton.com/rick/ex...excerpts2.html) and the arrow modification you made for me.

Is there any way to get the little black box to be filled in depending on what image you are on. What I mean is when you click the right or left arrow or when you click the little box itself, the box associated with that image would darken (as they do on mouseover), but stay filled in. So if you were on the 10th image in the array, the box on the top right would filled in. Additionally, if you clicked this box, the 10th image would display and the box would stay filled in.

Thanks so much!

---

The arrows aren't working very well on that page and, those little boxes are no part of the Thumbnail Viewer II script that I know of.

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

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

My File:
http://www.bradleynewton.com/rick/ex...excerpts2.html

Sorry 'bout that... I didn't realize I needed to put the script link in every post... thought it was just the first post in a new thread that needed it.

Anyway, yes, you are right the arrows aren't working well on that page. Maybe you didn't notice that I posted two posts right in a row, but that was my first question. I've tried renaming the files (that was a problem once on the other site I did) and a couple of other things and I can't seem to get them to work correctly.

As for the black boxes... they aren't part of the original script, but I thought maybe you or someone else might be able to figure out a way to incorporate them into the script so they would do a swap image as the arrows are clicked and as they are clicked. This is sort of two issues... the arrows and the boxes themselves:

1. The arrows... Somehow I need to have a swap image for the boxes that is tied to the function that figures out which image number in the array we are on. Possibly, I could then create an array or something for the little boxes themselves that would then swap the correct one for a filled in version.

2. The boxes... Here, I could simply do a SwapImage onClick in Dreamweaver except for one problem. I already have the onClick command changing the image in the center using the Image Thumbnail Viewer II script. I don't know how to add an additional onClick behavior and whether that would foul up the script.

Thanks!

I did noticed that the modification I gave you wasn't working. That is due to the way the paths are listed in the array. To fix that, change this:

Code:

---

if (theImg.indexOf(dynimages[i_tem][0])>-1)

---

in the function findLoaded() to:

Code:

---

if (theImg.indexOf(dynimages[i_tem][0].replace(/^.*\//, ''))>-1)

---

I'm not sure about those little squares, you want the displayed image's little square to stay black. It might be best to use a different method of changing them, one integrated into the viewer script. Also, if empty divisions with 1px solid black borders and the desired dimensions were used, the background color of the division could be changed, no images required.

Thanks... that fix worked perfectly.

I see what you saying about skipping the whole image thing with the boxes. Only problem is that I am pretty novice when it comes to all this, so I'm not sure how I'd go about changing the background color, etc and whether onclick commands could be applyed to just a cell. There are so many things that this client wants to occur on the boxes and arrows (multiple mouseover changes and multiple onclick changes) that I'm not sure how to accomplish them all. But thanks for the idea, anyway.

I really have appreciated all your help here in this forum, John. Thanks again.

And congrats on your 5,000th post.

Well, I got sort of fascinated by this layout and came up with this demo. It requires that the little boxes still be images and that they each have the names that they did in the original code and that no other images on the page have names that begin with 'Image'. There are also a number of places where the path to the thumbnail directory is used, as well as the 'suffix' for the thumbnails, some of these are more noticeable than others. If those things change, they will need to be changed everywhere that they appear on the page. I also made some (valid for this page) assumptions about the numbering conventions for the thumbnails, they go 01 to 09 and then from 10 to whatever (in this case 30), if that scheme changes, adjustments to the code would have to be made. Needless (I hope) to say, uniquely named thumbnails (ones not in numerical sequence) cannot be supported with this code.

Wow! Thank you! That demo is perfect... it does everything exactly as I want it to (except for the image enlargement). I can't tell you how excited I am to see this!

John... you have been unbelievably helpful and incredibly responsive on so many occasions now. I'd like to send you a little something as a thank you. Seriously, pm me or email me your address so I can do that.

THANK YOU!

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

Here's a link to my working file:
http://freespace.virgin.net/tony.kin...odhands/1test/

This is all very new to me. I have downloaded the thumbnail viewer and added the code you gave above to be able to use next and previous navigation arrows. I've then uploaded the revised file onto my server, but the navigation arrows just don't work.

Can you help please

Re my previous post, no worries, I've sorted it out now