Accueil    Codes    Affichage de pages web en lightbox
 



Affichage de pages web en lightbox  Affichage de pages web en lightbox




Présentation



L'affichage d'images ou la mise en place de galleries photos est un sujet récurrent dans la création de nombreux site. Beaucoup de solutions existent, spécialement avec l'utilisation de lightbox, et l'une d'elle est l'utilisation de l'outil "fancybox" basé sur du javascript, spécifiquement jquery et permettant de rapidement mettre en place des effets d'affichage d'images professionnels et intuitifs.

Le principe est d'afficher des vignettes des images dans la page courante et de faire référence à l'image réelle par le mécanisme javascript de fancybox qui propose différentes animations facilement paramétrables.

Nous allons voir plus en détail comment mettre en place ce mécanisme, mais voici tout d'abord un premier exemple illustrant cette description.
cliquez sur la vignette pour afficher l'image :

      exemple1


Implémentation de FancyBox



Voici les quatre étapes à suivre pour effectuer l'implémentation de fancybox :

Etape 1 - Intégration du dossier contenant les composants fancybox dans le projet


Etape 2 - Références aux scripts et à la feuille de style dans le document html :


En partant du principe que ces scripts sont dans un dossier ommé fancybox, les déclarations à ajouter dans la partie <head> du document sont les suivantes (à adapter en fonction du chemin relatif) :

<script type="text/javascript" src="./fancybox/jquery-1.4.3.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />


Etape 3 - Définition et mise en place des images (miniatures et réelles) dans le document :

Pour une image simple, il faut tout d'abord déclarer une balise <img> pointant vers la miniature dans le document, puis l'encadrer par la balise <a> pour la transformer en lien cliquable. C'est au niveau de ce lien dans l'attribut "href" que l'on référencie l'image réelle à afficher.
Finalement il faut donner un identifiant à la balise <a> qui sera utilisé lors de la dernière étape pour implémenter le comportement d'affichage de l'image en javascript.
Il est également possible de déclarer l'attribut "title" qui sera utilisé comme titre de l'image s'il est valorisé.



<a id="exImg2" href="image-reelle.jpg">
   <img alt="exemple" src="image-miniature.jpg" /></a>
<a id="exImg3" href="image-reelle.jpg" title="Exemple de titre">
   <img alt="exemple" src="image-miniature.jpg" /></a>

exemple       exemple


Etape 4 - Initialisation du comportement des images présentes dans le document :

Cette étape correspond à l'implémentation javascript des éléments. Il se fait dans la partie <head> en dessous des déclarations des différents scripts décris à l'étape 1.
Elle varie suivant les effets que l'on souhaite appliquer :
- overlayShow : affichage grisé de l'arrière plan derrière l'image (par défaut)
- transitionIn : transition lors de l'affichage de l'image (par défaut )
- transitionOut : transition lors de la fermeture de l'image
- titlePosition : mise en page du titre



Définition d'une ouverture par défaut, sans paramètres :

$("a#exemple1").fancybox();
associé à l'élément :
<a id="exemple1" href="image-reelle.jpg"><img alt="exemple" src="image-miniature.jpg" /></a>

Définition d'une ouverture sans grisage de l'arrière plan et des effets de transition à l'ouverture et à la fermeture de l'image :

<script type="text/javascript">
$(document).ready(function() {
   $("a#exemple2").fancybox({
      'overlayShow' : false,
      'transitionIn' : 'elastic',
      'transitionOut' : 'elastic'
   });
});
</script>

Associé à l'élément :

<a id="exemple2" href="image-reelle.jpg" title="Exemple de titre"><img alt="exemple" src="image-miniature.jpg" /></a>

Rendu :

exemple       exemple



Exemple de diaporama



Affichage d'un diaporama composé de différentes images :
il est possible de cliquer sur les fléches latérales pour aller d'une image à l'autre ou même d'utiliser le scrolling de la souris.
Pour spécifier que l'on souhaite grouper des images dans un diaporama, il faut valoriser l'attribut "rel" de la balise <a> et lui affecter une valeur commune pour toutes les images devant appartenir au diaporama. Il n'est cependant pas utile de donner une valeur à son attribut "id".



Implémentation javascript des éléments du diaporama (implémentation unique pour tous les éléments) :

<script type="text/javascript">
$(document).ready(function() {
   $('a[rel=diaporama_group]').fancybox({
      'transitionIn' : 'elastic',
      'transitionOut' : 'none',
      'titlePosition' : 'over',
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
      return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
      }
   });
});
</script>


Déclaration des éléments du diaporama dans la page :
<a rel="diaporama_group" href="image-exemple1.jpg" title="titre">
   <img alt="diapo-exemple" src="image-mini-exemple1.jpg" /></a>
<a rel="diaporama_group" href="image-exemple2.jpg" title="titre">
   <img alt="diapo-exemple" src="image-mini-exemple2.jpg" /></a>
<a rel="diaporama_group" href="image-exemple3.jpg" title="titre">
   <img alt="diapo-exemple" src="image-mini-exemple3.jpg" /></a>
<a rel="diaporama_group" href="image-exemple4.jpg" title="titre">
   <img alt="diapo-exemple" src="image-mini-exemple4.jpg" /></a>

Rendu :

                       




Remarque : Il est aussi possible d'utiliser fancybox pour effectuer l'affichage de pages web. Consultez l'article relatif à l'affichage d'une page web en lightbox.



» Site de l'éditeur fancybox


TelechargementTélécharger l'exemple de lightbox