Question

我在尝试在一个页面中拥有多个图库时遇到此问题。我正在使用Twitter BOOTSTRAP作为页面，使用blueimp Gallery作为图像。事实上，当我复制（用于测试目的）工作库时，我最终得到了一个显示灯箱界面的图库（总共3个），但图像几乎变暗为黑色，其余2个画廊没有灯箱一切行动。这是我正在使用的代码（当然我在标题中调用了样式，并在页面底部调用了Js）：

<section id="Section-2">
  <div class="container">
   <br />
    <div class="row">
        <div class="span12 page-header text-center">
            <h3>DISE&Ntilde;O</h3>
            <p class="lead">
        </div> 
        <h3 class="text-center"> Gr&aacute;fica Vehicular</h3>
        <h4 class="text-center">Hacer clic sobre las im&aacute;genes para ampliarlas</h4>
    </div>
    <div class="row">
         <!-- 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><!--/row blueimp initialize -->
        <div id="links">
            <a href="images/carabela-grafica.jpg" title="Banana">
                <img src="images/thumbnails/carabela-graficath.png" alt="Banana">
            </a>
            <a href="images/Estanciera.jpg" title="Apple">
                <img src="images/thumbnails/Estancierath.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/fiat.jpg" title="Banana">
                <img src="images/thumbnails/fiatth.png" alt="Banana">
            </a>
            <a href="images/fiat600.jpg" title="Apple">
                <img src="images/thumbnails/fiat600th.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/carabela-grafica.jpg" title="Banana">
                <img src="images/thumbnails/carabela-graficath.png" alt="Banana">
            </a>
            <a href="images/Estanciera.jpg" title="Apple">
                <img src="images/thumbnails/Estancierath.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/fiat.jpg" title="Banana">
                <img src="images/thumbnails/fiatth.png" alt="Banana">
            </a>
            <a href="images/fiat600.jpg" title="Apple">
                <img src="images/thumbnails/fiat600th.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/carabela-grafica.jpg" title="Banana">
                <img src="images/thumbnails/carabela-graficath.png" alt="Banana">
            </a>
            <a href="images/Estanciera.jpg" title="Apple">
                <img src="images/thumbnails/Estancierath.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/fiat.jpg" title="Banana">
                <img src="images/thumbnails/fiatth.png" alt="Banana">
            </a>
            <a href="images/fiat600.jpg" title="Apple">
                <img src="images/thumbnails/fiat600th.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/carabela-grafica.jpg" title="Banana">
                <img src="images/thumbnails/carabela-graficath.png" alt="Banana">
            </a>
            <a href="images/Estanciera.jpg" title="Apple">
                <img src="images/thumbnails/Estancierath.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
                <a href="images/fiat.jpg" title="Banana">
                <img src="images/thumbnails/fiatth.png" alt="Banana">
            </a>
            <a href="images/fiat600.jpg" title="Apple">
                <img src="images/thumbnails/fiat600th.png" alt="Apple">
            </a>
            <a href="images/falcon.jpg" title="Orange">
                <img src="images/thumbnails/falconth.png" alt="Orange">
            </a>
        </div><!--/div blueimp-gallery -->

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

我真的很感谢这个问题的帮助，我正处于截止日期，不能让它脱颖而出！提前谢谢！

Answer 1

我想你也复制了这一行

<div id="links">

是禁止的，这就是脚本

document.getElementById('links').onclick = function (event)

其他画廊失败

Answer 2

您使用blueimp.Gallery，请参阅https://github.com/blueimp/Gallery#container-ids-and-link-grouping

Answer 3

我在一个页面上设置两个图像库的方式是这样的：

（注意：我使用HAML表示简洁，但您可以在此处将其转换为HTML：http://htmltohaml.com/）

在你的HAML中：

/ first gallery
#citizen-kane-gallery.blueimp-gallery.blueimp-gallery-controls
  .slides
  %h3.title
  %a.prev ‹
  %a.next ›
  %a.close ×
  %a.play-pause
  %ol.indicator

#citizen-kane-images
  %a{href: "/images/kane/rose-bud.png", title: "Rose Bud"}
    %img{alt: "Rose Bud", src: "/images/kane/rose-bud-thumb.png"}
  %a{href: "/images/kane/xanadu.png", title: "Xanadu"}
    %img{alt: "Xanadu", src: "/images/kane/xanadu-thumb.png"}
  %a{href: "/images/kane/speech.png", title: "Speech"}
    %img{alt: "Speech", src: "/images/kane/speech-thumb.png"}


/ second gallery
#the-third-man-gallery.blueimp-gallery.blueimp-gallery-controls
  .slides
    %h3.title
    %a.prev ‹
    %a.next ›
    %a.close ×
    %a.play-pause
    %ol.indicator

#the-third-man-images
  %a{href: "/images/third-man/ferris-wheel.jpg", title: "Ferris Wheel"}
    %img{alt: "Ferris Wheel", src: "/images/third-man/ferris-wheel-thumb.jpg"}
  %a{href: "/images/third-man/orson.png", title: "Orson Welles"}
    %img{alt: "Orson Welles", src: "/images/third-man/orson-thumb.png"}
  %a{href: "/images/third-man/joseph.jpg", title: "Joseph Cotten"}
    %img{alt: "Joseph Cotton", src: "/images/third-man/joseph-thumb.jpg"}

在您的JavaScript中：

// first gallery
document.getElementById('citizen-kane-images').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  var link = target.src ? target.parentNode : target;
  var options = {
    index: link, 
    event: event,
    container : '#citizen-kane-gallery' // USE THE CONTAINER OPTION
  };
  var links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};

// second gallery
document.getElementById('the-third-man-images').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  var link = target.src ? target.parentNode : target;
  var options = {
    index : link, 
    event : event,
    container : '#the-third-man-gallery' // USE THE CONTAINER OPTION
  };
  var links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};

我还在这里找到了一些信息：https://github.com/blueimp/Gallery/issues/10

通过遵循这种模式，我认为可以根据需要添加任意数量的画廊。

希望这有帮助

Answer 4

正如文档中所述，您只需要添加具有不同ID的第二个库，并在数据库中提及它：

<div id="fruits">
    <a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits">
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits">
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
</div>
<div id="vegetables">
    <a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables">
        <img src="images/thumbnails/tomato.jpg" alt="Tomato">
    </a>
    <a href="images/potatoe.jpg" title="Potatoe" data-gallery="#blueimp-gallery-vegetables">
        <img src="images/thumbnails/potatoe.jpg" alt="Potatoe">
    </a>
</div>

Blueimp画廊为Bootstrap多个画廊问题

4 个答案: