PrettyPhoto est une alternative à la lightbox et est assez facile à réaliser.
Cliquez sur les photos pour tester.
Première étape :
Allez sur
PrettyPhoto
Cliquez sur
Compressed version (Script: 8kb / CSS: 3.6kb)
Allez sur
Jquery
Cliquez sur
1.2.6 (Release Notes) - Minified
Vous venez d'enregistrer des fichiers .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR - Extraire Vers
Deuxième étape :
Dans l'administration de votre blog - Documents - Autres fichiers :
vous créez un répertoire nommé : prettyphoto
dans lequel vous créez un sous-répertoire nommé : photos
dans ce sous répertoire, vous uploadez les photos suivantes :
bl.gif
br.gif
btnClose.gif
btnNext.gif
btnPrevious.gif
loader.gif
tl.gif
tr.gif
Vous notez leur adresse
Troisième étape :
Sur votre PC :
vous ouvrez le bloc-Note
vous appelez le fichier prettyPhoto.css
vous modifiez le chemin des photos (vous avez noté leur adresse lors de la deuxième étape)
vous enregistrez sous le même nom
Quatrième étape :
Dans l'administration de votre blog - Documents - Autres fichiers - prettyphoto
vous créez un sous-répertoire nommé : css
dans lequel vous enregistrez le fichier prettyphoto.css (modifié lors de la troisième étape)
vous notez son adresse
vous créez un sous-répertoire nommé : js
dans lequel vous enregistrez les fichiers :
prettyphoto.js
jquery-1.2.6.min.js
vous notez leur adresse
Cinquième étape :
Lors de la création de votre diaporama, vous collez en HTML
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prettyphoto/js/jquery-1.2.6.min.js " type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prettyphoto/css/prettyPhoto.css " type="text/css" media="screen"
title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prettyphoto/js/prettyPhoto.js " type="text/javascript" charset="utf-8"></script>
En rouge, vous remplacez avec vos propres adresses de fichiers.
Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses.
Vous placez maintenant vos images, en collant en HTML
<table border="0" align="center">
<tbody>
<tr>
<td><a href="adresse de l'image1 grande taille " rel="prettyOverlay[gallery]" title="Description de
l'image1 "><img src="adresse de l'image1 miniature " width="60" height="60" alt="Image 1 " /></a>
</td>
<td><a href="adresse de l'image2 grande taille " rel="prettyOverlay[gallery]" title="Description de
l'image2 "><img src="adresse de l'image2 miniature " width="60" height="60" alt="Image 2 " /></a>
</td>
<td><a href="adresse de l'image3 grande taille " rel="prettyOverlay[gallery]" title="Description de
l'image3 "><img src="adresse de l'image3 miniature " width="60" height="60" alt="Image 3 " /></a>
</td>
</tr>
</tbody>
</table>
En bleu, vous remplacez avec les adresses de vos photos
En vert, les descriptions des photos
Commentaires