Image de l'article jsPhotoViewer diaporama javascript facile

jsPhotoViewer diaporama javascript facile

Télécharger jsPhotoViewer.js

Historique

18/10/2016 : version 1.0.1

Le diaporama exploite tout type de balise. Auparavant le code cherchait des blooc div, désormais il suffit d'avoir les attribut data-img-id.
version 1.0 : el = $("div[data-img-id='"+aId+"']");
version 1.0.1 : el = $("*[data-img-id='"+aId+"']");

20/02/2016 : version 1.0

Installation

Aucune initialisation, pas de liste à paramétrer, pas d'objet à instancier. Intégrez le fichier jsPhotoViewer.js et jQuery à votre document HTML :

<script src="jsPhotoViewer-1.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Au chargement jsPhotoViewer.js va ajouter automatiquement le bloc et les éléments permettant l'affichage et la navigation du diaporama.

Comment définir la liste d'images ?

Plutôt que d'utiliser une liste (array, JSON, etc), le code utilise des attributs HTML data-* :

Utilisez la structure que vous souhaitez pour vos vignettes. L'essentiel étant de paramétrer les attributs data-* pour chaque vignette.

<div data-img-id="1" data-img-src="https://blog.niap3d.com/img/jsPhotoViewer/grandePhoto.jpg" data-img-title="Le titre de l'image" data-img-info="">
	<img src="https://blog.niap3d.com/img/jsPhotoViewer/petitePhoto.jpg" width="200" height="150" alt="Le titre de l'image" />
</div>

Pour lancer le diaporama vous devez appeller la fonction jsPhotoViewerShow. La fonction attend deux paramètres :

Par exemple pour agrandir une image seule :

<div data-img-id="1" data-img-src="https://blog.niap3d.com/img/jsPhotoViewer/grandePhoto.jpg" data-img-title="Ma super photo" data-img-info="">
	<a onclick="jsPhotoViewerShow(1);return false;" href="https://blog.niap3d.com/img/jsPhotoViewer/cupcake-252805_1280.jpg" title="Afficher l'image Ma super photo">
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/petitePhoto.jpg" width="200" height="150" alt="Le titre de l'image" />
	</a>
</div>

Vous pouvez simplifier votre code en supprimant la balise <a> et en ajoutant onclick sur l'image directement, par exemple :

<div data-img-id="1" data-img-src="https://blog.niap3d.com/img/jsPhotoViewer/grandePhoto.jpg" data-img-title="Le titre de l'image" data-img-info="">
	<img onclick="jsPhotoViewerShow(1);" src="https://blog.niap3d.com/img/jsPhotoViewer/petitePhoto.jpg" width="200" height="150" alt="Le titre de l'image" />
</div>

Mais je vous déconseille cette écriture.

Exemples

1) Une image seule

Animateur Bad François

427181

2) Exemple de Diaporama : Les saisons

Un exemple du diaporama. jsPhotoViewer.js boucle automatiquement à la première ou à la dernière image.

3) Second diaporama

Un second diaporama pour la forme et pour montrer que les deux diaporamas sont indépendants. Il suffit de placer les ensembles de vignettes dans deux blocs parents différents.

CSS

Le visualiseur est entièrement stylisé en CSS (sauf les dimensions de l'image qui sont calculées avec jQuery) :

/* diaporama : visualiseur : DEBUT */
/* arrière plan */
#jsPhotoViewer{
	display: none;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	text-align: center;
}
/* texte de chargement */
#jsPhotoViewer h3{
	position: absolute;
	top: 5%;
	right: 5%;
	color: #ffffff;
	font-size: 40px;
	text-align: right;
	text-transform: uppercase;
}
/* la photo */
#jsPhotoViewer img{
	display: none;
	position: relative;
	z-index: 2002;
	margin: auto;
	border: 3px solid #555555;
	box-shadow: 0 0 10px 0 #000000;
	cursor: pointer;
}
/* titre */
#jsPhotoViewer h2{
	position: absolute;
	z-index: 2001;
	width: 100%;
	margin: 0;
	padding: 1% 0;
	font-size: 20px;
	text-align: center;
	color: #fff;
}
/* info */
#jsPhotoViewer p{
	display: none;
	visibility: hidden;
}
/* navigation */
#jsPhotoViewer li{
	display: inline;
}
#jsPhotoViewer li a{
	position: absolute;
	top: 45%;
	width: 10%;
	height: 40px;
	padding: 0;
	color: #fff;
	font-size: 60px;
	opacity: 0.6;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}
#jsPhotoViewer li a span{
	display: none;
}
#jsPhotoViewerBtPrev:hover, #jsPhotoViewerBtNext:hover{
	opacity: 1;
}
#jsPhotoViewerBtPrev {
	left: 0;
}
#jsPhotoViewerBtPrev:before{
	content: "\2199";
}
#jsPhotoViewerBtNext{
	right: 0;
}
#jsPhotoViewerBtNext:before{
	content: "\2197";
}
/* diaporama : visualiseur : FIN */

A vous de jouer

Vous avez des questions ? N'hésitez pas à les poser dans les commentaires.

Télécharger jsPhotoViewer.js

 

Image Viewer