-1

我有两个 jQuery 脚本。第一个是轮播插件，第二个是灯箱插件。这是预览http://www.zlatko.ch/test/

问题 - 关闭灯箱后，我无法再使用轮播导航。如果我在文件$(document).unbind("click");末尾添加这个jquery.mobileGallery.js，那么问题就解决了，但是我得到了第二个 - 重新打开它后我无法再在灯箱内导航，因为一次单击突然变成了两次单击，而不是一次，函数正在执行两次。

有人可以帮我解决这个问题吗？

html

<div class="imageGallery">
    <ul class="mainSlideShow">
        <li>
            <a rel="prettyGall" href="images/sk01.jpg"><img src="images/01.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk02.jpg"><img src="images/02.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk03.jpg"><img src="images/03.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk04.jpg"><img src="images/04.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk05.jpg"><img src="images/05.jpg" /></a>
        </li>
    </ul>
<div class="slidernavigation"></div>
<div id="leftNav"></div>
<div id="rightNav"></div>
<div class="descWrapper">
    <ul class="mainDescShow">
        <li>
            <span class="imageDescription">vitae scelerisque dolor elit ac mi. Sed dignissim ...</span>
        </li>
        <li></li>
        <li>
            <span class="imageDescription">vitae scelerisque dolor elit ac mi. Sed dignissim ...</span>
        </li>
        <li></li>
        <li></li>
    </ul>
</div>

jQuery 函数

