CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapphotoswipe
N P
N P

Reputation: 2619

Photoswipe gallery with Bootstrap

I am attempting to create a gallery for my site using.

http://photoswipe.com/

I am currently using Bootstrap to allow my site to be responsive. I want to create one gallery that I can have around 12 pictures on. I've followed the example code for Photoswipe but if I put rows around each 4 images to create the row it breaks the gallery.

http://photoswipe.com/documentation/getting-started.html

I then created 4 separate rows with the same gallery class but then it just creates 4 separate galleries.

The next thing I tried was to create one massive row and then just add my col-md-3's inside the huge row and hoped they would style correctly however it came out like this.

[enter image description here][1

<div class="my-gallery row" itemscope itemtype="http://schema.org/ImageGallery">

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="col-md-3 gallery-img">
          <a href="img/gallery/gallery1.jpeg" itemprop="contentUrl" data-size="1024x1024">
            <img src="img/gallery/gallery1.jpeg" itemprop="thumbnail" alt="Image description" class="img-responsive"/>
        </a>
          <figcaption itemprop="caption description">Image caption 1</figcaption>
        </figure>

Here is my gallery HTML.

https://pastebin.com/0e850dZx

Has anyone else come across this problem?

Upvotes: 0

Views: 2724

Answers (1)

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20147

you can use viewerJS image viewer https://fengyuanchen.github.io/viewerjs/

or Blueimp image gallery https://blueimp.github.io/Gallery/

both are responsive small changes only needed.. you dont need to worry about columns / placing images and all. simple and powerful image viewing libraries

Upvotes: 1

Related Questions