2

1 つのページに複数のギャラリーを表示しようとすると、この問題が発生します。ページには Twitter BOOTSTRAP を、画像には blueimp Gallery を使用しています。実際には、(テスト目的で) 作業中のギャラリーを複製すると、最終的に 1 つのギャラリー (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 に答える
0

1 ページに 2 つの画像ギャラリーを配置する方法は次のとおりです。

(注: 簡潔にするために 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 に答える