GRATUIT

Vos offres d'emploi informatique

Développeurs, chefs de projets, ingénieurs, informaticiens
Postez gratuitement vos offres d'emploi ici visibles par 4 000 000 de visiteurs uniques par mois

emploi.developpez.com

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

Le , par vermine, Responsable JavaScript & AJAX
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. ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Gaby22 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.
Avatar de lechatpotte 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 .
Avatar de Décibel 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 !
Avatar de vermine vermine - Responsable JavaScript & AJAX 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).
Avatar de Décibel 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....
Avatar de vermine vermine - Responsable JavaScript & AJAX 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.
Avatar de Décibel Décibel - Membre habitué https://www.developpez.com
le 11/04/2014 à 16:43
Merci je me suis sorti tout seul...
Offres d'emploi IT
Développeur web scala et javascript
Fontyou - Ile de France - Paris (75009)
Développeur javascript innovation first
Adequat Tertiaire - Rhône Alpes - Grenoble (38000)
Développeur javascript
AMETIX - Ile de France - Paris (75000)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -