Javascript Girl
  1. Javascript Girl
  3. Comment définir une galerie de contenu en ligne dans HTML pour une utilisation avec Magnific-Popup?
Intereting Posts
Utilisation de la molette de la souris pour faire défiler une fenêtre du navigateur horizontalement Déterminez l'index de position d'un caractère dans un élément HTML lorsque vous cliquez Comment puis-je convertir les structures de données ruby ​​en structures de données javascript avec .js.erb? Supprimer `Expected un identifiant et plutôt vu 'default' (un mot réservé)` dans JSLint avec Mongoose Les navigateurs de bureau peuvent-ils détecter lorsque l'ordinateur reprend du sommeil? Obtenir la taille de la police calculée pour l'élément DOM dans JS Liste JavaScript des exceptions Comment obtenir des paramètres d'URL avec Javascript? Obtenir l'URL de la dernière page de l'objet d'historique – navigateur croisé? Comment récupérer la valeur de l'ID dans le menu kendo Angular 2 runOutsideAngular change toujours l'interface utilisateur Target _blank dans tous les liens Comment eval n'a-t-il pas accès aux variables scopées sous une déclaration? Redimensionner dynamiquement la taille de la police pour s'adapter à la taille du conteneur Comment ajouter une info-bulle sur l'événement mouseover sur les noeuds en graphique avec cytoscape.js

Comment définir une galerie de contenu en ligne dans HTML pour une utilisation avec Magnific-Popup?

J'ai plusieurs galeries sur une page qui sont lancées à partir de leurs boutons respectifs. J'aime l'idée de définir le balisage pour les galeries dans la page aux côtés du bouton, puis .mfp-hide cache en utilisant le .mfp-hide . Cependant, je ne peux pas activer le popup lorsque j'ajoute le mot-clé delegate (il le fait autrement).

Voici le code que j'ai jusqu'ici,

HTML 

 <div id="gallery1" class="mfp-hide"> <div class="slide"> ... some content for slide 1 ... </div> <div class="slide"> ... some content for slide 2 ... </div> </div> <p>Blah blah <a href="#gallery1" class="open-gallery-link">view gallery one</a> blah blah ...</p>

Javascript 

 $('.open-gallery-link').magnificPopup({ type:'inline', delegate:'.slide', gallery: { enabled: true } });

Cela ne fonctionne pas de cette façon, le delegate cherche toujours des enfants de l'élément DOM cible (dans votre cas, les enfants de l'élément .open-gallery-link ).

Vous pouvez simplement analyser tout via jQuery et ouvrir la galerie via API: 

 $('.open-gallery-link').click(function() { var items = []; $( $(this).attr('href') ).find('.slide').each(function() { items.push( { src: $(this) } ); }); $.magnificPopup.open({ items:items, gallery: { enabled: true } }); });

http://codepen.io/dimsemenov/pen/zvLny