Etape 4 - Fancy Box en action

Un exemple d'utilisation avec Rapidweaver 4

Dans cette page j'ai donc appliqué les étapes précédentes pour activer Fancy Box, j'ai par contre déclaré un lien actif sur une balise lié à un ID et aussi à une classe avec le script suivant :

<script type="text/javascript">
$(document).ready(function() {
$("a#panorama").fancybox({
'hideOnContentClick': true
});
$("a.galerie").fancybox({
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
});
</script>

Voici 2 utilisations avec les liens ci-dessus (les grandes images sont placées en Assets bien entendu):

Pour une image seule avec l'ID dans le lien comme ceci (on ajoute un attribut au lien avec le bouton +) :



Cela donne l'effet ci-dessous :



On peut gérer une galerie d'images avec un lien déclaré comme ça :



Cela donne l'effet ci-dessous (ici pas d'effet de zoom et présentation sur fond assombri) :




Voilà un rapide tutoriel pour utiliser cette sympathique librairie, à vos claviers...