Photoswipe avec la galerie justifiée

Question

J'ai réussi à mettre en place Photoswipe et aussi Justified Gallery dans mon projet Rails. Les deux travaillent très bien seuls mais j'ai du mal à les faire travailler ensemble.

Dans mon Photoswipe de configuration actuelle (par défaut) attend une hiérarchie de balises comme suit:

<figure> 
    <a href="...> 
    <img src=".../> 
    </a> 

Gallery Justified est configuré par défaut pour reconnaître un récipient avec un certain nombre de <a> balises avec une étiquette <img> imbriquée au sein comme celui-ci :

<div id="mygallery" > 
    <a href="...> 
     <img src=".../> 
    </a> 
    <a href="...> 
     <img src=".../> 
    </a> 
    <!-- other images... --> 
</div> 

Je aurais besoin Gallery Justifié reconnaître cette balise <figure>. Dans leur documentation, il vous dit il suffit d'ajouter l'option suivante:

selector: 'figure, div:not(.spinner)' 

Cette partie semble fonctionner très bien mais il est également mentionné qu'il est nécessaire d'étendre les règles CSS et c'est là où je suis coincé. Je m'attendrais à ce que l'ajout de sélecteurs > a avec un sélecteur > figure fasse l'affaire mais non. Ce sont les règles qui viennent avec la Galerie Justified:

.justified-gallery { 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
} 
.justified-gallery > a, 
.justified-gallery > div { 
    position: absolute; 
    display: inline-block; 
    overflow: hidden; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    /* IE8 or Earlier */ 
} 
.justified-gallery > a > img, 
.justified-gallery > div > img, 
.justified-gallery > a > a > img, 
.justified-gallery > div > a > img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: 0; 
    padding: 0; 
    border: none; 
} 
.justified-gallery > a > .caption, 
.justified-gallery > div > .caption { 
    display: none; 
    position: absolute; 
    bottom: 0; 
    padding: 5px; 
    background-color: #000000; 
    left: 0; 
    right: 0; 
    margin: 0; 
    color: white; 
    font-size: 12px; 
    font-weight: 300; 
    font-family: sans-serif; 
} 
.justified-gallery > a > .caption.caption-visible, 
.justified-gallery > div > .caption.caption-visible { 
    display: initial; 
    opacity: 0.7; 
    filter: "alpha(opacity=70)"; 
    /* IE8 or Earlier */ 
    -webkit-animation: justified-gallery-show-caption-animation 500ms 0 ease; 
    -moz-animation: justified-gallery-show-caption-animation 500ms 0 ease; 
    -ms-animation: justified-gallery-show-caption-animation 500ms 0 ease; 
} 
.justified-gallery > .entry-visible { 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    /* IE8 or Earlier */ 
    -webkit-animation: justified-gallery-show-entry-animation 500ms 0 ease; 
    -moz-animation: justified-gallery-show-entry-animation 500ms 0 ease; 
    -ms-animation: justified-gallery-show-entry-animation 500ms 0 ease; 
} 
.justified-gallery > .jg-filtered { 
    display: none; 
} 
.justified-gallery > .spinner { 
    position: absolute; 
    bottom: 0; 
    margin-left: -24px; 
    padding: 10px 0 10px 0; 
    left: 50%; 
    opacity: initial; 
    filter: initial; 
    overflow: initial; 
} 
.justified-gallery > .spinner > span { 
    display: inline-block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    /* IE8 or Earlier */ 
    width: 8px; 
    height: 8px; 
    margin: 0 4px 0 4px; 
    background-color: #000; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

Je joue autour avec cela pour un certain temps, mais je ne peux pas faire ce travail. Aussi, je n'ai pas été en mesure de trouver un bon exemple sur le net.

Quelqu'un l'a déjà fait ou sait comment le résoudre?

Answer 1

j'ai réussi à résoudre ce problème en utilisant exactement:

selector: 'a, figure:not(.spinner)' 

dans les options et en remplaçant tous les div sélecteurs dans le css avec figure. Alors

.justified-gallery > div > img, 

deviendrait:

.justified-gallery > figure > img,