Créer un slideshow avec prettyPhoto

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