Les plugins du site :



fancy box


Installation du plugin sur le site


  1. cliquer sur le bouton FancyBox ci-dessus puis télécharger le fichier zip de la dernière version ;
  2. extraire l'archive. Pour ma part j'ai obtenu un répertoire "fancyapps-fancyBox-18d1712" ;
  3. copier le contenu des sous-répertoires "lib" et "source" dans le répertoire "js" créé à la racine du site ;
  4. copier le code suivant dans l'en-tête (head) de votre fichier html qui va utiliser le plugin :


Utilisation du plugin

Nous avons des exemples d'utilisation qui accompagnent le plugin. Il suffit alors d'éditer le fichier "index.html" du sous-répertoire "demo" obtenu après extraction de l'archive pour comprendre l'utilisation du plugin. Il est peut-être souhaitable aussi de visiter le site de Fancybox.

Pour adapter la présentation j'ai modifier :

  1. les images "fancybox_buttons.png" et "fancybox_overlay.png" ;
  2. le fichier "jquery.fancybox-buttons.js" pour éviter l'affichage des boutons de modification de taille et traduire "previous", "next", "slideshow" et "close" ;
  3. le fichier "jquery.fancybox-buttons.css" pour le positionnement et le style des boutons ;
  4. le fichier "jquery.fancybox-thumbs.css" pour le positionnement et le style des vignettes ;
  5. le fichier "jquery.fancybox.css" pour le style de la fenêtre fancybox.

N. B. : Vous avez la possibilité d'éditer facilement ces fichiers avec les outils "Développeur Web" de Firefox.


2 - ResponsiNav

J'ai actualisé le menu pour le rendre responsive.

Installation du plugin sur le site


  1. Suivre le lien ResponsiNav ci-dessus et télécharger le fichier zip de la dernière version ;
  2. extraire l'archive. Pour ma part j'ai obtenu un répertoire "Responsinav-master" ;
  3. copier le sous-répertoires "css" à la racine du site (j'ai adapté les règles css et complété ces règles pour obtenir la feuille de style du site), et copier le fichier "responsinav.js" du sous-répertoire "js" dans le répertoire "js" créé à la racine du site
  4. copier le code suivant à la fin du fichier html qui va utiliser le plugin :

3 - Sticky

Lors du défilement de la page, ce plugin est utile pour conserver le menu en haut de page.

Installation du plugin sur le site


  1. Suivre le lien Sticky ci-dessus et télécharger le fichier zip de la dernière version ;
  2. extraire l'archive. Pour ma part j'ai obtenu un répertoire "garand-sticky-5cfc20c" ;
  3. copier le fichier "jquery.sticky.js" de ce répertoire dans le répertoire "js" créé à la racine du site
  4. copier le code suivant dans le "head" du fichier html qui va utiliser le plugin :

4 - Image Swap Audio

Ce plugin permet d'associer des sons à des mots ou des images

Installation du plugin sur le site


  1. Suivre le lien Image Swap Audio ci-dessus et télécharger le fichier imageswapaudio.js ;
  2. placez le dans le répertoire "js" créé à la racine du site
  3. copier le code suivant à la fin du fichier html qui va utiliser le plugin :

Utilisation du plugin

Pour l'utilisation de ce plugin il suffit de consulter le site Dynamic Drive.

5 - Cycle2

Plugin utile à la présentation d'images, iframe, vidéos...

Installation du plugin sur le site


  1. Suivre le lien Cycle2 ci-dessus et télécharger le fichier jquery.cycle2.min.js (download cycle2 production version -19kb-) ainsi que jquery.cycle2.flip.min.js ;
  2. placez les dans le répertoire "js" créé à la racine du site
  3. copier le code suivant dans le "head" du fichier html qui va utiliser le plugin :

Utilisation du plugin

Pour l'utilisation de ce plugin il suffit de consulter le site Cycle2 qui fourmille d'exemples.