Ce tutoriel tutoriel vous permet d’afficher les agrandissements de vos photos dans un fenêtre popup personnalisé appelé Fancybox.

 

♦ Tout d’abord aller sur le site de Facyapps pour télécharger la dernière version. Actuellement, c’est la version Download v2.1.4.
♦ Décompressez-le avec l’option « Extract Here » et renommez ce dossier en « fancybox ».
♦ Sur votre FTP, vous allez uploader ce dossier dans votre racine de votre site.

Allons maintenant sur votre page html où vous voulez insérer cette option.
♦ Insérez ce code avant la balise < / head >.

<!– Add jQuery library –>
<script type= »text/javascript » src= »http://code.jquery.com/jquery-latest.min.js »></script>

<!– Add mousewheel plugin (this is optional) –>
<script type= »text/javascript » src= »fancybox/lib/jquery.mousewheel-3.0.6.pack.js »></script>

<!– Add fancyBox –>
<link rel= »stylesheet » href= »fancybox/source/jquery.fancybox.css?v=2.1.4″ type= »text/css » media= »screen » />
<script type= »text/javascript » src= »fancybox/source/jquery.fancybox.pack.js?v=2.1.4″></script>

<!– Optionally add helpers – button, thumbnail and/or media –>
<link rel= »stylesheet » href= »fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5″ type= »text/css » media= »screen » />
<script type= »text/javascript » src= »fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5″></script>
<script type= »text/javascript » src= »fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5″></script>

<link rel= »stylesheet » href= »fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7″ type= »text/css » media= »screen » />
<script type= »text/javascript » src= »fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7″></script>

<script type= »text/javascript »>
    $(document).ready(function() {
        $(« .fancybox »).fancybox();
    });
</script>

Vous allons maintenant réaliser les images avec le style css Fancybox qui vous permettra de lier et d’afficher votre image dans une fenêtre popup personnalisée.
 ♦ Utilisez ce code en modifiant les caractères en MAJUSCULE avec votre propre image, texte ou donnée. Il faut insérer ceci normalement entre la balise < body > < / body > où bon vous semble le plus cohérent.

<a class= »fancybox » rel= »group » href= »LIEN DE VOTRE IMAGE »><img src= »LIEN DE VOTRE IMAGE REDIMENSIONNÉE » style= »width: CHIFFRE DE LA LARGEUR RÉDUIT DE L’IMAGE; height: CHIFFRE DE LA HAUTEUR REDUIT DE L’IMAGE » alt= »TITRE DE L’IMAGE OU INDIQUEZ QUE POUR AGRANDIR, IL FAUT CLIQUER SUR L’IMAGE » /></a>

♦ Uploadez ce fichier à la racine avec vos autres fichiers html.
♦ Et c’est terminé !

© Tutoriel créé par Facyapps, puis ré-adapté en français par Shaynee

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *