Discussion :

[vermine]

Magnific Popup : plugin jQuery de popup « responsive »
pour présenter au mieux vos images, vidéos, messages d'erreur, etc.


Magnific Popup est un plugin jQuery pour créer des responsive lightbox. Il est compatible avec Zepto.js (Zepto.js est une bibliothèque JavaScript minimaliste pour les navigateurs modernes) et il devrait également fonctionner avec les périphériques mobiles. Ce plugin est modulaire et dispose d'un outil de construction afin que vous puissiez générer une version qui inclut uniquement les fonctionnalités dont vous avez besoin. L'outil Sass est utilisé pour le CSS, donc vous pouvez personnaliser facilement les styles en fonction de votre projet.

Les raccourcis clavier sont pris en charge, les touches fléchées et la touche escape permettent la navigation dans les diaporamas. Une grande partie du travail se fait en CSS (on y gagne en rapidité), ce qui signifie que les écrans High DPI (Dots per inch, Retina) sont pris en charge.

La popup créée a un moteur de micro template extensible qui réutilise des éléments du DOM existants, ce qui est particulièrement utile lorsque vos popups ont un même modèle.

Grâce à ce plugin, vous pouvez afficher (et pourquoi pas avec une transition CSS) :

• une image ;
• un diaporama ;
• une vidéo ;
• une carte ;
• un formulaire ;
• le résultat d'un appel AJAX ;
• un message d'erreur.

Site offciel.
Documentation.
D'après un article sur DailyJS. Cet article parle également de blend.js.


Et vous ?

Que pensez-vous de ce plugin ?
Qu'utilisez-vous dans vos sites pour afficher des images, des vidéos, etc. ?

[Gaby22]

Sinon il existe aussi depuis très longtemps le plugin shadowbox qui fait la même chose (en tout cas de ce que je vois dans cette présentation) et qui est compatible avec un tas de framework JS (jQuery, Prototype..) et fonctionne également en standalone.

Je sais pas lequel est le mieux, ça serait sympa un comparatif.

[lechatpotte]

Et bien, la première différence c'est que pour une utilisation commerciale, Shadowbox est payant .

[Décibel]

Bonjour,

Je cherche une démo "simple" de ce code avec la possibilité de télécharger les js et le css, j'ai cherché mais sans trouver...

Merci à vous !

[vermine]

Sur la page d'accueil, vous avez une partie "Examples" avec quelques blocs d'exemples. Chaque exemple à un titre sur lequel vous pouvez cliquer. Vous arrivez alors sur les bouts de codes employés (JavaScript + HTML + CSS).

[Décibel]

Pourquoi se donner tant de mal à expliquer des choses et ne mettre que des bouts de code, un peu comme si on voulait en garder pour soi...
Du coup, j'ai essayé de remonter la chose sans y arriver et en passant beaucoup de temps, bof bof....
C'est la Lightbox galleryview qui m'intéresse et je n'ai pas trouvé le css, faut-il mettre quelque chose dans le body pour démarrer le plugin, ou est le plugin....

[vermine]

A mon avis tout le nécessaire se trouve sur GitHub et sur le lien Build Tool de la page d'accueil du site.

[Décibel]

Merci je me suis sorti tout seul...