我想要创建的是一个图像,根据在该图像下方点击的缩略图而变化。我已经在网上找了很多看起来很棒的缩略图库观众,但效果很好,但我需要的只是“简单”。
我根据我在网上找到的符合我目的的元素拼凑了一些脚本,
HTML:
<img id="image" src="/largeImage1.jpg"><br>
<a id="link1" href="/largeImage1.jpg">picture 1</a><br>
<a id="link2" href="/largeImage2.jpg">picture 2</a><br>
<a id="link3" href="/largeImage3">picture 3</a>
Jquery的:
$("#link1").click(function() {
$("#image").fadeOut(50, function() {
$("#image").attr("src",$("#link1").attr("href"));
}).fadeIn(500);
return false;
});
$("#link2").click(function() {
$("#image").fadeOut(50, function() {
$("#image").attr("src",$("#link2").attr("href"));
}).fadeIn(500);
return false;
});
$("#link3").click(function() {
$("#image").fadeOut(50, function() {
$("#image").attr("src",$("#link3").attr("href"));
}).fadeIn(500);
return false;
});
好吧,这是我所拥有的(文本链接需要更改为缩略图,并且需要投入一些css - 我很熟悉)。我被困在jquery(不是一个最喜欢的主题) - 有没有一种方法,我确信有,将重复的jquery压缩。最终,我将在12个缩略图区域中的某个地方,虽然我很乐意输入相同的6行jquery 12次(每次只调整缩略图链接),如果有一个更整洁(和更短)的方式实现这一点我会更快乐。
非常感谢Wayne
答案 0 :(得分:1)
为您的链接提供一个类,以便更轻松地选择它们。将click事件添加到该类的所有元素。使用this
获取被点击的元素,然后从中找到它的来源:
$('.thumb-link').click(function(e) {
e.preventDefault();
var src = $(this).attr('src');
$("#image").fadeOut(50, function() {
$("#image").attr("src", src);
}).fadeIn(500);
});
答案 1 :(得分:0)
假设您在页面上没有任何其他锚标记
$('a').click(function(){
$("#image").attr("src",$(this).attr("href"));
})