...

View Full Version : Popup loads different image depending on link



Ezn
11-10-2006, 06:37 PM
Example:
http://home.nyc.rr.com/ezn/swapop/

Click on any thumbnail and the same popup appears. Popup has a JavaScript slideshow.

How can I make the popup load a different main image depending on which thumbnail is clicked?

Pretty sure I need GetElementById but not sure how to implement.

Should I post code? I think I just code snippet from helpful haxxors that I can incorporate.

Thanks!

Ezn
11-10-2006, 09:38 PM
Thanks for your reply Ancora, but I want to incorporate code for what I need into what I have already and I need that slideshow to work. Also, main larger images are different sizes.

This is what you gave me: http://home.nyc.rr.com/ezn/cip.html

Did you look at my page? http://home.nyc.rr.com/ezn/swapop/

Anyone else have something for me? Please look at my example.

[user Ancora deleted their post for some reason)

ess
11-11-2006, 12:20 AM
Well...there is more than one way to do this...but here is one way that came to mind as soon as I saw your post. Note: I have not done any testing...but I have implemented similar script and works like a charm.

Change your onclick event to the following.

onClick="javascript: openPopup( 'image_name.jpg' );"

change your JS function to the following.

function openPopup( name )
{
// array of images you want to include in the slideshow
var img_array = new Array( "image1.jpg", "image2.jpg", "image3.jpg" );
var pop = window.open( "", "popup", 'scrollbars=yes,width=500,height=540' );
// you should write the next...etc links here...and assign on click events for them

pop.document.write( "<img src='"+ name + "'/>" );
pop.document.close();

}

Please note that the JS function is not complete. You need to add few things. Here are some hints.

1- the array of images should contain objects of type Image. Why...simple, you want the loading of images to be as fast as possible...so you should cache them before displaying them etc on the user's machine.

2- you need to implement next, previous etc functions so the popup would act as a slide show that user's grown used to. That should be simple enough...you seem to have got that sorted already on your existing function.

Anyway...I am sure that someone would come up with another solution. In any case...good luck

ess

Mr J
11-11-2006, 08:52 AM
Give this a try


slideshow.js


dataPassed=null
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
}


NewImg = new Array (
"images/limecat.jpg",
"images/partay.jpg",
"images/eated.jpg"
);


onload=function init(){
if(dataPassed){
ImgNum=dataPassed
document.slideshow.src = NewImg[ImgNum];
}
else{
ImgNum=0
}
}

var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var run;

function chgImg(direction) {
if(document.images){

if(direction==1){
ImgNum++
}
else{
ImgNum--
}

if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}

paused=0
function auto() {
if(paused==0) {
run = setInterval("chgImg(1)", delay);
paused=1
}
else{
window.clearInterval(run);
paused=0
}
}


The links must now include an ordinal number relating to the image to be shown


<A onclick="openPopup('popup.html?0','popup','scrollbars=yes,width=500,height=540')" href="#null">
<IMG height=110 hspace=24 src="images/th_limecat.jpg" width=144 border=0></A>

<A onclick="openPopup('popup.html?1','popup','scrollbars=yes,width=500,height=540')" href="#null">
<IMG height=99 hspace=24 src="images/th_partay.jpg" width=108 border=0></A>

<A onclick="openPopup('popup.html?2','popup','scrollbars=yes,width=500,height=540')" href="#null">
<IMG height=140 hspace=24 src="images/th_eated.jpg" width=105 border=0></A>

Ezn
11-11-2006, 08:38 PM
Well...there is more than one way to do this...but here is one way that came to mind as soon as I saw your post. Note: I have not done any testing...but I have implemented similar script and works like a charm.

Change your onclick event to the following.

onClick="javascript: openPopup( 'image_name.jpg' );"

change your JS function to the following.

function openPopup( name )
{
// array of images you want to include in the slideshow
var img_array = new Array( "image1.jpg", "image2.jpg", "image3.jpg" );
var pop = window.open( "", "popup", 'scrollbars=yes,width=500,height=540' );
// you should write the next...etc links here...and assign on click events for them

pop.document.write( "<img src='"+ name + "'/>" );
pop.document.close();

}

Please note that the JS function is not complete. You need to add few things. Here are some hints.

1- the array of images should contain objects of type Image. Why...simple, you want the loading of images to be as fast as possible...so you should cache them before displaying them etc on the user's machine.

2- you need to implement next, previous etc functions so the popup would act as a slide show that user's grown used to. That should be simple enough...you seem to have got that sorted already on your existing function.

Anyway...I am sure that someone would come up with another solution. In any case...good luck

ess

So, I need to have the code for the popup in the JS in the parent page? No way with this for having the popup be a separate file? Playing with this, also with PHP example.

Mr J
11-11-2006, 10:32 PM
Ezn

Is the code I posted no good?

Ezn
11-12-2006, 05:57 PM
Mr. J.,

Works! U PWN!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum