Results 1 to 2 of 2

Thread: photo gallery, html, css, javascript

  1. #1
    Registered
    Join Date
    Jun 2012
    Location
    Canada
    Posts
    1
    Rep Power
    0

    photo gallery, html, css, javascript

    hi, Im working in a gallery and I have a question.

    How can I make a gallery with two divs, one div contains thumbnails and the other div will display a bigger picture according to the image that the user clicks on the thumbnail div

    thanks for your help

  2. #2
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    The JavaScript required is pretty simple. You add an 'onclick' attribute to the thumbnail images that change the 'src' attribute of the <img> tag that displays the large image. Something like:
    Code:
    <div id="thumbnails">
    <img src="small-image-1.jpg' onclick="document.getElementById('largeImg').src = '/images/large-image1.jpg;' ">
    <img src="small-image-2.jpg' onclick="document.getElementById('largeImg').src = '/images/large-image2.jpg;' ">
    </div>
    <div id="bigDisplay">
    <img id="largeImg" src="/images/default-image.jpg">
    </div>
    The styling/layout is up to you.

    If you'd rather not start from scratch, the web is full of scripts that will do this sort of thing. Do a search on "gallery script click thumbnail" or something similar and you should be able to find several choices. Good luck!
    Rick Trethewey

Posting Permissions

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