Bootstrap Image Gallery: Html Between List Of Links To Image Files?

Looking at the demo here Bootstrap Image Gallery Demo and the documentation here Bootstrap Image Gallery on GitHub I would like to know if I can add html between the list of links

Solution 1:

From Blueimp Gallery Documentation - jQuery plugin setup:

The blueimp Gallery jQuery plugin registers a global click handler to open links with data-gallery attribute in the Gallery lightbox.

I did run a quick test and added this code towards the top in the site..

<div class="container">

    <div class="row">

        <div class="col-lg-12">

            <a href="img/Orange.JPG" title="Orange" data-gallery>
                <img class="img-responsive" src="img/Orange.JPG" alt="Orange">
            </a>

        </div>
    </div>
</div>

..and this one a bit further down with plenty of rows and columns of various other html content in between..

<div class="container">

    <div class="row">

        <div class="col-lg-12">

            <a href="img/Cucumber.JPG" title="Cucumber" data-gallery>
                <img class="img-responsive" src="img/Cucumber.JPG" alt="Cucumber">
            </a>

        </div>
    </div>
</div>

..and it works, completely without having to wrap it inside a div with id links.

So this means that one simply has to add the attribute data-gallery to any image link in the site and it will open in the modal/gallery as well as show all the images with this attribute in the modal/gallery regardless of their position in the html document.

Related : What I find super useful is that one can group images with the data-gallery attribute, naming the attribute whatever one pleases.

Like this sets of images can be displayed in one group and sets of other images are displayed in another group, also completely regardless of their position in the html document.

Reference : Blueimp Gallery Documentation jQuery Plugin - Container ids and link grouping

<!-- As mentioned beforehand, the wrapping div with and an id
for the list of image links does not have to be present for
the modal/gallery to show the correct image -->
<div id="fruits">


<!-- What is important, is to have the data-gallery attribute
and giving thi attribute to all the images one wants in one 
set of images to be displayed in the modal/gallery -->
    <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>


<!-- Not really necessary if one has images spread all over
the html document but still likes to display them in the gallery --> 
<div id="vegetables">


<!-- Here a different data-gallery attribute is being given
to different images, meaning they will not show in the same
group as the images with the #blueimp-gallery-fruits attribute -->
    <a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables">
        <img src="images/thumbnails/tomato.jpg" alt="Tomato">
    </a>
    <a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables">
        <img src="images/thumbnails/onion.jpg" alt="Onion">
    </a>
</div>

Hope all this information is useful to someone out there trying to possibly achieve a similar behaviour for a site.