Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
PrettyPhoto est une alternative à la lightbox et est assez facile à réaliser.

Cliquez sur les photos pour tester.

Image 1 Image 2 Image 2
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 (3)    ajouter un commentaire
Retour à l'accueil

Publicité

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Sommaires

Dernières Astuces

liste complète

Commentaires

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus