Simple Image Gallery

Simple Image Gallery

HTML

<div id="gallery">
    <div id="panel">
       
        <div id="description">First image description</div>
    </div>

    <div id="thumbs">
        <div class="thumb-wrap">
        <img src="http://workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" alt="1st image description" />
        <div class="thumb-strip">First</div>
        </div>
        <img src="http://workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="http://workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" alt="3rd image description" />
    </div>
</div>

CSS

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
 border: 1px solid gray;
 padding: 4px;
 background-color: white;
 cursor: pointer;
}
#thumbs img {
}

#description {
 background: black;
 color: white;
 position: absolute;
 bottom: 0;
 padding: 10px 20px;
 width: 525px;
 margin: 5px;
}

.thumb-strip {
 background: black;
 color: white;
 position: absolute;
 bottom: 0;
 padding: 0;
 width: 100%;
 margin: 0;
}
#panel { position: relative; }
.thumb-wrap { position: relative; float: left;  margin: 6px 6px 0 0;}

JavaScript

$('#thumbs').delegate('img','hover', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});