Simple jQuery Photo Gallery

by highwayoflife

HTML

<div id="container">
<div id="thumbnails">
<a href="http://farm3.static.flickr.com/2660/3824021039_fc07ae6b14_z.jpg" title="Bald Eagle by Highway of Life, on Flickr"><img src="http://farm3.static.flickr.com/2660/3824021039_fc07ae6b14_t.jpg" width="100" height="74" alt="Bald Eagle"></a>
<a href="http://farm3.static.flickr.com/2605/3824649438_4339a92d02_z.jpg" title="Iris by Highway of Life, on Flickr"><img src="http://farm3.static.flickr.com/2605/3824649438_4339a92d02_t.jpg" width="100" height="69" alt="Iris"></a>
<a href="http://farm3.static.flickr.com/2602/3823512057_5dd37d36c4_z.jpg" title="Montega by Highway of Life, on Flickr"><img src="http://farm3.static.flickr.com/2602/3823512057_5dd37d36c4_t.jpg" width="100" height="67" alt="Montega"></a>
<a href="http://farm4.static.flickr.com/3292/2699889636_6e549fc32e_z.jpg" title="Hampton Bridge by Highway of Life, on Flickr"><img src="http://farm4.static.flickr.com/3292/2699889636_6e549fc32e_t.jpg" width="100" height="67" alt="Hampton Bridge"></a>
<a href="http://farm4.static.flickr.com/3290/2737288919_83151a6901_z.jpg" title="Flamingo by Highway of Life, on Flickr"><img src="http://farm4.static.flickr.com/3290/2737288919_83151a6901_t.jpg" width="100" height="75" alt="Flamingo"></a>
<a href="http://farm4.static.flickr.com/3050/2738151482_1296c4be1b_z.jpg" title="Butterfly by Highway of Life, on Flickr"><img src="http://farm4.static.flickr.com/3050/2738151482_1296c4be1b_t.jpg" width="100" height="75" alt="Butterfly"></a>
<a href="http://farm4.static.flickr.com/3174/2759310936_c1f1bd7015_z.jpg" title="Hampton Palace Gardens by Highway of Life, on Flickr"><img src="http://farm4.static.flickr.com/3174/2759310936_c1f1bd7015_t.jpg" width="100" height="67" alt="Hampton Palace Gardens"></a>
</div>
<div id="portrait"></div>
</div>

CSS

#container {
    width: 100%;
    text-align: center;
}

#portrait {
    margin: 5px;
}

#portrait img {
    border: 8px solid #000;
    background-color: #e1d4c4;
    padding: 1px;
    margin-left: auto;
    margin-right: auto;
}

#portrait span {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

JavaScript

$(document).ready(function() {
    $('#thumbnails a').hover(function() {
        var $anchor = $(this);
        var img = $anchor.attr('href');
        var alt = $anchor.attr('title');
        var title = $anchor.find('img').attr('alt');

        $('#portrait').html('<img src="' + img + '" alt="' + alt + '" /><span>' + title + '</span>');
    });
});