Galeries, Diaporamas & SlideShows

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

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érents 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 enregistrez 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 suivre, à 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ésentes 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) Remplacez 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 CSS/lightbox.css.

Voir l'exemple





A voir aussi



Cette page a été vue 16648 fois