Galeries, Diaporamas & SlideShows

1) Mettre une simple image avec l'effet - Lightbox 2.04

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Table des matières
  1. Partie 1- Structure html
  2. Partie 2 - Dans le head
  3. Partie 3 - Dans le body
  4. Astuce
  5. Voir l'exemple
  6. A voir aussi
Içi nous allons traiter l'effet lightbox sur une simple image. Le but étant de comprendre comment on procède avec les différent fichiers de l'archive que vous allez télécharger : Lightbox simple images.

Il n'y aura pas le fichier index.html, car c'est VOUS qui allez le créer !

Partie 1- Structure html



Dans le dossier que vous venez de télécharger, commencez par ouvrir un nouveau document texte avec le bloc note. Que vous allez renommer index.html et enregistrer de suite, dans la foulée.

Dans le document, copier coller ceci :

Code HTML :
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
 
<body>
 
</body>
 
</html>
 


Partie 2 - Dans le head



Dans la balise <head>...</head>, En dessous de <title>Nouvelle page 1</title>, copier/coller ceci :

Code HTML :
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
 


Vous allez inclure le code qui va suive, à la suite en copier/coller. C'est le "Lightbox.CSS" qui va mettre en forme l'effet lightbox sur l'image.

Code HTML :
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


Partie 3 - Dans le body



Dans la balise <body>...</body>, copier/coller ceci :

Code HTML :
<a href="images/image-1.jpg" rel="lightbox" title="La légende de l'image ici"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
 


Les images sont déjà présente dans le dossier "images". Miniatures aussi ...

C'est l'attribut rel="lightbox" inséré dans le lien image qui va déclencher les JS placés précédemment dans la balise head.

1) Remplacer image-1.jpg (image large) etc ... par les vôtres. Et faites de même pour les thumb-1.jpg (miniatures en 100x40px).

2) title="Légende facultative ." : Cela vous permettra de mettre une légende à votre image.

Astuce



Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc... Dans le dossier JS/lightbox.css.

Voir l'exemple





A voir aussi