(function($) {

    $.fn.carouZel = function(options) {

        //Defaults to extend options
        var defaults = {  
            FirstSliderSpeed: 500,                  //Speed of the first slider in milliseconds
            SecondSliderSpeed: 800,                //Speed of the second slider in milliseconds
            SlideShow: true,                        //Slideshow on - true, off - false
            SlideShowInterval: 10000,                 //Slideshow interval in milliseconds
            BulletNavPos: ".slidernavigation"
        };  

        //Extend those options
        var options = $.extend(defaults, options);

        var obj = $(this); //detailsVisualGallery

    if (obj.length > 0){

            var firstSlider = $(this);
            var secondSlider = $('.mainDescShow');

            var ChildrenNumber = firstSlider.children().length;
            var liWidth = firstSlider.children('li:first').width();
            var liHeight = firstSlider.children('li:first').outerHeight() + 10;


            var maxW = 0;
            var maxH = 0;
            $(".mainSlideShow img").load().each(
                function(){

                    var c_width = parseInt($(this).width());
                    var c_height = parseInt($(this).height());
                    if (c_width > maxW) {
                        maxW = c_width;
                    }
                    if (c_height > maxH) {
                        maxH = c_height;
                    }
                }
            );

            var liHeight = maxH + 10;

            $('.mainSlideShow li').css({
                'height': liHeight,
                'width': 660
            });

            $(".mainSlideShow img").load().each(
                function(){
                    var imgH = $(this).height();
                    var imgW = $(this).width();

                    $(this).css({
                        //'position': 'absolute',
                        'margin-top': -1 * (imgH / 2) + 'px',
                        'margin-left': -1 * (imgW / 2) + 'px'
                        });
                    $(this).fadeIn('slow')
                }
            );


            //find height
            $.fn.equalizeHeights = function() {
              var maxHeight = this.map(function(i,e) {
                return $(e).outerHeight() + 10;
              }).get();

              return this.height( Math.max.apply(this, maxHeight) );
            };

            $.fn.justNumber = function() {
              var maxHeight = this.map(function(i,e) {
                return $(e).outerHeight() + 10;
              }).get();

              return  Math.max.apply(this, maxHeight) ;
            };

            //wrap
            firstSlider.wrap('<div class="sliderWrapper" />');
            firstSlider.parent('.sliderWrapper').css({'width': '100%', 'height': + liHeight + 'px', 'position': 'relative', 'overflow':'hidden'});

            //set width & height
            $(this).css({'width': liWidth * (ChildrenNumber + 1) +'px', 'height': liHeight +'px', 'overflow':'hidden', 'position':'relative' });
            $('.mainDescShow').css({'width': liWidth * (ChildrenNumber + 1) +'px', 'overflow':'hidden', 'position':'relative' });



            //create bullet navigation
            $(options.BulletNavPos).prepend("<ul id=\"bulletNav\"></ul>");

            for (var i = 0; i < ChildrenNumber ; i++) {
                $('#bulletNav').append("<li>" + (i+1) +"</li>");
            }

            //clone first time
            firstSlider.children('li:first').clone().appendTo(firstSlider);

            function CloneSlide(){
                firstSlider.children('li:eq(1)').clone().appendTo(firstSlider);

                firstSlider.children('li:first').detach();
            }
            //place navigation
            var positionnav = $(this).offset();

            $('#leftNav').css({left: positionnav.left, top: positionnav.top + (liHeight/2) });
            $('#rightNav').css({left: positionnav.left+ liWidth- 45 , top: positionnav.top + (liHeight/2)});

            // setting the active bullet
            function setActiveBullet() {
                    $('#bulletNav li').removeClass('active');
                    $('#rightNav , #leftNav').removeClass('false');

                    if (firstSlider.position().left >= 0 ){
                            $('#bulletNav').children('li').eq(0).addClass('active');
                            $('#leftNav').addClass('false');
                    }
                    else {
                        $('#bulletNav').children('li').eq(""+ (Math.abs(firstSlider.position().left) / liWidth) + "" ).addClass('active');
                            if( (Math.abs(firstSlider.position().left) / liWidth) + 1 == ChildrenNumber){
                                $('#rightNav').addClass('false');
                            }
                    }
            }
            setActiveBullet();

            $(".mGalleryItem img").load(
                function(){
                    $(this).show();
                }
            );

            //bullet navigation
            $('#bulletNav li').click(function() {

                var bulletPos = $(this).index(); //index gets eq

                firstSlider.animate({
                    left: '-'+(bulletPos * liWidth) +'px'
                    }, options.FirstSliderSpeed, function() {
                        // Animation complete.
                        //CloneSlide();
                        //firstSlider.css({'left': '0px'});
                        setActiveBullet()
                });

                setActiveBullet();

            });

            $('.mainSlideShow , .mainDescShow').css({
                'visibility':'visible'
            });

            $("#rightNav:not(.false)").live("click",function(event){

                event.preventDefault();

                var activeBulletPos = Math.abs(firstSlider.position().left) / liWidth ;

                firstSlider.animate({
                    left: '-='+ liWidth +'px'
                    }, options.FirstSliderSpeed, function() {
                        // Animation complete.
                        if ( activeBulletPos == (ChildrenNumber - 1) ) {
                            firstSlider.css({'left': '0px'});
                        }
                        setActiveBullet()
                });

                secondSlider.animate({
                    left: '-='+ liWidth +'px'
                    }, options.FirstSliderSpeed, function() {
                        // Animation complete.
                        if ( activeBulletPos == (ChildrenNumber - 1) ) {
                            secondSlider.css({'left': '0px'});
                        }
                });


                return false;
            })

            $("#leftNav:not(.false)").live("click",function(event){

                event.preventDefault();

                    var sliderPos = firstSlider.position();

                    if (sliderPos.left >= 0 ) { 
                            firstSlider.animate({
                                    left: liWidth- (liWidth * ChildrenNumber) +'px'
                            }, options.FirstSliderSpeed, function() {
                                    setActiveBullet() // Animation complete.
                                    //showHide();
                               });

                            secondSlider.animate({
                                    left: liWidth- (liWidth * ChildrenNumber) +'px'
                            }, options.FirstSliderSpeed, function() {
                               });
                    }
                    else {
                            firstSlider.animate({
                                    left: '+='+ liWidth +'px'
                            }, options.FirstSliderSpeed, function() {
                                    setActiveBullet() // Animation complete.
                                    //showHide();
                               });

                            secondSlider.animate({
                                    left: '+='+ liWidth +'px'
                            }, options.FirstSliderSpeed, function() {
                               });
                    }

                setActiveBullet();
            })




        }
    }//call zlider
})(jQuery);

