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 *