这个带有上一个/下一个按钮的 JQuery 滑块如何在一个页面中的两个画廊上使用? [英] How could this JQuery slider with prev/next buttons be used on two galleries in one page?
问题描述
基于 adaneo 的带有 prev/next 按钮的出色图像滑块,在此答案中:图片库下一个和上一个按钮
Based on this great image slider with prev/next buttons by adaneo, in this answer here: image gallery next and previous button
他的 JSFiddle 在这里,它完成了我需要它做的事情,除了我需要它在一个页面中的两个单独的画廊上工作:http://jsfiddle.net/adeneo/5VEeH/3/
His JSFiddle is here, and it does what I need it to do, except that I need it to work on two separate galleries in the one page: http://jsfiddle.net/adeneo/5VEeH/3/
这是我的分叉 JSFiddle,除了复制标记外,我没有做太多工作:http://jsfiddle.net/cbp9T/1/
Here is my forked JSFiddle, which I haven't done much to except duplicate the mark-up: http://jsfiddle.net/cbp9T/1/
我怎样才能重写它,以便我可以在一页中使用它两次?我会将整个事情变成它自己的函数,最后杀死变量值,然后将它复制到一个新函数中,并为第二个画廊提供新的选择器吗?还是?
How could I re-write that so that I could use it twice in one page? Would I make the whole thing it's own function, killing the variable values at the end, and then duplicate it into a new function with new selectors for the 2nd gallery? Or?
非常感激地收到了回答此类问题的 JSFiddles 的建议/链接,谢谢.
Suggestions/links to JSFiddles that answer a problem like this extremely gratefully received, thanks.
推荐答案
您需要为 display
、next
、prev
和 img-list
以及 CSS 中每个 display
的样式.
You'll need to create unique IDs for display
, next
, prev
, and img-list
as well as styling each display
in CSS.
(function($) {
$.fn.extend({
gallerify: function(o) {
return this.each(function() {
var $this = "#" + this.id;
var E = $("a", o.imgList), N = 0, T = E.length-1;
$($this).html('<img src="'+$(E[N]).attr('href')+'" />');
var btns = o.next.concat(",",o.prev);
$(btns).on('click', function() {
var A = this.id == (o.next).substr(1,o.next.length),X=A?T:0,Y=A?0:T,Z=A?N+1:N-1;N=N==X?Y:Z;
$($this).html('<img src="'+$(E[N]).attr('href')+'" />');
});
E.on('click', function(e) {
var S = $(this).attr('href');
$($this).html('<img src="'+S+'" />');
e.preventDefault();
});
});
}
});
})(jQuery);
$("#display").gallerify({imgList:'#img-list',next:'#next',prev:'#prev'});
$("#display2").gallerify({imgList:'#img-list2',next:'#next2',prev:'#prev2'});
这篇关于这个带有上一个/下一个按钮的 JQuery 滑块如何在一个页面中的两个画廊上使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!