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?
From Blueimp Gallery Documentation - jQuery plugin setup:
I did run a quick test and added this code towards the top in the site..
..and this one a bit further down with plenty of rows and columns of various other html content in between..
..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
Hope all this information is useful to someone out there trying to possibly achieve a similar behaviour for a site.