so i've got 4 main icons on webpage, , when click one, lightbox pops up. when click off, lightbox retreats. when click 2nd icon, lightbox 2 appears etc.
what i'm trying do, set jquery change between 4 lightboxes when users press left , right.
to need 2 if statements each action.
i need 'if lightbox 1 open (display: block)' , user presses right button, close lightbox one, , display lightbox 2.
i need 'if lightbox 2 open (display: block)' , user presses right button, close lightbox two, , display lightbox 3.
i need 'if lightbox 2 open (display: block)' , user presses left button, close lightbox two, , display lightbox 1.
etc.
here jquery far, haven't included attempt @ how because don't think i'm getting close. thanks
//main screen lightbox functions --
$(document).ready(function() { $('.lightboxgo').click(function(){ $('.backdrop').animate({'opacity':'.50'}, 600, 'linear'); $('.lightbox').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .lightbox').css('display', 'block'); }) $('.lightboxgo2').click(function(){ $('.backdrop').animate({'opacity':'.50'}, 600, 'linear'); $('.lightbox2').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .lightbox2').css('display', 'block'); }) $('.lightboxgo3').click(function(){ $('.backdrop').animate({'opacity':'.50'}, 600, 'linear'); $('.lightbox3').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .lightbox3').css('display', 'block'); }) $('.lightboxgo4').click(function(){ $('.backdrop').animate({'opacity':'.50'}, 600, 'linear'); $('.lightbox4').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .lightbox4').css('display', 'block'); }) $('.close').click(function(){ close_box(); }); $('.backdrop').click(function(){ close_box(); }); $(document).keydown(function(e) { // escape key pressed if (e.keycode == 27) { close_box(); } }); //function created hide lightbox , backdrop -- function close_box() { $('.backdrop, .lightbox, .lightbox2, .lightbox3, .lightbox4, .portfolioimage1').animate({'opacity':'.0'}, 300, 'linear', function(){ $('.backdrop, .lightbox, .lightbox2, .lightbox3, .lightbox4, .portfolioimage1').css('display', 'none'); }); } });
you can simplify logic bit abstracting bit.
have function opens light box takes parameter thats jquery element of light box opened , have 1 closes it.
save variable holds light box clickable elements , use jquery data- api bind button light box opens save variable class name whatever open.
add click listener light box buttons looks @ clicked , opens light box based on (using data api) calling open function. set click listners close , backdrop elements close light box , have them close open 1 using class name whatever open
whenever open lightbox, add key listeners , switch light boxes using jquery prev() , next() functions switch between light box elements close whatever's open , open next() or prev() ones , whenever close, remove key listener
make sense?
this isn't perfect illustrates i'm saying in code:
$(function(){ var lightboxes = $(".lightbox");// 1 class every lightbox has var openclass = "lightboxopen";// class when have open lightbox 1 @ time have function close_box($el){ $el.removeclass(openclass);//remove class when closing //code close specific light box using $el refer lightbox removekeydownlistener();//define function remove listeners when close } function openlightbox($el){ $el.addclass(openclass);//add open class when opening //code open lightbox using $el refer specific 1 opened addkeydownlisteners()//define function listen key listeners } function addkeydownlistener(){ $(document).bind('keydown', function(e){ var openbox = $('.'+ openclass); close_box($(openbox);//close open box first if(e.keycode == [key right arrow]){ var nextitem = openbox.next();//this work if lightbox elements setup siblings(under same parent @ same level of nesting) openlightbox(nextitem); } if(e.keycode == [key left arrow]){ var previtem = openbox.prev();//this work if lightbox elements setup siblings(under same parent @ same level of nesting) openlightbox(previtem); } }); } function removekeydownlisteners(){ $(document).unbind('keydown');//remove key down listeners } lightboxes.click(function(){ var item = $(this);// capture specific 1 clicked on var lightboxitem = item.data('lightboxel');//use data attribute bind button lightbox ex <div class="lightboxgo4 lightbox" data-lightboxel=".lightbox4"></div> openlightbox($(lightboxitem));//define function opens lightbox }); $('.close, .backdrop').click(function(){ close_box($('.' + openclass));//close lightbox open class }); }); 
Comments
Post a Comment