(function($) {
    $.fn.mGallery = function(options) {
        var defaults = {
            SlideShow: true,
            SlideShowInterval: 10000
        };  

        window.top.scrollTo(0, 1);

        //Extend those options
        var options = $.extend(defaults, options);

        var obj = $(this); 

        if (obj.length > 0){
            obj.on("click",function(){

                var winH = $(window).height();
                var winW = $(window).width();


                $('body').append("<div class=\"mGalleryWrap\"></div>");
                $('.mGalleryWrap').css({
                    'width': winW + 'px',
                    'height': winH + 'px'
                    });

                //how many children
                var chCount = obj.length;
                var chPosition = $(this).parent().prevAll().length;

                //create list
                $('.mGalleryWrap').append("<ul class=\"mGalleryList\"></ul>");
                $('.mGalleryWrap').append("<ul class=\"mGalleryDescList\"></ul>");
                $('.mGalleryWrap').append("<ul id=\"mGalleryBull\"></ul>");

                //create navigation
                $('.mGalleryWrap').append("<div class=\"mGalleryItemRightNav\"></div>");
                $('.mGalleryWrap').append("<div class=\"mGalleryItemLeftNav\"></div>");
                $('.mGalleryWrap').append("<div class=\"mGalleryClose\"></div>");
                $('.mGalleryWrap').append("<div id=\"mGalleryDescSlide\" class=\"mGalleryDown\"></div>");


                if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
                    $('.mGalleryItemRightNav, .mGalleryItemLeftNav').css({
                        'visibility':'hidden'
                        });
                }


                $('.mGalleryItemRightNav , .mGalleryItemLeftNav').css({
                    'top': (winH / 2) - 15 + 'px'
                    });

                //create list children
                for (var itmp = 0; itmp < chCount ; itmp++) {
                        var imageURL = $("a[rel^='prettyGall']").eq(itmp).attr('href');

                        if($(".mainDescShow li").eq(itmp).html().length > 0){
                            var imageDESC = $(".mainDescShow li").eq(itmp).html();
                            var cls = 'mGalleryDescItem';
                        }
                        else{
                            var imageDESC = '';
                            var cls = 'mGalleryDescEmptyItem';
                        }

                        //imageDescription
                        $(".mGalleryList").append("<li class=\"mGalleryItem\"><img class=\"mGalleryItemImg\" src=\""+imageURL+"\"></li>");
                        $(".mGalleryDescList").append("<li class=\""+cls+"\">"+imageDESC+"</li>");
                        $("#mGalleryBull").append("<li>"+(itmp + 1)+"</li>");
                }

                $(".mGalleryItemImg").load(
                    function(){
                        var imgH = $(this).height();
                        var imgW = $(this).width();

                        $(this).css({
                            'margin-top': -1 * (imgH / 2) + 'px',
                            'margin-left': -1 * (imgW / 2) + 'px',
                            'visibility':'visible'
                            });

                    }
                );

                $('#mGalleryBull').css({
                    'left': (winW / 2) - (chCount * 8) + 'px'
                    });

                $('.mGalleryList').css({
                    'width': (winW * chCount) + 'px',
                    'height': winH + 'px',
                    'left': 0 - (chPosition * winW) + 'px'
                    });

                $('.mGalleryDescList').css({
                    'width': (winW * chCount) + 'px',
                    'height': '100px',
                    'left': 0 - (chPosition * winW) + 'px'
                    });

                $('.mGalleryItem').css({
                    'width': winW + 'px',
                    'height': winH + 'px',
                    });

                $('.mGalleryDescEmptyItem , .mGalleryDescItem').css({
                    'width': winW + 'px'
                    });

                $('.mGalleryItem img').css({
                    'max-height': (winH - 20) + 'px',
                    'max-width': (winW - 20) + 'px',
                    });

                function setActiveNav() {
                    $('.mGalleryItemRightNav , .mGalleryItemLeftNav').removeClass('false');
                    var p = $('.mGalleryList').position()
                    if(p.left >= 0){
                        $('.mGalleryItemRightNav').addClass('false');
                    }
                    if(p.left <= Math.abs((chCount - 1) * winW ) * -1){
                        $('.mGalleryItemLeftNav').addClass('false');
                    }
                }

                function setActiveBullet() {
                    $('#mGalleryBull').children('li').removeClass('active');
                    var p = $('.mGalleryList').position();

                    var eqIndex = Math.abs(p.left)/winW; 

                    $('#mGalleryBull').children('li').eq(eqIndex).addClass('active');
                }

                setActiveNav();
                setActiveBullet();

                //move right
                $('.mGalleryItemRightNav:not(.false)').live("click",function(event){
                    event.preventDefault();

                    $('.mGalleryList , .mGalleryDescList').animate({
                        left: '+='+winW+'',
                    }, 300, function() {
                        setActiveNav();
                        setActiveBullet();
                        });

                });

                $('.mGalleryItemLeftNav:not(.false)').live("click",function(event){
                    event.preventDefault();

                    $('.mGalleryList , .mGalleryDescList').animate({
                        left: '-='+winW+'',
                    }, 300, function() {
                        setActiveNav();
                        setActiveBullet();
                        });
                });


                $('.mGalleryDown').live("click",function(){
                    $(this).removeClass('mGalleryDown').addClass('mGalleryUp');

                    $('.mGalleryDescList , #mGalleryDescSlide').animate({
                        bottom: '-=80',
                    }, 300, function() {

                    });
                });

                $('.mGalleryUp').live("click",function(){
                    $(this).removeClass('mGalleryUp').addClass('mGalleryDown');

                    $('.mGalleryDescList , #mGalleryDescSlide').animate({
                        bottom: '+=80',
                    }, 300, function() {

                    });
                });


                $('.mGalleryClose').click(function(){
                    $('.mGalleryWrap').remove();
                    //$(document).bind("click");
                });


                return false;
            });
        }
    }
})(jQuery);

调用 jQuery 函数 

    $(window).bind("load", function() {
        if($('.mainSlideShow').children().length > 0){
            $('.mainSlideShow').carouZel({
                SlideShow: false,
            });
        }
    }); 

    $(document).ready(function() {
        $("a[rel^='prettyGall']").mGallery();
    });

4

4 回答 4

0

在一个点击处理程序中很可能有一个return false声明或某个地方。e.stopPropagation()换句话说，点击有两个绑定，但事件并未向上传播到事件树以到达两者

于 2012-09-20T11:32:08.423 回答
0

如果您尝试在初始项目单击（图像）上使用“on”会发生什么？
代替：

obj.click(function(){

采用： 

obj.on("click", func...

不是更好吗？

我也得到：

ReferenceError: IntervalClearing is not defined     
IntervalClearing();
于 2012-09-20T11:53:44.950 回答
0

所以我只好自己做...

我$(document).unbind("click");在 mGallery 函数的末尾添加了，而不是

$("#rightNav:not(.false)").live("click",function(event)

我用了

$("#rightNav").click(function(event)

和...一起

if(!$(this).hasClass('false')){
}

我仍然不知道为什么这是有效的，而我以前的代码却没有......但它正在工作。

于 2012-09-26T08:19:32.057 回答
0

我认为bidoron的想法是对的，你只需要做更多的事情来让它发挥作用。

拆分你的初始化。每页一次，每次交互一次。

使用带有 CSS 选择器的 'on' 在页面加载时注册以接收所有点击事件：

$("body").on('click', "#rightNav:not(.false)", function(event) {
    ...
});

对所有点击事件重复此操作。由于您只注册一次，因此没有重复的事件分派。当您在页面上可能有多个相同项目时，这也非常有用。他们都“只是工作”，没有任何簿记。这比在精确元素上注册要慢一点，但除非您使用 Javascript 编写游戏，否则您永远不会注意到其中的差异。但是，您的程序员同事会立即注意到生活质量的提高。

于 2012-09-27T20:16:05.113 回答