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.
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.
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="images/bigPhoto1.jpg" onclick="setCurrentPhoto(0);DoPopupCode();">[/tt]
In the popup page code -
▶ 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]
▶ Use this to set the source of the image:
[tt]document.getElementById("MyBigImageID".src = imgSrc;[/tt]
▶ 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("MyBigImageID".src = imgSrc;
}
}
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.
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.