Photoswipe galerie avec Bootstrap

Question

Je tente de créer une galerie pour mon site en utilisant.

http://photoswipe.com/

J'utilise actuellement Bootstrap pour permettre mon site d'être réactif. Je veux créer une galerie sur laquelle je peux avoir environ 12 photos. J'ai suivi le code d'exemple pour Photoswipe mais si je place des rangées autour de chaque 4 images pour créer la rangée il casse la galerie.

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

J'ai ensuite créé 4 lignes distinctes avec la même classe de la galerie, mais il crée seulement 4 galeries séparées. La prochaine chose que j'ai essayée a été de créer une rangée massive et d'ajouter juste mes col-md-3 à l'intérieur de la rangée énorme et j'espérais qu'ils auraient un style correct mais il est sorti comme ça.

[] [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> 

Voici ma galerie HTML.

https://pastebin.com/0e850dZx

Quelqu'un at-il rencontré ce problème?

Answer 1

vous pouvez utiliser la visionneuse d'images viewerJS https://fengyuanchen.github.io/viewerjs/

ou Blueimp galerie d'images https://blueimp.github.io/Gallery/

les deux sont sensibles petits changements nécessaires que .. vous ne devez vous soucier de colonnes/placer des images et tous. images simples et puissantes de visualisation bibliothèques