Question

I have two jQuery scripts. First one is carousel plugin and the second one is lightbox plugin. Here is preview http://www.zlatko.ch/test/

Problem – after I close lightbox I can no longer navigate with carousel. If I add this $(document).unbind("click"); at the end of my jquery.mobileGallery.js file, then is the problem solved but then I get the second one – I can no longer navigate inside lightbox after reopening it because one click suddenly becomes two clicks and instead of one time, function is executing two times.

Can someone help me solve this problem?

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 functions

(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);

calling of jQuery functions

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

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

Answer 1

So I had to do it by myself…

I have added $(document).unbind("click"); at the end of mGallery function and instead of

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

I used

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

together with

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

I still don’t know why is this working and my previous code not… but it’s working.