SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change href onclick

    Hi, I have a master image of a product which links to a larger pop-up of that image. I also have a list of small thumbnail images of the product from different angles. When the thumbnail images are clicked, I need to load their corresponding images in place of the master image. I can do this fine with the following code:

    Code:
    <a href="" onclick="openPopUp('pop.asp?imageid=1_1')"><img src="img/master/1_1.jpg" id="master-image" /></a>
    
    <ul>
    <li><img src="img/thumb/1_1.jpg" onclick="document.getElementById('master-image').src='img/master/1_1.jpg';" /></li>
    <li><img src="img/thumb/1_2.jpg" onclick="document.getElementById('master-image').src='img/master/1_2.jpg';" /></li>
    <li><img src="img/thumb/1_3.jpg" onclick="document.getElementById('master-image').src='img/master/1_3.jpg';" /></li>
    </ul>
    However, I also need to change the link of the master image so that it links to a larger version of the image it's currently showing - which may actually have been loaded in by clicking one of the thumbnails.

    I hope this makes sense!? Does anybody know if this is possible, and how to do it?

    Thanks for your help folks...

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I would do this:
    HTML Code:
    <a href="#"><img src="img/master/1_1.jpg" id="master-image" /></a>
    
    <ul id="thumbs">
      <li><img src="img/thumb/1_1.jpg" /></li>
      <li><img src="img/thumb/1_2.jpg" /></li>
      <li><img src="img/thumb/1_3.jpg" /></li>
    </ul>
    Then put this in an external Javascript file:
    Code Javascript:
    function imgSwap() {
      var thumbs = document.getElementById('thumbs').getElementsByTagName('img');
      for (var i = 0, j = thumbs.length; i < j; i++) {
        thumbs[i].onclick = swapThis;
      }
    }
    function swapThis() {
      var mi = document.getElementById('master-image');
      mi.src = this.src.replace('thumb', 'master');
      mi.parentNode.href = this.src.replace('thumb', 'superlarge');
    }
    if (window.addEventListener) window.addEventListener('load', imgSwap, false);
    else if (window.attachEvent) window.attachEvent('onload', imgSwap);
    And finally refer to it in your HTML by putting this in the <head>:
    HTML Code:
    <script type="text/javascript" src="imgSwap.js"></script>
    Remember to use the alt attribute in your images if relevant. In this scenario it looks to me like it would be highly relevant.

    Note that the href attribute of the master image link will be changed to something containing "superlarge" - I don't know what you want that link to point to when the thumbs are clicked.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles, that's almost it - and I like the fact it's neat and 'unobtrusive'. However, the link from the master image needs to be a pop-up, not a simple anchor link. Is it possible to incorporate this into the above? If so, how?

    Thanks.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In that case replace this line:
    Code:
    mi.parentNode.href = this.src.replace('thumb', 'superlarge');
    with a window.open call:
    Code:
    mi.parentNode.onclick = function() {
      window.open(this.src.replace('thumb', 'superlarge'), 'Big image', features);
    }
    where features is a list of the features you want the window to have. See the specs for this.

    Note that popups annoy people and might well be blocked.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles,

    I eventually decided on using a Javascript Lightbox to achieve this - which I think will improve the user experience. The one I used is: http://www.huddletogether.com/projects/lightbox2. It seemed to integrate okay into your first solution, albeit there were a few problems with other scripts I had running on the same page. All working satisfactorily now though, so thanks very much for your help.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Good idea, the lightbox is much better than using popups.


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
  •