Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>you can simplify this logic a bit by abstracting this a bit. </p> <ol> <li><p>have a function that opens a light box that takes a parameter thats a jquery element of the light box to be opened and also have one that closes it. </p></li> <li><p>save a variable that holds all the light box clickable elements and use the jquery data- api to bind the button to the light box it opens also save a variable that is a class name for whatever is open.</p></li> <li><p>add a click listener to the light box buttons that looks at what was clicked and opens a light box based on that (using the data api) by calling that open function. Also set up your click listners for the close and backdrop elements that close a light box and have them close the open one by using that class name for whatever is open</p></li> <li><p>whenever you open a lightbox, add key listeners and switch light boxes using the jquery prev() and next() functions to switch between light box elements then you close whatever's open and open the next() or prev() ones and whenever you close, remove that key listener</p></li> </ol> <p>Make sense?</p> <p>This probably isn't perfect but it illustrates that i'm saying in code:</p> <pre><code>$(function(){ var lightBoxes = $(".lightbox");// 1 class that every lightbox has var openClass = "lightboxOpen";// class for when you have an open lightbox only 1 at a time will have this function close_box($el){ $el.removeClass(openClass);//remove the class when closing it //code to close specific light box using $el to refer to the lightbox removeKeyDownListener();//define a function to remove the listeners when you close } function openLightbox($el){ $el.addClass(openClass);//add the open class when opening //code to open lightbox using $el to refer to the specific one to be opened addKeyDownListeners()//define a function to listen to key listeners } function addKeyDownListener(){ $(document).bind('keydown', function(e){ var openBox = $('.'+ openClass); close_box($(openBox);//close the open box first if(e.keyCode == [key for right arrow]){ var nextItem = openBox.next();//this will work if your lightbox elements are setup as siblings(under the same parent at the same level of nesting) openLightBox(nextItem); } if(e.keyCode == [key for left arrow]){ var prevItem = openBox.prev();//this will work if your lightbox elements are setup as siblings(under the same parent at the same level of nesting) openLightBox(prevItem); } }); } function removeKeyDownListeners(){ $(document).unbind('keydown');//remove all key down listeners } lightBoxes.click(function(){ var item = $(this);// capture the specific one clicked on var lightboxItem = item.data('lightboxel');//use the data attribute to bind the button to its lightbox ex &lt;div class="lightboxgo4 lightbox" data-lightboxel=".lightbox4"&gt;&lt;/div&gt; openLightbox($(lightboxItem));//define a function that opens the lightbox }); $('.close, .backdrop').click(function(){ close_box($('.' + openClass));//close the lightbox with the open class }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload