Question

即时通讯使用“在4条装置中创建图像画廊”（链接如下），效果很好。

但我喜欢让大图像可以点击（不仅仅是拇指），所以当我点击哪个图像显示为大图像时，图像的另一个更大版本会在新窗口中打开。

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

非常感谢任何想法。谢谢。

Answer 1

您好，您可以尝试使用漂亮的照片插件在灯箱中显示图库。 Demo for Preety Photo。这可能会对您有所帮助

Answer 2

您可以将大图像包装在锚元素中：

<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时更改anchor的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'));
});

jQuery图库（需要如何使大图像可点击）

2 个答案: