-1

2つのjQueryスクリプトがあります。1つ目はカルーセルプラグインで、2つ目はライトボックスプラグインです。こちらがプレビューですhttp://www.zlatko.ch/test/

問題-ライトボックスを閉じた後、カルーセルでナビゲートできなくなりました。これをファイル$(document).unbind("click");の最後に追加するjquery.mobileGallery.jsと、問題は解決しますが、2番目の問題が発生します-1回のクリックが突然2回のクリックになり、関数が実行されているため、ライトボックスを再度開いた後、ライトボックス内を移動できなくなります二度。

誰かが私がこの問題を解決するのを手伝ってもらえますか？

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

ほとんどの場合、クリックハンドラーの1つにreturn falseステートメントまたはどこかにあります。e.stopPropagation()つまり、クリックには2つのバインディングがありますが、両方に到達するためにイベントがイベントツリーに伝播されていません。

于 2012-09-20T11:32:08.423 に答える
0

ビドロンのアイデアは正しかったと思います。

初期化を分割します。ページごとに 1 回、インタラクションごとに 1 回。

CSS セレクターで「on」を使用して、ページの読み込み時に登録し、すべてのクリック イベントを受け取ります。

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

すべてのクリック イベントに対して繰り返します。登録は 1 回だけなので、イベントのディスパッチが重複することはありません。また、これは、ページに同じアイテムが複数ある場合に最適です。それらはすべて、簿記なしで「ただ機能する」だけです。正確な要素に登録するよりも少し遅くなりますが、Javascript でゲームを作成していない限り、違いに気付くことはありません。ただし、仲間のコーダーは、すぐに生活の質が向上したことに気付くでしょう。

于 2012-09-27T20:16:05.113 に答える
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 に答える