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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Boston, MA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript image gallery linking question

    Hi there,

    I've done quite a bit of searching but haven't been able to figure this out myself. I'm working on building an image gallery where the main browser window contains thumbnails and when a thumbnail is clicked it launches a separate popup window containing larger versions of the images with "previous" and "next" links.

    What I can't figure out is how to get the first image that the popup window shows be the larger version of the specific thumbnail that was clicked on instead of the first image in the gallery (the one with the number "1" assigned to it).

    I know there are some pretty fancy JavaScript galleries out there but I'm looking for one that maintains a similar look to the rest of the site, which is a very simple look.

    Below is the code I'm working with...

    Main window:
    Code:
    ...
    </head>
    <body>
    
    <script type="text/javascript">
    function openpopup(){
    var winpops=window.open('imagegallery.html',"","width=700,height=700,status,scrollbars")
    }
    </script>
    
    <table width="770" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td><div align="center">
          <p>Click on an image below</p>
        </div></td>
      </tr>
      <tr>
        <td><div align="center">
          <table width="760" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td><div align="center"><a href="javascript:openpopup()"><img src="image1a.jpg" alt="" width="227" height="302" border="0" /></a></div></td>
              <td><div align="center"><a href="javascript:openpopup()"><img src="image2a.jpg" alt="" width="227" height="302" border="0" /></div></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    Popup gallery window:
    Code:
    ...
    <script language="JavaScript">
    <!--hide
    var photos=new Array()
    var num=1
    img1 = new Image ()
    img1.src = "image1.jpg"
    img2 = new Image ()
    img2.src = "image2.jpg"
    
    function backward()
    {
    num=num-1
    if (num==0)
    {num=2}
    document.mypic.src=eval("img"+num+".src")
    }
    
    function forward()
    {
    num=num+1
    if (num==3)
    {num=1}
    document.mypic.src=eval("img"+num+".src")
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <table width="650" border="0" align="center" cellpadding="5" cellspacing="0">
      <tr>
        <td><div align="center">
          <p>My Images</p>
          <p>&nbsp;</p>
        </div></td>
      </tr>
      <tr>
        <td><div align="center">
          <table width="620" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td width="300" height="50"><form method="POST" name="rotater"><div align="left"><a href="" onClick="backward();return false">&lt;Previous</a></div></form></td>
              <td width="300" height="50"><form method="POST" name="rotater"><div align="right"><a href="" onClick="forward();return false">Next&gt;</a></div></form></td>
            </tr>
          </table>
        </div></td>
      </tr>
      <tr>
        <td><div align="center"><img src="image1.jpg" name="mypic"></div></td>
      </tr>
      <tr>
        <td><div align="center">
          <table width="620" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td width="300" height="50"><form method="POST" name="rotater"><div align="left"><a href="" onClick="backward();return false">&lt;Previous</a></div></form></td>
              <td width="300" height="50"><form method="POST" name="rotater"><div align="right"><a href="" onClick="forward();return false">Next&gt;</a></div></form></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    My gallery consists of more than 2 pictures but I figure this'll get the point across. Basically, with the way it is now, if I click on either of the images in the main windows (the thumbnail versions), a new window pops up showing the larger version of image1.jpg and I can navigate to image2.jpg by clicking on the "next" link (or, in this case since there are only 2 pictures, the "previous" link as well).

    What I'd like to accomplish is to be able to click on the thumbnail version of image2.jpg and have the popup window appear with the larger version of image2.jpg as the first image that appears. From there I could still use the "next" or "previous" links to navigate to image1.jpg.

    If anyone can provide me with some help on achieving this, I'd be very thankful.

    Thanks!
    Arthur
    Last edited by r2aux; 01-17-2009 at 09:40 PM. Reason: typed "jpt" instead of "jpg" for one of the images


 

Tags for this Thread

Posting Permissions

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