JQuery lightbox work with multiple galleries/links

Question

I am trying to make this code I made into a library:

$.fn.boxify = function() {
    var imageSliding = $('.box > .img');
        $(this).click(function() {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
        });

        $('.close').click(function() {
            close_box();
        });

        $('.backdrop').click(function() {
            close_box();
        });

        function close_box() {
            $('.backdrop, .box').animate({
                'opacity': '0'
            }, 300, 'linear', function() {
                $('.backdrop, .box').css('display', 'none');
            });
        }

        /* Slider */
        var speed = 100;

        $(".prev").click(function() {
            var gallery = $(this).closest('.box').find("ul.gallery"),
                now = gallery.children(":visible"),
                last = gallery.children(":last"),
                prev = now.prev();
            prev = prev.index() == -1 ? last : prev;
            now.fadeOut(speed, function() {
                prev.fadeIn(speed);
            });
        });

        $(".next").click(function() {
            var gallery = $(this).closest('.box').find("ul.gallery"),
                now = gallery.children(":visible"),
                first = gallery.children(":first"),
                next = now.next();
            next = next.index() == -1 ? first : next;
            now.fadeOut(speed, function() {
                next.fadeIn(speed);
            });
        });

        $(".gallery li").click(function() {
            var first = $(this).parent().children(':first'),
                next = $(this).next();
            next = next.index() == -1 ? first : next;
            $(this).fadeOut(speed, function() {
                next.fadeIn(speed);
            });
        });
};
 
$( "a" ).boxify(); // Makes all the links green.

body {
            font-family: Helvetica, Arial;
        }
        
        .backdrop {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: .0;
            filter: alpha(opacity=0);
            z-index: 50;
            display: none;
        }
        
        .box {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            left: 50%;
            background: black;
            text-align: left;
            z-index: 51;
            padding: 0;
            margin: 0;
            display: none;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 5px #444444;
            -webkit-box-shadow: 0px 0px 5px #444444;
            box-shadow: 0px 0px 5px #444444;
            border: 10px solid #000;
            color: white;
            width: 40%;
        }
        
        @media (min-width: 320px) and (max-width: 900px) {
            .box {
                width: 98%;
            }
        }
        
        @media (min-width: 901px) and (max-width: 1200px) {
            .box {
                width: 60%;
            }
        }
        
        @media (min-width: 1201px) {
            .box {
                width: 48%;
            }
        }
        
        .box img {
            width: 100%;
        }
        
        .caption {
            padding-top: 10px;
            font-size: 15px;
        }
        
        .prev,
        .next {
            position: relative;
            padding: 3px;
            cursor: pointer;
            float: right;
            border: 1px solid black;
        }
        
        .prev:active,
        .next:active {
            background-color: white;
            color: black;
        }
        
        .gallery li {
            display: none;
            list-style: none;
            margin-left: -40px;
        }
        
        .gallery li:first-child {
            display: block;
        }
        
        .gallery img {
            max-height: 550px;
        }
        
        .slideButtons {
            position: relative;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
        <h1>Welcome Within</h1>
        <a href="#" class="lightbox">Open Lightbox</a>
        <div class="backdrop"></div>
        <div class="box">
            <ul class="gallery" id="olympGallery">
                <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni1.png" alt="" title="" /></li>
                <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni2.png" alt="" title="" /></li>
                <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni3.png" alt="" /></li>
            </ul>

            <div class="slideButtons">
                <span class="next">Next</span>
                <span class="prev">Previous</span>
            </div>
            <div class="caption">
                <p>This thing is called 'Caption'. Let me tell you:</p>
                <hr />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

You see that .box class? As a user I wanna infinitely add more box containing different images and captions!

When I added another <a> which is the Lightbox link to the box, the both boxes display on the same time. I know that the same code is reused this way, but that's what I'm trying to do:

Somehow keep the same code without adding more and more code. Yet, when I add more boxes they are completely different from the others (different images)

Answer 1

You can modify your .click function to use this one:

$(this).click(function(event) {
    var lightBoxes = $('a.lightbox'); //Retrieves all a.lightboxes of the page
    for (var i = 0; i < lightBoxes.length; i++) {
        if (lightBoxes[i] == event.target) { //Checks the clicked element position in the array
            //Displays the common .backdrop div
            $('.backdrop').animate({
                'opacity': '.50'
            }, 300, 'linear').css('display', 'block');
            //Displays the 'i' .box div
            $('.box').eq(i).animate({
                'opacity': '1.00'
            }, 300, 'linear').css('display', 'block');
            break;
        }
    }
});

This code will check all the 'a' elements with the .lightbox class and will check which one was clicked. Knowing the index (i) of the 'a' element clicked, then the 'i' .box element will display.

Note that the .backdrop element should be unique in the HTML and don't need to be repeated. In the HTML you just need to add a new a href element and a new div .box for each a.

<a href="#" class="lightbox">Open Lightbox 2</a>
<div class="box">
    <ul class="gallery" id="olympGallery">
        <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni1.png" alt="" title="" /></li>
        <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni2.png" alt="" title="" /></li>
        <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni3.png" alt="" /></li>
    </ul>

    <div class="slideButtons">
        <span class="next">Next</span>
        <span class="prev">Previous</span>
    </div>
    <div class="caption">
        <p>This thing is called 'Caption'. Let me tell you:</p>
        <hr />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Hope this is what you need!