javascript - Bootstrap 多画廊问题的 Blueimp 画廊

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) 

其他画廊失败