这怎么可能JQuery的滑盖preV /下一个按钮可以在一个页面上两个画廊使用吗？ [英] How could this JQuery slider with prev/next buttons be used on two galleries in one page?

问题描述

previous按钮>照片旁边和previous按钮

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.

推荐答案

您需要为显示，接下来， $ p $光伏和 IMG-列表以及造型每个显示在CSS。

You'll need to create unique IDs for display, next, prev, and img-list as well as styling each display in CSS.

DEMO

(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的滑盖preV /下一个按钮可以在一个页面上两个画廊使用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！