当前位置： 文江博客话题详情

什么是最好的 jQuery“单击缩略图并更改主图像”？ 模块？

发布于 2024-07-14 17:23:06 字数 318 浏览 4 评论 0原文

这是我所拥有的（全部动态生成，如果这有什么不同的话）：

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

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

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

想法？ 链接？

谢谢！

原文

Here's what I have (all generated dynamically, if that makes a difference) :

  • A list of images
  • A caption for each image
  • A thumbnail for each image

The page should load with one full-size image and all the thumbnails. When a user clicks a thumbnail, the full-size image shows that new image with its caption. If they click another thumbnail, the picture (and caption) change again.

It's not very complex. I hacked together a solution a few months ago, but I need to do it again and I'm looking at this crappy code and thinking that there has to be a better way (and knowing jQuery, someone else has already done it, and done it well).

Thoughts? Links?

Thanks!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

月隐月明月朦胧 2024-07-21 17:23:06

这里的大多数答案就像用大炮打苍蝇一样！！

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

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

看这里：gallery-in-4-lines

Most of the answers here are like shooting a fly with a canon !!

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

this is all you need .. 4 lines of code .

look here : gallery-in-4-lines

回复 原文
请持续率性 2024-07-21 17:23:06

这是一个看起来很漂亮的，用 jQuery 编写的： 照片滑块

这是另一个我喜欢的好一点：
画廊

Here's one that looks pretty nice and is written in jQuery: Photo Slider

And here is another which I like a bit better:
Galleria

回复 原文
花伊自在美 2024-07-21 17:23:06

基于 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>

Building off of krembo99's answer he linked here, I wanted to share my solution as I had already uploaded hundreds of photos when my client had requested a feature like this. With that in mind, by adding a few extra lines to the provided code, I was able to get a solution that fit my parameters.

I was also working with smaller images as well, so I had no need to go through creating small & large versions of the same file.

$('.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'));

});

Here's how my HTML looks.

    <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>
回复 原文
⊕婉儿 2024-07-21 17:23:06

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

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

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

A page with 9 different photo slideshows in jQuery ready to use

回复 原文
阪姬 2024-07-21 17:23:06

查看我的画廊实施：埃塞克斯画廊的花园设计景观设计师

Check out my galleria implementation: Garden design Landscaper in Essex Gallery

回复 原文
水晶透心 2024-07-21 17:23:06

很多这些脚本都已经过时了，对我来说不起作用，而且需要一组不同的缩略图图像。 我认真地寻找了一下，发现了一些非常轻的东西，它是纯 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/

A lot of these scripts are out of date and don't work for me plus require a set of different images for thumbnails. I had a serious hunt around and found something very light which is plain js, no need for 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/

回复 原文
静赏你的温柔 2024-07-21 17:23:06

尝试 Galleriffic，它拥有您需要的一切。

Try Galleriffic, it has everything you need.

回复 原文
静谧 2024-07-21 17:23:06

我对替换方法有疑问。 这无疑是动态执行此操作的最简单方法。

$('img.thumb').click(function () {
  let clickSrc = $(this).attr('src')

  $('img.large').removeAttr('src')
  $('img.large').attr('src', clickSrc)
})
.image-container {
    display: flex;
    flex-direction: row;
}
.thumbnails {
    display: flex;
    flex-direction: column;
}
img.thumb {
    display: flex;
    max-width: 60px;
    height: auto;
}
img.large {
    display: flex;
    max-width: 400px;
    height: auto;
    margin-left: 20px;
}
<div class="image-container">
  <div class="thumbnails">
      <image class="thumb" src="assets/1.jpg"></image>
        <image class="thumb" src="assets/2.png"></image>
        <image class="thumb" src="assets/3.jpg"></image>
        <image class="thumb" src="assets/4.jpg"></image>
        <image class="thumb" src="assets/5.jpg"></image>
        <image class="thumb" src="assets/6.jpg"></image>
        <image class="thumb" src="assets/7.jpg"></image>
    </div>

    <div class="image-div">
        <image class="large" src="assets/1.jpg"></image>
    </div>
</div>

I had issues with the replace method. This is hands down the easiest way to do this dynamically.

$('img.thumb').click(function () {
  let clickSrc = $(this).attr('src')

  $('img.large').removeAttr('src')
  $('img.large').attr('src', clickSrc)
})
.image-container {
    display: flex;
    flex-direction: row;
}
.thumbnails {
    display: flex;
    flex-direction: column;
}
img.thumb {
    display: flex;
    max-width: 60px;
    height: auto;
}
img.large {
    display: flex;
    max-width: 400px;
    height: auto;
    margin-left: 20px;
}
<div class="image-container">
  <div class="thumbnails">
      <image class="thumb" src="assets/1.jpg"></image>
        <image class="thumb" src="assets/2.png"></image>
        <image class="thumb" src="assets/3.jpg"></image>
        <image class="thumb" src="assets/4.jpg"></image>
        <image class="thumb" src="assets/5.jpg"></image>
        <image class="thumb" src="assets/6.jpg"></image>
        <image class="thumb" src="assets/7.jpg"></image>
    </div>

    <div class="image-div">
        <image class="large" src="assets/1.jpg"></image>
    </div>
</div>

回复 原文
~没有更多了~

关于作者

傾旎

暂无简介

0 文章
0 评论
20 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文