Blog de Nowwis sur le Développement Web » JQuery https://blog.developpez.com/nowwis Fri, 06 Apr 2012 12:42:51 +0000 fr-FR hourly 1 https://wordpress.org/?v=4.1.42 Fancybox 2, une alternative à JQuery Lightbox https://blog.developpez.com/nowwis/p10923/javascript/fancybox_2_une_alternative_a_jquery_ligh https://blog.developpez.com/nowwis/p10923/javascript/fancybox_2_une_alternative_a_jquery_ligh#comments Thu, 05 Apr 2012 19:34:48 +0000 Fonctionnant avec JQuery également, Fancybox 2 est un plugin tout aussi spendide avec des effets de transitions et autres.
Avec la possibilité d’ajouter des helpers (créations de vignette sur des images liés, ou des créer une barre de navigation), ce plugin réécrit est un vrai délice pour les yeux.

Pour profiter de Fancybox, je vous propose un mini tutoriel.

Les pré-requis :

  • Avoir JQuery d’installer.

Les obligatoires :

  • jquery.fancybox.pack.js
  • jquery.fancybox.css (avec les images correspondantes, vous pouvez tout a fait modifier les chemins de ces dernières.)

Les options :

  • jquery.mousewheel-3.0.6.pack.js
    -> Ce script va permettre de changer de photo grâce à la molette de la souris, très pratique, avec de belle transition.
  • jquery.fancybox-buttons.js et jquery.fancybox-buttons.css
    -> Ce CSS et ce JS vont permettre d’afficher la barre de navigation pour ne pas trop perturber les utilisateurs qui ne se sentent pas à
    l’aise avec le web par exemple
  • jquery.fancybox-thumbs.js et jquery.fancybox-thumbs.css
    -> De même, ce CSS et ce JS vont quant à lui, permettre d’afficher des vignettes pour naviguer plus aisèment dans vos photos.

Une fois vos script et feuille de style appelé, il ne vous reste plus qu’à ajouter quelques attributs sur vos images et vos liens :

<a class="fancybox" href="www.mon-site.fr/images/images_grande.jpg">
    <img src="www.mon-site.fr/images/images_petite.jpg" alt="Ma petite image" />
</a>

Une fois vos photos mises dans ce format, il ne vous manque plus que le JQuery :

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

Au plaisir, je vous laisse découvrir ;)

Allez plus loin et utilisé fancybox en profondeur.
Ceci est le minimum est bien sur, nous voulons tous plus !

Alors voici la suite !

Regrouper des images

<a class="fancybox" href="www.mon-site.fr/images/images_grande_1.jpg">
    <img src="www.mon-site.fr/images/images_petite_1.jpg" alt="Ma petite image 1" />
</a>
<a class="fancybox" href="www.mon-site.fr/images/images_grande_2.jpg">
    <img src="www.mon-site.fr/images/images_petite_2.jpg" alt="Ma petite image 2" />
</a>
<a class="fancybox" href="www.mon-site.fr/images/images_grande_3.jpg">
    <img src="www.mon-site.fr/images/images_petite_3.jpg" alt="Ma petite image 3" />
</a>

On aimerait bien lié les photos entre elle. C’est-à-dire ne pas être obligé de fermer la fenêtre pour ouvrir une autre photo…
C’est ici qu’entre en jeux un attribut HTML.
L’attribut REL sur les liens. Si vous mettez le même attribut, alors toutes les images seront lié.

Dans l’exemple ci dessus :

<a class="fancybox" rel="mon_diapo" href="www.mon-site.fr/images/images_grande_1.jpg">
    <img src="www.mon-site.fr/images/images_petite_1.jpg" alt="Ma petite image 1" />
</a>
<a class="fancybox" rel="mon_diapo" href="www.mon-site.fr/images/images_grande_2.jpg">
    <img src="www.mon-site.fr/images/images_petite_2.jpg" alt="Ma petite image 2" />
</a>
<a class="fancybox" rel="mon_diapo" href="www.mon-site.fr/images/images_grande_3.jpg">
    <img src="www.mon-site.fr/images/images_petite_3.jpg" alt="Ma petite image 3" />
</a>

Rien besoin d’autre, ça se fait tout seul.

Les options du fancybox

closeEffect  
openEffect  
prevEffect
nextEffect

Voici les différentes options à modifier pour changer les effets.
La liste exaustive dans valeurs possible :

  • elastic
  • fade
  • none

La vitesse peut également être changé pour chacun de ses effets :

openSpeed
closeSpeed  
nextSpeed  
prevSpeed

Avec les valeurs exprimé en milliseconde, en « slow » ou en « fast ». L’attribut par défaut étant « normal ».

Ceci est un exemple d’une configuration possible :

$(".fancybox").fancybox({
  closeEffect : 'fade',
  openEffect : 'elastic',
  prevEffect : 'none',
  nextEffect : 'none',
  openSpeed : ''
});

Afficher un petit descriptif de l'image
C’est également possible avec l’attribut title

$(".fancybox").fancybox({
  helpers : {
    title : {
      type: 'outside'
    }
  }
});

Grâce à ceci, vous obtiendrez une joli div en dessous de vos images, manipulable en CSS bien évidemment.

<div class="fancybox-title fancybox-title-outside-wrap">Mon title d'image</div>

Afficher des vignettes lors de la visualisation des grandes images

$('a[rel="lightbox"]').fancybox({
   helpers : {
    overlay  : {
      opacity : 0.8,
      css : {
        'background-color' : '#000'
      }
    },
    thumbs  : {
      width  : 50,
      height  : 50
    }
  }
});

Voici un aperçu de ce que peut donner les vignettes :
Image vignette fancybox

Affichage des boutons de navigation

$('.fancybox').fancybox({
  helpers : {
    buttons  : {}
  }
});

Voici l’aperçu de ce que peut donner la barre de navigation
Image bouton fancybox

Conclusion
Voici donc une très bonne alternative à JQuery Lightbox, qui permet de faire pas mal de chose également, avec des transitions très sympa.
Avec quelques plugins, on peut lui donner d’autre aspect pour changer un peu la routine des galeries photos.
Couplé avec mousewheel, votre fancybox est gérable avec la molette, un petit atout supplémentaire.

J’espère que ce premier billet de blog vous aura plu. N’hésitez pas à faire quelques remarques sur ce post, et éventuellement proposer des scripts JQuery à visualiser sur mon blog. Je ne manquerais pas de faire un petit descriptif.

Site Officiel :

http://fancyapps.com/fancybox/

]]> 4