Search code examples
csshreflightbox

Click through a series of divs

I have a similar setup to the code below where a gallery type link opens up a div with a dark background and an enlarged image (like this: https://codepen.io/ongtiffany/pen/BoOeQV).

What I want to do is link these lightbox div's to one another (with left and right arrows) so that you can close the currently open div and open the correct adjacent div, effectively switching between the enlarged images.

<div class="lightbox" id="1">
    <div class ="lightbox_content">Some stuff here.</div>
    <a href="#lightbox_2"><div class ="lightbox_r">&rarr;</div></a>
</div>

<div class="lightbox" id="1">
    <a href="#lightbox_1"><div class ="lightbox_l">&larr;</div></a>
    <div class="lightbox_content">Some stuff here.</div>
    <a href="#lightbox_3"><div class="lightbox_r">&rarr;</div></a>
</div>

<div class="lightbox" id="3">
    <a href="#lightbox_2"><div class ="lightbox_l">&larr;</div></a>
    <div class="lightbox_content">Some stuff here.</div>
</div>

Any help would be amazing - thanks!

Solution

  • Don't reinvent the wheel. Try using some of specialized "lightbox" libraries. Almost all of them have support for linking multiple images into series and navigating using arrows or some buttons.