Gallery/Thumbnail Demo

by ritcheyer

HTML

<div class="mainImg">
    <img src="http://cutepics.info/wp-content/uploads/2010/12/cute-white-kittens-playing-img116.jpg" />
</div>
<ul class="thumbs">
    <li><img src="http://cdn.uproxx.com/wp-content/uploads/2010/07/Kitten2.jpg" rel="kitten thumb 1" /></li>
    <li><img src="http://petcaravan.com/images/kittens.jpg" rel="kitten thumb 2" /></li>
    <li><img src="http://cdn.uproxx.com/wp-content/uploads/2010/07/Kitten2.jpg" rel="kitten thumb 3" /></li>
    <li><img src="http://petcaravan.com/images/kittens.jpg" rel="kitten thumb 4" /></li>
    <li><img src="http://cdn.uproxx.com/wp-content/uploads/2010/07/Kitten2.jpg" rel="kitten thumb 5" /></li>
    <li><img src="http://petcaravan.com/images/kittens.jpg" rel="kitten thumb 6" /></li>
    <li><img src="http://cdn.uproxx.com/wp-content/uploads/2010/07/Kitten2.jpg" rel="kitten thumb 7" /></li>
    <li><img src="http://petcaravan.com/images/kittens.jpg" rel="kitten thumb 8" /></li>
</ul>

CSS

ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    float: left;
    border: 1px solid #333;
    width: 10%;
    overflow: hidden;
}
li img {
    width: 50%;
}

JavaScript

$(document).ready(function(){
                
    // -- set the initial fade of the items
    $('li').fadeTo(0, 0.33);

    // -- on mouse over, unfade, on mouse out, refade
    $('li').hover(
        function () {
            $(this).fadeTo('fast', 1);
            $(this).click(function(){
                            
                // set my variable to the child which is an image (there 
                // should only ever be 1, so we don't need to check (methinks)).
                var test = $(this).children('img').attr('rel');

                alert(test);
            });
        }, 
        function () {
            $(this).fadeTo('fast', 0.33);
        }
    );
});