Magnific Popup

Dmitri Semenov est l'auteur du célèbre PhotoSwipe

Ce lightbox est responsive. Sa boite de dialogue met en avant la performance et procure la meilleure experience utilisateur avec n' importe quel appareil.

C' est une gallerie de photographies de © Marsel Van Oosten présentée sous forme de vignettes à agrandir. Voir page Magnific Popup du site de Semenov.

Lightbox gallery

Cela fonctionne comment?

Les vignettes ne devraient pas faire plus de 100 pixels en largeur ou en hauteur. Le mieux est qu' elles aient les mêmes dimensions (il faut bien soigner la présentation). Pour réduire vos photos en vignettes il y a beaucoup de logiciels qui peuvent faire ce travail comme paint.net, Xnview classic, XnViewMP, Gimp, mtPaint, etc. Les photos qui seront contenues dans le lightbox n' ont pas de limite largeur/hauteur mais cela serait bien qu' elles fassent plus de 500 pixels.

Fichiers nécessaires

Deux fichiers JS et un fichier CSS sont indispensables.
Le second fichier CSS peut vous être utile.

Mise en page

Dans la partie HEAD

CSS

<link href="css/magnific-popup.css" rel="stylesheet" >
<link href="css/mfp-css2.css" rel="stylesheet">
<style type="text/css">
/*Avoir un curseur en forme de loupe*/
img {border: none;
cursor:zoom-in;}
</style>

Si vous avez d' autres images que celles de votre gallerie sur la page web, pour ne pas avoir une petite loupe au survol de la souris sur ces images, ajouter un attribut class à chaque vignette que vous nommerez "vignette" par exemple

img.vignette {
border:none;cursor:zoom-in}

Dans la partie BODY

HTML

J' ajoute simplement une classe "photo", par exemple, à chaque photographie.
Vous pouvez nommer cet attribut class autrement.

<a href="https://.../fleur-1.jpg" title="Rose Trémière" class=photo>
<img src=".../vignette-1.jpg"></a>


<a href="https://.../fleur-2.jpg" title="Corbeille d' Or" class=photo>
<img src=".../vignette-2.jpg"></a>


<a href="https://.../fleur-3.jpg" title="Lys Royal" class=photo>
<img src=".../vignette-3.jpg" ></a>"

Pour une image individuelle utiliser l' attribut class="lightbox".

Javascript

Plus bas et avant la balise </body>

<script src="js/jquery-3.3.1.js"></script>

<script type="text/javascript" src="js/jquery-magnific-popup-2014.js"></script>
	
<script>
// Une seule image sans flèches de navigation
$(document).ready(function() {
$('.lightbox').magnificPopup({ 
	type: 'image'
gallery:{enable:false},
				
	});
});

//Gallerie plusieurs images
//Avec flèches de navigation
$(document).ready(function() {
$('.photo').magnificPopup({ 
	type: 'image',
gallery:{enabled:true},
				
	});
});

 </script> 

Bon et maintenant...

Prenez de bonnes photographies et présentez les dans une jolie page web avec Magnific Popup.

Tuto en anglais-us


Les plus téléchargés

Les DEBs XnViewMP-linux et les MSI IsoRecorder et Gpick sont actuellement les logiciels les plus demandés sur wubijacq.com


Annonce Google

Magnific Popup est inspiré du script original Lightbox2 de Lokesh Dhakar, open source lui aussi.

Lightbox2

Avec VisualLightBox pas besoin de savoir coder. VisualLightBox est gratuit pour un usage non commercial.

VisualLightBox

Annonce Google
Téléchargements:
Sites préférés de wubijacq.com
Sites de confiance Diffuseurs douteux
Annonce Google