jQuery圖片庫（需要如何使大圖像點擊）

Question

即時通訊使用「創建圖像庫中的4條JQUERY」（鏈接如下），它工作得很好。

但是我喜歡使大圖像可點擊（不只是拇指），以便當我點擊顯示爲大圖像的圖像時，另一個更大版本的圖像將在新窗口中打開。

http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/

任何想法是極大的讚賞。謝謝。

Answer 1

可以在定位元素包裹的大圖片：

<div id="panel"> 
    <a href="images/image_01_largest.jpg" target="_blank"> 
     <img id="largeImage" src="images/image_01_large.jpg" /> 
    </a> 
    <div id="description">First image description</div> 
</div> 

由此得出一個圖像有三種規格的約定：* _thumb.jpg，* _large.jpg，和* _largest.jpg。現在你需要做的就是改變＃largeImage的src時改變錨點的href屬性。

$('#thumbs img').click(function(){ 
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large')); 
    $('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest')); 
    $('#description').html($(this).attr('alt')); 
}); 

Answer 2

嗨，你可以嘗試漂亮的照片插件在燈箱中顯示畫廊。 Demo for Preety Photo。這可以幫助你