[英]Jquery gallery next/previous buttons
I made a jquery gallery a half year ago (SO community helped me alot cause I'm not familiar enough with js/jquery) and now I'd like to add next/previous buttons to this gallery. 我在半年前创建了一个jquery画廊(SO社区帮助了我很多,因为我对js / jquery不够熟悉),现在我想向该画廊添加下一个/上一个按钮。 I tried combine it with other galleries but nothing worked properly.
我尝试将其与其他画廊结合使用,但没有正常工作。
here is js: 这是js:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
$('#actimg').fadeOut(170);
setTimeout(function() {
document.getElementById('actimg').src = whichpic.href;
$('#actimg').fadeIn(170);
}, 170);
return false;
} else {
return true;
}
}
</script>
and html: 和html:
<img id="actimg" src="" width="600" height="400" alt="main" />
<a onclick="return showPic(this)" href="example_1.jpg">
<img height="39px" width="58px" src="example_1.jpg" alt="thumbnail" />
</a>
<a onclick="return showPic(this)" href="example_2.jpg">
<img height="39px" width="58px" src="example_2.jpg" alt="thumbnail" />
</a>
<a onclick="return showPic(this)" href="example_3.jpg">
<img height="39px" width="58px" src="example_3.jpg" alt="thumbnail" />
</a>
gallery looks like http://www.rafsimons.com/collections/aw-11/ but it's not flash and there are no next/prev buttons which I want to make now. 画廊看起来像http://www.rafsimons.com/collections/aw-11/,但是它没有闪烁,并且现在没有我要制作的下一步/上一步按钮。 Thanks in advance for help.
在此先感谢您的帮助。
First add a class attribute to all your thumbs ( <a>
tags) so they can be easily referred to from jQuery: 首先将一个class属性添加到您的所有拇指(
<a>
标签),以便可以从jQuery轻松引用它们:
<a class="gallery_item" onclick="return showPic(this)" href="example_1.jpg">
<img height="39px" width="58px" src="example_1.jpg" alt="thumbnail" />
</a>
...
We need a way to know which one is the current image. 我们需要一种方法来知道哪个是当前图像。 We can store that information in a custom attribute in your
<a>
tag itself. 我们可以将该信息存储在您的
<a>
标记本身的自定义属性中。 For this modify your showPic function like: 为此,请修改showPic函数,例如:
function showPic (whichpic) {
if (document.getElementById) {
$('.gallery_item').removeAttr('current'); // <- remove 'current' attribute from all thumbs
$('#actimg').fadeOut(170);
setTimeout(function() {
document.getElementById('actimg').src = whichpic.href;
$('#actimg').fadeIn(170);
$(whichpic).attr('current', '1'); // <- set this one as current
}, 170);
return false;
} else {
return true;
}
}
Now add 2 links for next/prev buttons and place them where appropriate. 现在为下一个/上一个按钮添加2个链接,并将它们放置在适当的位置。 Give their ids as 'next' and 'prev'
将其ID分别设为“下一个”和“上一个”
<a href="#" id="prev" onclick="return nextPic()">Prev</a>
<a href="#" id="next" onclick="return prevPic()">Next</a>
Now add 2 js functions nextPic() and prevPic() like: 现在添加2个js函数nextPic()和prevPic(),例如:
function nextPic() {
var current = null;
$('.gallery_item').each(function() {
if($(this).attr('current')=='1') {
current = $(this);
return false;
}
});
if(current!=null) {
if(current.parent().next().length!=0) {
showPic(current.parent().next().find('.gallery_item')[0]); // <- show next pic
}
else {
showPic($('.gallery_item:first')[0]); // if no next pic, show first pic
}
}
return false;
}
function prevPic() {
var current = null;
$('.gallery_item').each(function() {
if($(this).attr('current')=='1') {
current = $(this);
return false;
}
});
if(current!=null) {
if(current.parent().prev().length!=0) {
showPic(current.parent().prev().find('.gallery_item')[0]); // <- show next pic
}
else {
showPic($('.gallery_item:last')[0]); // if no next pic, show first pic
}
}
return false;
}
Add this too, to initialize the first image as current by default. 还要添加它,以默认将第一张图像初始化为当前图像。
$().ready(function() {
$('.gallery_item:first').attr('current', '1');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.