Question

我正在尝试将这段代码制作成库：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

你看到.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>

希望这是你所需要的！

JQuery灯箱可与多个图库/链接一起使用

1 个答案: