9

这是我所拥有的（所有动态生成的，如果有区别的话）：

  • 图像列表
  • 每个图像的标题
  • 每个图像的缩略图

该页面应加载一张全尺寸图像和所有缩略图。当用户单击缩略图时，全尺寸图像会显示带有标题的新图像。如果他们单击另一个缩略图，图片（和标题）会再次更改。

这不是很复杂。几个月前我拼凑了一个解决方案，但我需要再做一次，我正在查看这个糟糕的代码并认为必须有更好的方法（并且知道 jQuery，其他人已经做到了，并且完成了好吧）。

想法？链接？

谢谢！

4

8 回答 8

48

这里的大多数答案就像用佳能射击苍蝇！

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

这就是你所需要的.. 4 行代码。

看这里：4行画廊

于 2011-11-02T05:56:39.940 回答
3

你试过灯箱吗？http://leandrovieira.com/projects/jquery/lightbox/

于 2009-03-28T15:24:40.313 回答
2

这是一个看起来很漂亮并且是用 jQuery 编写的：Photo Slider

这是另一个我更喜欢的： Galleria

于 2009-03-04T21:45:10.227 回答
2

基于他在此处链接的 krembo99 的答案，我想分享我的解决方案，因为当我的客户要求这样的功能时，我已经上传了数百张照片。考虑到这一点，通过在提供的代码中添加几行额外的代码，我能够获得适合我的参数的解决方案。

我也在处理较小的图像，所以我不需要创建同一个文件的大小版本。

$('.thumbnails img').click(function(){

 // Grab img.thumb class src attribute
 // NOTE: ALL img tags must have use this class, 
 // otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 // Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  // Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

这是我的 HTML 的外观。

    <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>
于 2016-10-19T16:11:18.640 回答
1

http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

jQuery 中包含 9 个不同照片幻灯片的页面可供使用

于 2009-03-04T21:46:49.910 回答
1

查看我的 Galleria 实施：Essex Gallery 中的 Garden design Landscaper

于 2010-03-04T12:44:12.830 回答
0

试试Galleriffic，它有你需要的一切。

于 2010-11-12T19:41:54.977 回答
0

很多这些脚本已经过时，对我不起作用，而且需要一组不同的图像作为缩略图。我进行了认真的搜寻，发现了一些非常轻巧的东西，它是纯 js，不需要 jquery。

<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>

</head>
<body>

<div id='product-image-wrap'>

<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>

<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>

</div>

<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>

</body>
</html>

https://jsfiddle.net/uo6js5v7/

于 2018-11-30T06:18:02.897 回答