jQuery图片库(需要如何使大图可点击)

Question

我使用的是“在JQUERY的4行中创建图片库”(链接如下)，它工作得很好。

但我喜欢让大图可点击(不仅仅是拇指)，这样当我点击显示为大图的图像时，另一个大图就会在新窗口中打开。

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.This可能会帮助您