Gallery 下一个/上一个特定于 div 内容

Question

我对 JQUERY 完全是个菜鸟，学东西很慢。但我已经下载了现有的 jquery全屏画廊，虽然它对于单个 div 效果很好，但如果我想要有多个具有不同拇指的 div，画廊就会中断（下一个/上一个跟踪所有 div 中称为“内容”的所有项目）。

这是 jquery 代码：

// SLIDE PANEL GALLERY

 $(function() {
            /* this is the index of the last clicked picture */
            var current = -1;
            /* number of pictures */
            var totalpictures = $('.content img').size();
            /* speed to animate the panel and the thumbs wrapper */
            var speed   = 500;

            /* show the content */
            $('.content').show();

            /*
            when the user resizes the browser window,
            the size of the picture being viewed is recalculated;
             */
            $(window).bind('resize', function() {
                var $picture = $('#wrapper').find('img');
                resize($picture);
            });

            /*
            when hovering a thumb, animate it's opacity
            for a cool effect;
            when clicking on it, we load the corresponding large image;
            the source of the large image is stored as 
            the "alt" attribute of the thumb image
             */


            $('.content > img').hover(function () {
                var $this   = $(this);
                $this.stop().animate({'opacity':'1.0'},200);
            },function () {
                var $this   = $(this);
                $this.stop().animate({'opacity':'0.4'},200);
            }).bind('click',function(){
                var $this   = $(this);

                /* shows the loading icon */
                $('#loading').show();

                $('<img/>').load(function(){
                    $('#loading').hide();

                    if($('#wrapper').find('img').length) return;
                    current     = $this.index();
                    var $theImage   = $(this);
                    /*
                    After it's loaded we hide the loading icon
                    and resize the image, given the window size;
                    then we append the image to the wrapper
                    */

                    resize($theImage);

                    $('#wrapper').append($theImage);
                    /* make its opacity animate */
                    $theImage.fadeIn(800);

                    /* and finally slide up the panel */
                    $('#panel').animate({'height':'100%'},speed,function(){
                        /*
                        if the picture has a description,
                        it's stored in the title attribute of the thumb;
                        show it if it's not empty
                         */
                        var title = $this.attr('title');

                        if(title != '') 
                            $('#description').html(title).show();
                        else 
                            $('#description').empty().hide();


                        /*
                        if our picture is the first one,
                        don't show the "previous button"
                        for the slideshow navigation;
                        if our picture is the last one,
                        don't show the "next button"
                        for the slideshow navigation
                         */
                        if(current==0)
                            $('#prev').hide();
                        else
                            $('#prev').fadeIn();
                        if(current==parseInt(totalpictures-1))
                            $('#next').hide();
                        else
                            $('#next').fadeIn();
                        /*
                        we set the z-index and height of the thumbs wrapper 
                        to 0, because we want to slide it up afterwards,
                        when the user clicks the large image
                         */
                        $('#thumbsWrapper').css({'z-index':'0','height':'0px'});
                    });
                }).attr('src', $this.attr('alt'));
            });

            /*
            when hovering a large image,
            we want to slide up the thumbs wrapper again,
            and reset the panel (like it was initially);
            this includes removing the large image element
             */
            $('#wrapper > img').live('click',function(){
                $this = $(this);
                $('#description').empty().hide();

                $('#thumbsWrapper').css('z-index','10')
                .stop()
                .animate({'height':'100%'},speed,function(){
                    var $theWrapper = $(this);
                    $('#panel').css('height','0px');
                    $theWrapper.css('z-index','0');
                    /* 
                    remove the large image element
                    and the navigation buttons
                     */
                    $this.remove();
                    $('#prev').hide();
                    $('#next').hide();
                });
            });

            /*
            when we are viewing a large image,
            if we navigate to the right/left we need to know
            which image is the corresponding neighbour.
            we know the index of the current picture (current),
            so we can easily get to the neighbour:
             */
            $('#next').bind('click',function(){
                var $this           = $(this);
                var $nextimage      = $('.content img:nth-child('+parseInt(current+2)+')');
                navigate($nextimage,'right');
            });
            $('#prev').bind('click',function(){
                var $this           = $(this);
                var $previmage      = $('.content img:nth-child('+parseInt(current)+')');
                navigate($previmage,'left');
            });

            /*
            given the next or previous image to show,
            and the direction, it loads a new image in the panel.
             */
            function navigate($nextimage,dir){
                /*
                if we are at the end/beginning
                then there's no next/previous
                 */
                if(dir=='left' && current==0)
                    return;
                if(dir=='right' && current==parseInt(totalpictures-1))
                    return;
                $('#loading').show();
                $('<img/>').load(function(){
                    var $theImage = $(this);
                    $('#loading').hide();
                    $('#description').empty().fadeOut();

                    $('#wrapper img').stop().fadeOut(500,function(){
                        var $this = $(this);

                        $this.remove();
                        resize($theImage);

                        $('#wrapper').append($theImage.show());
                        $theImage.stop().fadeIn(800);

                        var title = $nextimage.attr('title');
                        if(title != ''){
                            $('#description').html(title).show();
                        }
                        else
                            $('#description').empty().hide();

                        if(current==0)
                            $('#prev').hide();
                        else
                            $('#prev').show();
                        if(current==parseInt(totalpictures-1))
                            $('#next').hide();
                        else
                            $('#next').show();
                    });
                    /*
                    increase or decrease the current variable
                     */
                    if(dir=='right')
                        ++current;
                    else if(dir=='left')
                        --current;
                }).attr('src', $nextimage.attr('alt'));
            }

            /*
            resizes an image given the window size,
            considering the margin values
             */
            function resize($image){
                var windowH      = $(window).height()-150;
                var windowW      = $(window).width()-80;
                var theImage     = new Image();
                theImage.src     = $image.attr("src");
                var imgwidth     = theImage.width;
                var imgheight    = theImage.height;

                if((imgwidth > windowW)||(imgheight > windowH)){
                    if(imgwidth > imgheight){
                        var newwidth = windowW;
                        var ratio = imgwidth / windowW;
                        var newheight = imgheight / ratio;
                        theImage.height = newheight;
                        theImage.width= newwidth;
                        if(newheight>windowH){
                            var newnewheight = windowH;
                            var newratio = newheight/windowH;
                            var newnewwidth =newwidth/newratio;
                            theImage.width = newnewwidth;
                            theImage.height= newnewheight;
                        }
                    }
                    else{
                        var newheight = windowH;
                        var ratio = imgheight / windowH;
                        var newwidth = imgwidth / ratio;
                        theImage.height = newheight;
                        theImage.width= newwidth;
                        if(newwidth>windowW){
                            var newnewwidth = windowW;
                            var newratio = newwidth/windowW;
                            var newnewheight =newheight/newratio;
                            theImage.height = newnewheight;
                            theImage.width= newnewwidth;
                        }
                    }
                }
                $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
            }
        });

如何修改代码以允许我拥有多个内容 div，并且下一个/上一个仅对应于该内容 div（父 div？），而不对应于页面上的其他内容？

如果有人可以提供帮助，我们将不胜感激。很高兴提供 css/html。

Answer 1

编辑：我希望这个能起作用！ http://jsbin.com/uwafi6/5

我已经为您完成了，在这里：http://jsbin.com/uwafi6/4

将第一行更改为：

jQuery.fn.createGallery = function() {

您必须将 #next 和 #prev 的所有实例更改为类、.next 和 .prev

您还需要在某处添加 var gallery = this;靠近开头，这样你就可以

在任何有 $('# next') 或 $('#prev')

您需要使用相同的方法将任何其他 id 更改为类。

然后，您可以使用 $('#myFirstGallery').createGallery(); 创建图库的实例。

您可以在这里找到更多信息：http://docs.jquery。 com/Tutorials:Getting_Started_with_jQuery#Plug_me:_Writing_your_own_plugins