CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapgallery
Peter
Peter

Reputation: 3

Bootstrap multiple galleries

I have three different modals and each of them contain some images. The code for the modal is like this

 <div class="modal fade" id="modal-photo" tabindex="-1" role="dialog" aria-   labelledby="album_modal" aria-hidden="true">
   <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <div class="col-md-4 col-sm-6">
                <div class="pic">
                    <a href="PathOfImage1" id="hrefId1" class="gallery-item">
                        <img class="img-responsive img-thumbnail" src="PathOfImage1" alt="">
                        <div class="img_overlay"></div>
                    </a>

                    <a href="PathOfImage2" id="hrefId2" class="gallery-item">
                        <img class="img-responsive img-thumbnail" src="PathOfImage2" alt="">
                        <div class="img_overlay"></div>
                    </a>

                    <a href="PathOfImage3" id="hrefId3" class="gallery-item">
                        <img class="img-responsive img-thumbnail" src="PathOfImage3" alt="">
                        <div class="img_overlay"></div>
                    </a>

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

When one of the three modals is shown and I click on an image inside it, then the gallery is appeared. The problem is that the gallery contains all images of all modals. If each modal has 4 images then the gallery will contain 12 images. I want to show in gallery only the images of the open modal (only 4 images at my example). Is there a way to manage that? Thanks in advance

Upvotes: 0

Views: 918

Answers (1)

JD_deepwater
JD_deepwater

Reputation: 25

That depends on your gallery script entirely. One way would be to initialize your gallery script when you open one particular modal using modal events.

$('#modal-photo').on('shown.bs.modal', function(evt) {
    var thisModal = $(evt.target);
    //init your gallery using images found in this modal only $('img', thisModal) 
});

There is too little information to help otherwise.

Maybe you have identical modal ids. If you have 3 modals, singular id name stands out. Or you have some parameter equal to all 3 modals by which your gallery looks up image urls.

Upvotes: 1

Related Questions