Posted By

myowin76 on 05/06/10

Tagged

Versions (?)

Last Edited at 05/06/10 01:08am

Statistics

Viewed 753 times

Favorited by 2 user(s)

Related snippets

jQuery Image Swap

/ Published in: jQuery

swaping main image by clicking thumbs

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

#Header
<script type="text/javascript" src="../_scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../_scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
    $(function(evt) {
        $("a:has(img.gallery)").click(function() {
            var largePath = $(this).attr("href");
            var caption = $(this).attr("title");
 
            $("#photo_large").attr({ src: largePath });
            $("#caption1").text(caption);
            return false;
        });
    });
</script>
 
# body
<div id="identifier">
<img alt="Live the lifestyle" height="90" src="../_images/lifestyle_banner.jpg" width="770" /></div>
 
<div id="sidebar">
 
<a href="../_images/ventura_01.jpg" title="Getting ready to hit the surf"><img id="thumb_01" alt="ventura set" class="gallery" height="160" name="thumb_01" src="../_images/ventura_01_thumb.jpg" width="200" /></a>
 
<a href="../_images/ventura_02.jpg" title="Clearly marked!"><img id="thumb_02" alt="ventura set" class="gallery" height="160" name="thumb_02" src="../_images/ventura_02_thumb.jpg" width="200" /></a>
 
<a href="../_images/ventura_03.jpg" title="Check out the windsurfers in the back!"><img id="thumb_03" alt="ventura set" class="gallery" height="160" name="thumb_03" src="../_images/ventura_03_thumb.jpg" width="200" /></a>
 
<a href="../_images/ventura_04.jpg" title="Winding down"><img id="thumb_04" alt="ventura set" class="gallery" height="160" name="thumb_04" src="../_images/ventura_04_thumb.jpg" width="200" /></a>
 
</div>