点击jQuery图片缩略图更改

我附上了一个可用的jsFiddle。是的，它可以工作，但是我试图达到的似乎超出了我的经验。点击jQuery图片缩略图更改

目前它显示一排缩略图，当你点击其中一个缩略图时，它将显示与特色图像相同的图像。

我需要做的是能够将缩略图显示为与显示为特色图像的图像不同的图像。

例如，我有一个产品特色图片，该图片也将放大此图片的裁剪版本作为缩略图。

缩图1（放大裁剪版本）/特色图片1

缩图2（放大裁剪版本）/特色图片2

缩图3（放大裁剪版本）/特色图片3

<img id="image" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" border="0" /> 

<img src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' /> 
<img src="http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg" class="thumb" width='100px' /> 
<img src="http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg" class="thumb" width='100px' /> 

$(document).ready(function() { 
$(".thumb").click(function() { 
    var dir = $(this).attr("src"); 
    $('#image').hide(); 
    $('#image').fadeIn('fast'); 
    $('#image').attr("src", dir); 
}); 
});

这是否有道理？

任何帮助将不胜感激。

干杯

来源

2015-10-15 tebrown

你需要的是当您单击缩略图出现随机图像，而不是点击缩略图？ – Bak

@Bak不是随机图像，而是缩略图的相关图像。 – tebrown

[尝试在点击时更改图片并再次返回]可能的重复（http://stackoverflow.com/questions/24811672/trying-to-change-an-image-on-click-and-back-again） –

数据标记添加到包含要显示上点击即可，而不是得到IMG的src图像的URL您的缩略图获取数据的属性值。

看到：https://jsfiddle.net/gq74rgc3/3/

<img data-big="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUM5JaTT3WP59hqqcL5pYEgcfyB4qUvzLFv4k5pzLqBeRsJaOi" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' />

和JavaScript：

$(document).ready(function() { 
    $(".thumb").click(function() { 
     var dir = $(this).data("big"); 
     $('#image').hide(); 
     $('#image').fadeIn('fast'); 
     $('#image').attr("src", dir); 
    }); 
});

来源

2015-10-15 21:56:26

谢谢堆格雷格，完美的作品！ – tebrown

要添加到此 - 我们能够在缩略图周围集成边框，点击时第一个缩略图处于活动状态？ @Gregg邓肯 – tebrown

很容易通过在你的css中创建一个类.thumb.active {border：1px solid red;}。然后添加该页面加载时将激活的img标签。然后从所有.thumbs中删除活动类并将其添加回单击的一个。 https://jsfiddle.net/gq74rgc3/4/ –

像这样的事情？

$(document).ready(function() { 
    var images_array = ["http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg","http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg","http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg","http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg"]; 
    $(".thumb").click(function() { 
     var dir = $(this).attr("src"); 
     $('#image').hide(); 
     $('#image').fadeIn('fast'); 
     $('#image').attr("src", images_array[Math.floor((Math.random()*4))]); 
    }); 
});

http://jsfiddle.net/xL3p0drv/1/

它从阵列中的随机指标和显示图像

来源

2015-10-15 21:59:51 Bak

点击jQuery图片缩略图更改

回答

相关问题