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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    JavaScript Gallery

    Hey all,

    Effectively what I want is a table displaying 20 thumbnails and above the table to be a large image. When a user clicks a thumbnail I want a relative image to be displayed above.

    Now obviously I can just set this to reload the page and load the relative image in its space but I was wondering if there was a way of doing this without having to reload the whole page each time. I also want to avoid Iframes as I want this to be as cross-compatible as possible.

    Thanks all.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option is to put an onclick event handler on each thumbnail that passes the src of the thumbnail <img> to a function.

    The function then sets the src of the enlargement <img> to the src that is passed to the function.

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    YourDirector:

    See, the two cross-browser demos here:

    http://www.dynamicdrive.com/forums/s...57&postcount=1

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    that link only goes to a post with more links.

    I've already had warnings from my Trend Micro from links posted in forums like this.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb Something to try ...

    Change the "baseURL" and filenames in the "imgList" array to match your images.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=231925
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
        '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
        '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
        '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
        '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'  // No comma after last entry
    ];
    // If you have BOTH actual image and thumbnail images, could be named '11.jpg' and '_11.jpg'
    // where the images with leading '_' would be the thumbnail list, you could change below at the '//'
    // and remove the 'height' and 'width' designation in the HTML section for the thumbnail tags
    
    function showMain(Info) {
      document.getElementById('mainImg').src = baseURL+imgList[Info];
    }
    window.onload = function() {
      document.getElementById('mainImg').src = baseURL+imgList[0];
      for (var i=0; i<imgList.length; i++) {
        document.getElementById('img'+i).src = baseURL+imgList[i];
    //  document.getElementById('img'+i).src = baseURL+'_'+imgList[i];
      }
    }
    
    </script>
    <style type="text/css">
    
    </style>
    
    </head>
    <body>
    <center>
    <img src="" id="mainImg" height="200" width="175">
    <p>
    
    <script type="text/javascript">
      var str = '';
      for (var i=0; i<imgList.length; i++) {
        str += '<img src="" id="img'+i+'" height="50" width="35" onclick="showMain(\''+i+'\')">';
    //  str += '<img src="" id="img'+i+'" onclick="showMain(\''+i+'\')">'; // if thumbnail images available
    	str += ((i % 10) == 9) ? '<br>' : '';  // optional 
      }
      document.write(str);
    </script>
    </center>
    
    </body>
    </html>
    Note the other optional changes you can make in the comments of the script.

    Post back if you have questions.

    Good Luck!


  •  

    Posting Permissions

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