How to code next/previous buttons for a custom "lightbox"

Question

I am working on creating lightbox-like functionality from scratch. So far I have the takeover element working and properly displaying an image, but now I would like to code next/previous buttons. I would also like the buttons to cycle through the gallery(if "previous" is clicked on the first image, it loads the last image and vice versa).

Here is the HTML that displays my image thumbnails:

<div id="gallery-wrapper">
    <ul>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
    </ul>
</div>

When an image thumbnail is clicked, the lightbox is generated and shown via Javascript:

$(document).ready(function() {
    $('.image').click(function(e) {
        e.preventDefault();
        $('body').width($('body').width());
        $('body').css('overflow', 'hidden');
        var image_href = $(this).attr("href");
        if ($('#lightbox').length > 0) { 
            $('#content').html('<img src="' + image_href + '" />');
            $('#lightbox').show();
        }
        else { 
            var lightbox =
            '<div id="lightbox">' +
                '<div id="content">' +
                    '<div class="close-gallery">Close<span>X</span></div>'+
                    '<div class="gallery-previous"></div>'+
                    '<img src="'+ image_href +'" />' +
                    '<div class="gallery-next"></div>'+
                '</div>' +
            '</div>';
            $('body').append(lightbox);
        }
    });
    $('body').on('click', '.close-gallery', function () {
        $('body').removeAttr('style');
        $('#lightbox').remove();
    });
});

This is what I've tried so far. It only works for the sibling immediately before or immediately after the currently selected image:

$(document).ready(function($) {
    $('.image').click(function(e) {
        $(this).addClass('active');
        e.preventDefault();
        $('body').width($('body').width());
        $('body').css('overflow', 'hidden');
        var image_href = $(this).attr("href");
        var prevImage = $('.active').parent().prev().find('a').attr("href");
        var nextImage = $('.active').parent().next().find('a').attr("href");
        console.log(prevImage, nextImage);
        if ($('#lightbox').length > 0) { 
            $('#content').html('<img src="' + image_href + '" />');
            $('#lightbox').show();
        }
        else { 
            var lightbox =
            '<div id="lightbox">' +
                '<div id="content">' +
                    '<div class="close-gallery">Close<span>X</span></div>'+
                    '<div class="gallery-previous" data-nav="'+ prevImage +'"></div>'+
                    '<img src="'+ image_href +'" />' +
                    '<div class="gallery-next" data-nav="'+ nextImage +'"></div>'+
                '</div>' +
            '</div>';
            $('body').append(lightbox);
        }
    });
    $('body').on('click', '.gallery-previous', function () {
        var prev = $(this).data('nav');
        console.log(prev);
        $('#content').find('img').attr('src',prev);
    });
    $('body').on('click', '.gallery-next', function () {
        var next = $(this).data('nav');
        console.log(next);
        $('#content').find('img').attr('src',next);
    });
    $('body').on('click', '.close-gallery', function () {
        $('body').removeAttr('style');
        $('#lightbox').remove();
    });
});

My thought was to replace the current lightbox image src with the next/previous image links, but I am having trouble figuring out how I would actually accomplish that. Any help greatly appreaciated!

Answer 1

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-core-js'></script>

<div id="gallery-wrapper">
    <ul>
        <li><a href="https://mb.cision.com/Public/12091/3216809/95a99f5c35185d28_org.png" class="cision_gallery_image"><img src="https://mb.cision.com/Public/12091/3216809/95a99f5c35185d28_org.png" alt="Image" /></a></li>
        <li><a href="https://mb.cision.com/Public/12091/3216809/887b4860968192bd_org.png" class="cision_gallery_image"><img src="https://mb.cision.com/Public/12091/3216809/887b4860968192bd_org.png" alt="Image" /></a></li>
        <li><a href="http://165.22.182.59/cision/wp-content/uploads/2021/11/3D-Visualisering.jpg" class="cision_gallery_image"><img src="http://165.22.182.59/cision/wp-content/uploads/2021/11/3D-Visualisering.jpg" alt="Image" /></a></li>
        <li><a href="http://165.22.182.59/cision/wp-content/uploads/2021/11/S-Granstorp-1.jpg" class="cision_gallery_image"><img src="http://165.22.182.59/cision/wp-content/uploads/2021/11/S-Granstorp-1.jpg" alt="Image" /></a></li>
    </ul>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
    window.onkeydown = function( event ) {
      if ( event.keyCode == 27 ) {
        jQuery('body').removeAttr('style');
        jQuery('#cision_lightbox_cs').remove();
      }
    };
    jQuery('.cision_gallery_image').click(function(e) {
        jQuery('.cision_gallery_image').removeClass("cision_active")
        jQuery(this).addClass('cision_active');
        e.preventDefault();
        jQuery('body').width(jQuery('body').width());
        jQuery('body').css('overflow', 'hidden');
        var image_href = jQuery(this).attr("href");
        var prevImage = jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').attr("href");
        var nextImage = jQuery('.cision_gallery_image.cision_active').parent().next().find('a').attr("href");
        console.log(prevImage, nextImage);
        if (jQuery('#cision_lightbox_cs').length > 0) { 
            jQuery('#cision_content').html('<img src="' + image_href + '" />');
            jQuery('#cision_lightbox_cs').show();
        }
        else { 
            var cision_lightbox_cs =
            '<div id="cision_lightbox_cs" style="display: block;">' +
                '<div id="cision_content">' +
                    '<div class="close-gallery">Close<span>X</span></div>'+
                    '<div class="gallery-previous""><</div>'+
                    '<img src="'+ image_href +'" />' +
                    '<div class="gallery-next">></div>'+
                '</div>' +
            '</div>';
            jQuery('body').append(cision_lightbox_cs);
        }
    });

    jQuery('body').on('click', '.gallery-previous', function () {
        var prev = jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').attr("href");
        if (prev) {

        jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').addClass("cision_active");
        jQuery('.cision_gallery_image.cision_active').parent().next().find('a').removeClass("cision_active");
        console.log(prev);
        jQuery('#cision_content').find('img').attr('src',prev);    

        }
    });
    
    jQuery('body').on('click', '.gallery-next', function () {
        var next = jQuery('.cision_gallery_image.cision_active').parent().next().find('a').attr("href");

        if (next) {
        jQuery('.cision_gallery_image.cision_active').parent().next().find('a').addClass("cision_active");
        jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').removeClass("cision_active");

        console.log(next);
        jQuery('#cision_content').find('img').attr('src',next);

        }
    });

    jQuery('body').on('click', '.close-gallery', function () {
        jQuery('body').removeAttr('style');
        jQuery('#cision_lightbox_cs').remove();
    });
});
</script>

<style type="text/css">
div#gallery-wrapper {}

div#gallery-wrapper ul li {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 20px;
}

div#gallery-wrapper ul li a.cision_gallery_image {
    width: 100%;
}

div#gallery-wrapper ul li a.cision_gallery_image img {
    width: 100%;
}

div#cision_lightbox_cs {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    overflow-x: scroll;
    background-color: rgb(124 121 121 / 50%);
}

div#cision_lightbox_cs div#cision_content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 90vh;
    transform: translateX(-50%) translateY(-50%);
    padding-bottom: 50px;
    padding-top: 50px;
}

div#cision_lightbox_cs div#cision_content img {
    width: 100%;
    padding-bottom: 30px;
}
</style>enter code here