SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change main photo when you click on links

    I'm trying to add a very simple gallery where the photo is at the top and thumbnails are underneath. All I want to happen is that the photo changes when you click on one of the thumbnails. I've been trying to search for this but the galleries all seem to have stuff I don't want.

    I tried the following and it does change the image but it also opens up the thumbnail.

    Code:
    <img id="im" src="photos/039.jpg">
    <a href="photos/t001.jpg" onclick="document.getElementById('im').src='photos/001.jpg'"><img src="photos/t001.jpg"></a>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    You'll need a bit more code to prevent the click event, that being to return false from the event.

    An easier to manage variation of what you have above, is to move the code to a separate function. I've also changed the link to go to the large image, so that people without javascript can see the image, and so that scripting can use that image as well.

    Using inline scripting attributes leads to massive amounts of duplication, and ends up making your job a lot harder. I've removed them from this sample code, because there is an easier way where we use scripting to attach an onclick event handler on to each of those links.

    Code html4strict:
    <div id="gallery">
        <img id="im" src="photos/039.jpg">
        <a href="photos/001.jpg"><img src="photos/t001.jpg"></a>
    </div>

    The script code you should place in a separate file, and save it as js/script.js - that way you can load it from the end of your body, without it cluttering up the rest of the HTML code for your page.

    Code html4strict:
    ...
    <script type="text/javascript" src="js/script.js"></script>
    </body>
    </html>

    Now for the scripting code. We want to loop through each of the links in the gallery, and add an onclick event to each one.

    js/script.js
    Code javascript:
    var gallery = document.getElementById('gallery'),
        links = gallery.getElementsByTagName('a'),
        i;
    for (i = 0; i < links.length; i += 1) {
        links[i].onclick = showPhoto;
    }

    That showPhoto function, it will have the link available as the this keyword, so that you can easily retrieve the large image from the href attribute.

    We can also now return false from the function, to prevent the default action (that of following the clicked on link) from occuring.

    Code javascript:
    function showPhoto() {
        document.getElementById('im').src = this.href;
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You forgot to "return false" at the end of your onclick statement, which cancels out the default action of the href attribute, in other words:
    <img id="im" src="photos/039.jpg">
    <a href="photos/t001.jpg" onclick="document.getElementById('im').src='photos/001.jpg'; return false;"><img src="photos/t001.jpg"></a>

    As pmw57 said, your markup could definitely do with some tweaking, but the short answer to your question is "return false"

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow that works great pmw57!

    I want to also add a previous/next photo link as an alternative to clicking individual thumbs, is that easy to do?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    The script would need to search the links for the image currently being shown, and then proceed to the next/prev link from there, and properly handle situations such as being at the start or end of the thumbnails, but it's possible to achieve.

    The prev/next links would want a unique id on each of them, so that you can attach an onclick event on to each of them.

    Do you want to make a start on it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh it's okay if it's not simple to do. One last thing, is it possible to add an anchor link behaviour so that when you click on one of the thumbs it automatically jumps up to the main photo?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by H Darren View Post
    One last thing, is it possible to add an anchor link behaviour so that when you click on one of the thumbs it automatically jumps up to the main photo?
    That would be:

    Code javascript:
    window.location = '#im';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


Bookmarks

Posting Permissions

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