我有这个问题试图在一页中拥有多个画廊。我将 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ÑO</h3>
<p class="lead">
</div>
<h3 class="text-center"> Gráfica Vehicular</h3>
<h4 class="text-center">Hacer clic sobre las imá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>
我非常感谢在这个问题上的帮助,我在最后期限内,无法摆脱它!提前致谢!