CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapgalleryblueimp
user2796461
user2796461

Reputation: 21

Blueimp gallery for Bootstrap multiple galleries issue

I have this problem trying to have more than one gallery in one single page. I am using Twitter BOOTSTRAP for the page and blueimp Gallery for the images. The fact is when I duplicate (for testing purposes) the working gallery, I end up with one gallery (out of 3) showing the lightbox interface, but the image dimmed down almost to black, and the rest of the 2 galleries not having lightbox action at all. This is the code I am using (of course I have the call to the styling in the header, and the call to the Js at the bottom of the page):

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

I would really appreciate help in this issue, I am on a deadline and can't make head or tail out of it! Thanks in advance!

Upvotes: 2

Views: 7690

Answers (4)

Marouane Gazanayi
Marouane Gazanayi

Reputation: 5183

As said in the documentation, you just need to add your second gallery with a different id and mention it in the data-gallery as this:

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

Upvotes: 0

user3423769
user3423769

Reputation: 21

You use blueimp.Gallery, so see https://github.com/blueimp/Gallery#container-ids-and-link-grouping

Upvotes: 2

Mark Mckelvie
Mark Mckelvie

Reputation: 343

The way I went about having two image galleries on a single page is like so:

(note: I'm using HAML for terseness, but you can convert it to HTML here: http://htmltohaml.com/)

In your 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"}

In your 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);
};

I also found some info here: https://github.com/blueimp/Gallery/issues/10

By following this pattern, I would assume it's possible to add as many galleries as needed.

Hope this helps

Upvotes: 0

dimkin
dimkin

Reputation: 98

I think You also duplicating this line 

<div id="links">

which is prohibited, and this makes script

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

fail for other galleries

Upvotes: 2

Related Questions