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