Appliquer l’effet FancyBox sur son blog sans plugin.

L’effet FancyBox est une façon élégante d’ajouter un zoom sur les images de ses posts. Le script FancyBox est un script facile d’utilisation, qui peut s’appliquer automatiquement sur toutes les photos de votre blog. Voyons cela en détail.

Si vous cliquer sur une image d’un post sous WordPress, celui-ci ouvre un autre onglet avec une image dans le coin. Pas très sexy comme présentation.

Avec le script FancyBox, vous pourrez ouvrir l’image en plein écran, centrée et sur la même page. Vous aurez alors un effet de surimpression.

 

effet_fancybox_1

  • Etape 1 : Télécharger le script.

effet_fancybox_2

Vous pouvez télécharger la dernière version du script à cette adresse : http://fancyapps.com/fancybox/#license.

effet_fancybox_3

  • Etape 2 : Copie du script sur votre hébergement.

effet_fancybox_4

Une fois décompressée, vous allez copier sur votre hébergement le contenu du répertoire source. Même si tous les fichiers ne servent pas, un conseil, copier tout le répertoire.

Il faut copier le contenu du répertoire source dans le répertoire de votre thème WordPress , par exemple /public_html/wp-content/thèmes/votre_theme/.

Pour ce tutoriel j’ai créé un répertoire inc, ou j’ai copié le contenu de mon répertoire source.

  • Etape 3 : Création de la fonction FancyBox pour WordPress.

Ouvrez le fichier functions.php ou équivalent de votre thème et copier le script ci-dessous :

// ====================================================================
// FUNCTION FOR THE FANCYBOX EFFECT.
// ====================================================================
function wpc_js() {

wp_register_style('fancybox-css', get_template_directory_uri() . '/inc/jquery.fancybox.css', array(), '1.0', 'all');

wp_register_script('fancybox', get_template_directory_uri().'/inc/jquery.fancybox.pack.js', 'jquery', '1.0', true);

if (is_single()) {
wp_enqueue_script('fancybox');
wp_enqueue_style('fancybox-css');
}
}
Dans mon tutoriel, les fichiers sont placés dans le répertoire inc. Si vous utiliser un autre répertoire n’oublier pas de le modifier dans la fonction.
  • Etape 4 : Appel du script.

Cette étape consiste à charger le script en pied de page de vos articles et à appliquer l’effet automatiquement sur toutes les images de celui-ci. On utilisera une fonction php que l’on va rajouter dans le fichier function.php de votre thème (comme ci-dessus).

Copier le script suivant dedans :

/* Insertion du Fancybox sur les contenus */
function wpc_auto_fancy_box() {
if (is_singular('post')) { ?>
<script>
jQuery(document).ready(function(){
jQuery(".single-content").find("a:has(img)").addClass('fancybox');
jQuery(".single-content").find("a:has(img)").attr('rel','group1');
jQuery(".fancybox").fancybox( {
fitToView : true,
autoSize : true,
autoHeight : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
padding : 10,
helpers : {
title : { type : 'float' },
buttons : {}
}
} );
jQuery("a.group").fancybox({'transitionIn':'elastic','transitionOut':'elastic','speedIn':600,'speedOut':200,'overlayShow':false});
});
</script>
<?php } }

add_action('wp_footer','wpc_auto_fancy_box');

effet_fancybox_5

Afin que cette astuce fonctionne vous devez modifier le nom de la classe css utilisée pour vos articles (ligne 583 et 584, ici la classe CSS est .single-content). Pout trouver la classe pas de secret il faut mettre les mains dans le cambouis ou alors contacter le développeur du thème.

effet_fancybox_6

Pour ma part j’ai utilisé le navigateur Firefox. Je vais sur un article de mon blog, puis je fais un bouton droit et je sélectionne Examiner l’élément. Ensuite je déplace ma souris sur les différentes classes existantes.

Un trait en pointillé (1) vous indique la classe CSS qui est appliquée. Dès que vous voyez que le texte de votre article est ceinturé par ces pointillés, vous êtes pratiquement sûre que la classe est la bonne. Par exemple ici single-content (2).

Si vous avez un plugin de gestion de cache, n’oubliez pas de vider le cache avant pour prendre en compte les modifications.

Ensuite sur chacune des images de votre blog, si vous cliquer sur une, vous aurez cet effet :

effet_fancybox_7

Voici un joli effet, qui met en valeur vos images dans vos articles sans utiliser de plugin.

Source : http://wpchannel.com

That’s All.

Laisser un commentaire

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