CODEWITHSUNDEEP
jquerytwitter-bootstrapcssblueimp
Newbie
Newbie

Reputation: 19

Blueimp Image Gallery: More than one Gallery getting Collapsed

I am using Blueimp Image Gallery Library to create my gallery. I am having multiple galleries across several pages.

<div id="bangles">
    <a href="images/banles.jpg" title="banles" data-gallery>
        <img src="images/thumbnails/banles.jpg" alt="banles">
    </a>
    <a href="images/banles1.jpg" title="bangles1" data-gallery>
        <img src="images/thumbnails/banles1.jpg" alt="banles">
    </a>
    <a href="images/banles2.jpg" title="banles2" data-gallery>
    <img src="images/thumbnails/banles2.jpg" alt="banles">
    </a>
</div>


<div id="florals">
    <a href="images/florals.jpg" title="florals" data-gallery>
        <img src="images/thumbnails/florals.jpg" alt="florals">
    </a>
    <a href="images/florals1.jpg" title="florals1" data-gallery>
        <img src="images/thumbnails/florals1.jpg" alt="florals">
    </a>
    <a href="images/florals2.jpg" title="florals2" data-gallery>
    <img src="images/thumbnails/florals2.jpg" alt="florals">
    </a>
</div>

Here is my sample code. while i am trying open image gallery images collapsed across all.

I want to view each gallery in each page.

How do acheive this?

Upvotes: 0

Views: 376

Answers (1)

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20147

Simply modify your data-gallery tag with each gallery parent-ID

for eg: you have 2 gallery in your post, those id's are florals and bangles so you can modify data-gallery inside gallery preceded by #blueimp-gallery

1) <a data-gallery="#blueimp-gallery-bangles">

2) <a data-gallery="#blueimp-gallery-florals">

now you can able to open each gallery as you want.

Check out the Documentation on Github

Upvotes: 1

Related Questions