treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Need some help finding out how to do this

  • hi there everyone, i'm new here and i apologize for not posting in the right place.

    a client is setting up a new website and i was asked if this could be done for his site.

    in http://www.nastygal.com/accessories-bags/ the thumbnails display different images when you point it with the mouse.

    is there an easy way to accomplish this effect?

    thanks in advance and sorry for my bad english.

  • hi

    thumbnail s nt showing d different images..d various sides of same images(backside,close-ups,ec..)

    r8

  • @yoyo, please use real words and complete sentences.

    @kerbs I assume you're talking about the mouseovers on the individual product pages (this one, for example)?

    It's not difficult. If you're using a javascript library, you can usually write you own in only a few lines. For example (using jQuery):

      <div id="thumbnails">
          <img src="thumb_1.png" alt="thumbnail image for full_1.png" data-img="full_1.png">
          <img src="thumb_2.png" alt="thumbnail image for full_2.png" data-img="full_2.png">
          <img src="thumb_3.png" alt="thumbnail image for full_3.png" data-img="full_3.png">
      </div>
      <img id="full-img" src="full_1.png" alt="full-sized image">
    
      <script>
      /* this function fires whenever the user mouses over a thumbnail */
      $("#thumbnails img").mouseover(function(){
    
          /* get the src of the thumbnail's full-size image */
        var imgsrc = $(this).attr("data-img");
    
        /* get the preview image */
        var big = $("#full-img");
    
        /* check which image the big image is currently showing -
           if it's different than the thumbnail, we'll show the new image */
        if(imgsrc != big.attr('src')){
            /* hide the big image, change its src, fade it back in. */
          big.hide().attr( {'src':imgsrc} ).fadeIn( 'slow' );
        }
      });
      </script>
    
  • i'll try that and let you know.

    thanks!!