Blueimp 库在一个页面上实现多次答案

【问题标题】：Blueimp gallery implement multiple times on one pageBlueimp 库在一个页面上实现多次
【发布时间】：2015-04-07 09:24:14
【问题描述】：

我正在使用 Blueimp 库在网页上显示灯箱。

我可以在页面上显示一个灯箱，但我想为不同的图像类别等添加多个灯箱（即 - 假期、自然、黑白等）。

我可以让灯箱在网页上将 OK 显示为单独的“行”元素。

问题是第二个（或后续）灯箱在单击其中的图像时无法正确打开图像 - 它们只是在没有格式的浏览器中打开图像，而不是像他们应该的那样使用画廊样式.

这是可以正常工作的代码：

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="index.html#page-top">
                    <i class="fa fa-play-circle"></i>  <span class="light">Back</span> to Main Page
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="index.html#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="index.html#download">Images</a>
                    </li>
                    <li class="page-scroll">
                        <a href="index.html#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

<section class="gallery">
        <div class="gallery-body">
            <div class="container">
                <div class="row">
                       <h2>Image Gallery</h2>
    <!-- The container for the list of example images -->
    <div id="links">

    <a href="images/image-1.jpg" title="">
        <img src="images/thumbnails/image-1.jpg" alt="">
    </a>
    <a href="images/image-2.jpg" title="">
        <img src="images/thumbnails/image-2.jpg" alt="">
    </a>
    <a href="images/image-3.jpg" title="">
        <img src="images/thumbnails/image-3.jpg" alt="">
    </a>
    <a href="images/image-4.jpg" title="">
        <img src="images/thumbnails/image-4.jpg" alt="">
    </a>
    <a href="images/image-5.jpg" title="">
        <img src="images/thumbnails/image-5.jpg" alt="">
    </a>
    <a href="images/image-6.jpg" title="">
        <img src="images/thumbnails/image-6.jpg" alt="">
    </a>
    <a href="images/image-7.jpg" title="">
        <img src="images/thumbnails/image-7.jpg" alt="">
    </a>
    <a href="images/image-8.jpg" title="">
        <img src="images/thumbnails/image-8.jpg" alt="">
    </a>
    <a href="images/image-9.jpg" title="">
        <img src="images/thumbnails/image-9.jpg" alt="">
    </a>
    <a href="images/image-10.jpg" title="">
        <img src="images/thumbnails/image-10.jpg" alt="">
    </a>
    <a href="images/image-11.jpg" title="">
        <img src="images/thumbnails/image-11.jpg" alt="">
    </a>
    <a href="images/image-1.jpg" title="">
        <img src="images/thumbnails/image-1.jpg" alt="">
    </a>

    </div>

                </div>



            </div>
        </div>

</section>


    <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>


    <!-- Core JavaScript Files -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <!-- Google Maps API Key - You will need to use your own API key to use the map feature 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
-->
    <!-- Custom Theme JavaScript -->
    <script src="js/grayscale.js"></script>



     <!-- Custom LIGHTBOX JavaScript -->
    <script src="js/blueimp/blueimp-helper.js"></script>
<script src="js/blueimp/blueimp-gallery.js"></script>
<script src="js/blueimp/blueimp-gallery-fullscreen.js"></script>
<script src="js/blueimp/blueimp-gallery-indicator.js"></script>
<script src="js/blueimp/blueimp-gallery-video.js"></script>
<script src="js/blueimp/blueimp-gallery-vimeo.js"></script>
<script src="js/blueimp/blueimp-gallery-youtube.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/*jslint evil: true */
/*global window, document*/
// Including jQuery via the protocol relative url above works for both http and https.
// Explicitly including jQuery via https allows running the Gallery demo as local file:
if (!window.jQuery) {
    document.write(
        '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>'
    );
}
</script>
<script src="js/jquery.blueimp-gallery.js"></script>
<script src="js/demo.js"></script>
<script src="js/blueimp-gallery.min.js"></script>


<script>
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>


</body>

我只想在此下方添加另一个灯箱，但我可以添加另一个“行”元素，它会起作用。我也尝试再次添加画廊部分，但它仍然不起作用。它在主页上显示正常，但无法正确打开图像。

希望这清楚吗？

谢谢

【问题讨论】：

标签： css image twitter-bootstrap gallery blueimp

【解决方案1】：

你可以做得更好，我也有这个问题。

"jQuery 插件设置

blueimp Gallery jQuery 插件注册了一个全局点击处理程序，以在 Gallery 灯箱中打开具有 data-gallery 属性的链接。

要使用它，请遵循灯箱设置指南，但将缩小的 Gallery 脚本替换为 jQuery 插件版本，并在包含 jQuery 后包含它：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>

接下来，将属性 data-gallery 添加到您的图库链接：

<div id="links">
    <a href="images/banana.jpg" title="Banana" data-gallery>
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple" data-gallery>
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange" data-gallery>
    <img src="images/thumbnails/orange.jpg" alt="Orange">
    </a>
</div>

灯箱设置指南中的 onclick 处理程序不是必需的，可以删除。"

之后只需将不同的画廊名称添加到data-gallery，例如：data-gallery-fruits，它应该可以工作：D

【讨论】：

【解决方案2】：

好吧，我想通了……

这是我需要做的一件事：

https://github.com/blueimp/Gallery#container-ids-and-link-grouping

您还需要为要显示的每个图库创建单独的脚本。因此，如果您将图像放在名为的 div 中：

 <div id="color">

    <a href="images/image-1.jpg" title="" data-gallery="#blueimp-gallery">
        <img src="images/thumbnails/image-1.jpg" alt="">
    </a>Etc Etc Etc

您需要为此画廊提供特定的脚本，然后为后续画廊提供不同的脚本：

<script>
document.getElementById('color').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

<script>
document.getElementById('polaroid').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

反正我就是这样让它工作的……

【讨论】：

Wojciech 的回答是最好的。

【解决方案3】：

使用 jQuery 非常简单！

HTML：

<div class="gallery">
    <div><a href="1.jpg"><img src="1.jpg"></a></div>
    <div><a href="2.jpg"><img src="2.jpg"></a></div>
</div>

<div class="gallery">
    <div><a href="3.jpg"><img src="3.jpg"></a></div>
    <div><a href="4.jpg"><img src="4.jpg"></a></div>
</div>

JS：

$(document).on('click', '.gallery', function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {index: link, event: event},
    links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
});

希望对你有帮助。

【讨论】：

见 Wojciech 的回答。使用提供的 jquery 脚本和 data-gallery 属性是最好的答案。