Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Popup loads different image depending on link

    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!

  • #2
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nope, that's not it.

    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)
    Last edited by Ezn; 11-10-2006 at 10:51 PM. Reason: added URL

  • #3
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    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

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try


    slideshow.js
    PHP Code:
    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>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ess View Post
    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.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Ezn

    Is the code I posted no good?
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Success! Thx, Mr. J

    Mr. J.,

    Works! U PWN!
    Last edited by Ezn; 11-12-2006 at 07:02 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •