2

我有这个问题试图在一页中拥有多个画廊。我将 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">‹&lt;/a>
            <a class="next">›&lt;/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>

我非常感谢在这个问题上的帮助，我在最后期限内，无法摆脱它！提前致谢！

4

4 回答 4

2

我想你也复制了这条线 

<div id="links">

这是被禁止的，这使得脚本

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

其他画廊失败

于 2013-11-03T18:50:13.140 回答
2

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

于 2014-03-15T17:25:30.447 回答
0

我在一个页面上拥有两个图片库的方式是这样的：

（注意：为了简洁起见，我使用 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

通过遵循这种模式，我假设可以根据需要添加尽可能多的画廊。

希望这可以帮助

于 2014-02-19T09:43:13.177 回答
0

如文档中所述，您只需添加具有不同 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>
于 2016-05-05T10:11:10.923 回答