simple jquery image gallery

http://stackoverflow.com/q/6008237/154877

by Ali Khaled

HTML

<div id="gallery">
    <img id="largeImage" src="https://tovaken.com/ebay/images/RING-1.png" />
</div>

<div id="thumbs">
    <img src="https://tovaken.com/ebay/images/RING-1.png" style="max-width:100px;"/>
    <img src="https://tovaken.com/ebay/images/$_14.JPG"  style="max-width:100px;"/>
    <img src="https://tovaken.com/ebay/images/$_16.JPG"  style="max-width:100px;"/>
    <img src="https://tovaken.com/ebay/images/$_17.JPG"  style="max-width:100px;"/>
    <img src="https://tovaken.com/ebay/images/$_18.JPG"  style="max-width:100px;" />
   
</div>





<div class="gallary_image">
<div class="gallery-image" id="thumbs">

<a href="" target="_blank">

</a><br /></div>
 <div class="small_image">
 <ul class="gallery-thumbnail">

CSS

#gallery     {margin:0 auto; position:relative; width:601px}
#gallery img {margin:0 auto; display:block}

#thumbs      {overflow:hidden; width:524px; margin:30px auto 0}
#thumbs img  {float:left; margin:1px; cursor:pointer}

JavaScript

$('#thumbs').delegate('img', 'click', function() {
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    window.location.hash = 'img' + (parseInt($('#thumbs img').index(this))+1).toString();
});

wlh = window.location.hash.replace('#img', '');
if (!isNaN(parseInt(wlh))) {
    $('#largeImage').attr('src', $('#thumbs img').eq(wlh-1).attr('src').replace('thumb', 'large'));
}