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 to image files.

For a project I have images scattered all over the site with text in between those images.

I would like to be able to click on any of the images and have the modal/gallery come up as well as then being able to browse through all images that I have on the site.

As an example I am taking a basic structure that can be seen here Start Bootstrap 1 Col Portfolio. Looking at this structure I would like to be able to click on any of the 700 x 300 image placeholders and trigger the modal/gallery each time.

Once the modal/gallery shows, I would then link to be able to browse through all images that can be seen on the site or that I decide to have included in the gallery.

Would this be possible by simply having multiple lists of links on the site between the rest of the html structure and each time adding the data-gallery attribute?

It would be great to know if this functionality is possible to achieve before I start working with the Bootstrap Image Gallery.

I fear that this is not possible since the list of images is wrapped in a div with id, the id being links and having multiple divs with the same id is not possible in html.

How else can I trigger the modal/gallery while still having the images in various places on the site instead of in a thumbnail gallery type arrangement?

回答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.

来源：https://stackoverflow.com/questions/28818995/bootstrap-image-gallery-html-between-list-of-links-to-image-files