469,626 Members | 967 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

How to link to specific images in a Javascript slideshow

I have a popup window which is a slideshow of about 7 images. When the
popup window loads, the first image is present and then the viewer can
select next or previous to scroll through the rest of the images.

I'd like to use the same popup window at different points throughout
the website and have the Virtual Tour (slideshow) open up at the
appropriate photos. Meaning I'd like to control which picture the
popup window opens up to, depending on where the user is in the site.

Does anyone know where I can find code that does this? I am somewhat
familiar with Javascript but would like to find some ready-made code
which accomplishes this.

Thanks for all help and suggestions!!

--JAG
Jul 23 '05 #1
2 1909
Jeannie wrote:
I have a popup window which is a slideshow of about 7 images. When the
popup window loads, the first image is present and then the viewer can
select next or previous to scroll through the rest of the images.

I'd like to use the same popup window at different points throughout
the website and have the Virtual Tour (slideshow) open up at the
appropriate photos. Meaning I'd like to control which picture the
popup window opens up to, depending on where the user is in the site.

Does anyone know where I can find code that does this? I am somewhat
familiar with Javascript but would like to find some ready-made code
which accomplishes this.

Thanks for all help and suggestions!!

--JAG


I don't know about ready made code - however it shouldn't prove to
difficult to come up with some sort of a solution since you already have
some javascript skills. There are a couple of things you might already
know, but you've not connected them...

First, when you open your popup window with window.open, you give the
popup window a name... If you use the same window name as a target in
any of your other pages, it will update the popup window - And if its
not already open (perhaps the user closed it) then a new one will open.

The only problem that I could forsee is that you might want a popup that
is larger then the one opened in an earlier window in which case you
might have to resize it (which I believe is possible on most recent
popular browsers but I've never written code for it).

Does that help you any, or do you still need some code? In my early days
of learning javascript I used to examine some of the code at
javascript.internet.com however not all of it is environmentally
friendly (in such that it may be unclean code, achieveing results that
could be achieved with less resources using alternative methods).
Still, its helps me along... maybe you might find what you're looking
for there.

randelld
Jul 23 '05 #2
Thanks - though I wasn't able to quite come up with a solution yet. I
am putting my code here, maybe that will help. If anyone can make
suggestions on how to alter it, that would be much appreciated!

Here's the code for the popup slideshow I have now which currently is
running.
***********************************************
<html>
<head>
<script language="JavaScript">
<!--
var interval = 30000;
var random_display = 0;
var imageDir = "images/";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_airplane.jpg");
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_airplane.jpg");
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_humidor.jpg");
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_humidor2.jpg");
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_lounge1.jpg");
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_lounge2.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "im_pop_udr.jpg");
imageArray[imageNum++] = new imageItem(imageDir +
"im_pop_winecel.jpg");

var totalImages = imageArray.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}

var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}

function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
// -->
</script>
</head>
<body>
<table>
<tr>
<td><img src="images/im_pop_airplane.jpg" width="442" height="288"
alt="" border="0" img name="slideImg"></td>
</tr>
<tr>
<td class="closelink"><a href="#" onClick="prevImage('slideImg');
clearTimeout(timerID)" class="closelink"> &lt;&lt;previous</a> </td>
<td></td>
<td align="right" class="closelink"><a href="#"
onClick="switchImage('slideImg'); clearTimeout(timerID)"
class="closelink">next&gt;&gt; </a></td>
</tr>
<tr>
</table>
</body>
</html>
************************************************** *********

The code above is the actual slideshow code which runs in a popup
window. I want to be able to call up the slideshow popup from other
pages in my website, but have it start at an image I specify.

For instance, on one page, I use this code to call up the slideshow
popup:
<a href="javascript:popUp('banquet_tour.html')"><img
src="images/bt_bd_pic2.jpg" width="234" height="153" alt=""
border="0"></a>

It always defaults to the first popup in the array. How can I ask it
to start with a different specific image in the array?
***********************************************

Reply Via Newsgroup <re****************@please.com> wrote in message news:<LpJdc.63527$oR5.13701@pd7tw3no>...
Jeannie wrote:
I have a popup window which is a slideshow of about 7 images. When the
popup window loads, the first image is present and then the viewer can
select next or previous to scroll through the rest of the images.

I'd like to use the same popup window at different points throughout
the website and have the Virtual Tour (slideshow) open up at the
appropriate photos. Meaning I'd like to control which picture the
popup window opens up to, depending on where the user is in the site.

Does anyone know where I can find code that does this? I am somewhat
familiar with Javascript but would like to find some ready-made code
which accomplishes this.

Thanks for all help and suggestions!!

--JAG


I don't know about ready made code - however it shouldn't prove to
difficult to come up with some sort of a solution since you already have
some javascript skills. There are a couple of things you might already
know, but you've not connected them...

First, when you open your popup window with window.open, you give the
popup window a name... If you use the same window name as a target in
any of your other pages, it will update the popup window - And if its
not already open (perhaps the user closed it) then a new one will open.

The only problem that I could forsee is that you might want a popup that
is larger then the one opened in an earlier window in which case you
might have to resize it (which I believe is possible on most recent
popular browsers but I've never written code for it).

Does that help you any, or do you still need some code? In my early days
of learning javascript I used to examine some of the code at
javascript.internet.com however not all of it is environmentally
friendly (in such that it may be unclean code, achieveing results that
could be achieved with less resources using alternative methods).
Still, its helps me along... maybe you might find what you're looking
for there.

randelld

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Raphael Gluck | last post: by
2 posts views Thread by Whitney | last post: by
8 posts views Thread by drillbit_99 | last post: by
1 post views Thread by ttamilvanan81 | last post: by
4 posts views Thread by Terry | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.