pop up more than one image

[Maine]

I have the script for a pop up window that when you click a thumbnail photo it displays a larger photo. What I want to do is have an arrow in the pop up window that allows the viewer to look at more than just that one photo. Any help would be appreciated.

 

[Lrnmore]

Hey,
Are you passing the image to the pop-up??
I'like to see how that's done if you are...
-or-
Are you loading a url location in the pop-up??

Either way my third question would be what is
your plan for assigning values to the arrow?

2b||!2b

 

[Maine]

This answer will tell you what a novice I am. I don't understand the difference between "passing the image to the pop-up" and "loading a url location in the pop-up". I also don't understand why I would have to assign "values to the arrow". I know I am over my head with Javascript but Tek-tips has taught me so much on other forums that I know I can learn from this one as well. Please bear with me.

 

[dwarfthrower]

So you would like a facility to page through the photos in the one pop-up, rather than having to close the pop-up then re-open the next image in a new pop-up window?

Say you have a gallery with 20 photos, I click on photo 5, The popup should have, not only the big version of photo 5, but a 'back' link that would take me to the big version of photo 4 and a forward link to take me to the big version of photo 6 without having to close the window.

Do I understand the problem correctly?

If so, here's what I'd do:
On the main page -
▶ Set up an array of all the sources to the big photos:
[tt]var bigPhotoArray = new Array("images/bigPhoto1.jpg","images/bigPhoto2.jpg","images/bigPhoto2.jpg" ... ... ,"images/bigPhoto20.jpg"[/tt]

▶ Define a variable to hold the currently clicked photo:
[tt]var currentPhoto = 0;[/tt]

▶ Create a function to set that varible based on it's argument:
[tt]function setCurrentPhoto(intPhotoNumber){
currentPhoto = intPhotoNumber;
}[/tt]

▶ Set each of the links around the thumbnails to call this function as part of the [tt]onclick[/tt] attribute:
[tt]<a href=&quot;images/bigPhoto1.jpg&quot; onclick=&quot;setCurrentPhoto(0);DoPopupCode();&quot;>[/tt]

In the popup page code -
&#9654; Get the source for the image to display by referencing the currentPhoto variable and using it as a subscript for the photo array:
[tt]var imgSource = opener.bigPhotoArray[opener.currentPhoto];[/tt]

&#9654; Use this to set the source of the image:
[tt]document.getElementById(&quot;MyBigImageID&quot.src = imgSrc;[/tt]

&#9654; Set up a couple of functions which just either increment or decrement the value of [tt]currentPhoto[/tt] then refresh the image for the forward / back buttons:
[tt]function goBack(){
if(opener.currentPhoto > 0){
opener.currentPhoto = opener.currentPhoto - 1;
var imgSource = opener.bigPhotoArray[opener.currentPhoto];
document.getElementById(&quot;MyBigImageID&quot.src = imgSrc;
}
}

function goForward(){
if(opener.currentPhoto < (opener.bigPhotoArray.length - 2)){
opener.currentPhoto = opener.currentPhoto + 1;
var imgSource = opener.bigPhotoArray[opener.currentPhoto];
document.getElementById(&quot;MyBigImageID&quot.src = imgSrc;
}
}[/tt]

Hope this is what you're after.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[sethu27]

hi,

For simple way, create two html pages of which one contains only one image(say 1.htm), other page will contain multiple images(say 2.htm). Provide 2.htm to the arrow mark.