javascript - JQuery 灯箱与多个画廊/链接一起工作

Question

我正在尝试将我制作的这段代码制作成一个库:

$.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>

你看到了.box类(class)？作为用户，我想无限添加更多包含不同图像和标题的框!

当我添加另一个 <a>这是盒子的灯箱链接，两个盒子同时显示。我知道以这种方式重用相同的代码，但这就是我想要做的:

以某种方式保持相同的代码而不添加越来越多的代码。然而，当我添加更多框时，它们与其他框完全不同(不同的图像)

Answer 1

您可以修改您的 .click 函数以使用此函数:

$(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;
        }
    }
});

此代码将使用 .lightbox 类检查所有“a”元素，并将检查单击了哪个元素。知道单击的“a”元素的索引 (i)，然后将显示“i”.box 元素。

请注意，.backdrop 元素在 HTML 中应该是唯一的，不需要重复。在 HTML 中，您只需为每个 a 添加一个新的 a href 元素和一个新的 div .box。

<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>

希望这就是您所需要的!