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類？ 作為用戶，我想無限添加更多包含不同圖像和標題的框！

當我添加另一個<a> （即燈箱的Lightbox鏈接）時，兩個框同時顯示。 我知道相同的代碼以這種方式重用，但這就是我想要做的：

以某種方式保持相同的代碼而不添加越來越多的代碼。 然而，當我添加更多的盒子時，它們與其他盒子完全不同（不同的圖像）

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添加一個新的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>

希望這是你需要的！