Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par vermine

16PARTAGES

1  0 
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. ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de vermine
Responsable Jeux-Concours https://www.developpez.com
Le 20/03/2014 à 8:36
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).
2  0 
Avatar de vermine
Responsable Jeux-Concours https://www.developpez.com
Le 11/04/2014 à 15:36
A mon avis tout le nécessaire se trouve sur GitHub et sur le lien Build Tool de la page d'accueil du site.
1  0 
Avatar de Gaby22
Candidat au Club https://www.developpez.com
Le 19/06/2013 à 13:54
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.
0  0 
Avatar de lechatpotte
Nouveau Candidat au Club https://www.developpez.com
Le 19/06/2013 à 15:51
Et bien, la première différence c'est que pour une utilisation commerciale, Shadowbox est payant .
0  0 
Avatar de Décibel
Membre habitué https://www.developpez.com
Le 20/03/2014 à 2:33
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 !
0  0 
Avatar de Décibel
Membre habitué https://www.developpez.com
Le 11/04/2014 à 16:43
Merci je me suis sorti tout seul...
0  0 
Avatar de Décibel
Membre habitué https://www.developpez.com
Le 20/03/2014 à 9:05
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....
0  1