发表新帖
发表新帖

What's the best jQuery “click a thumbnail and change the main image” module?

后端 未结
关注
8 494
别那么骄傲
别那么骄傲 2021-02-02 02:32

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 imag
相关标签:
8条回答
  • 灰色年华
    2021-02-02 03:03

    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

    0 讨论(0)
  • 心在旅途
    2021-02-02 03:03

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

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

    0 讨论(0)
  • 逝去的感伤
    2021-02-02 03:05

    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

    0 讨论(0)
  • 轻奢々
    2021-02-02 03:08

    Try Galleriffic, it has everything you need.

    0 讨论(0)
  • 抹茶落季
    2021-02-02 03:10

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

    0 讨论(0)
  • 孤城傲影
    2021-02-02 03:10

    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/

    0 讨论(0)
 看不清?
提交回复
热议问题