HervéRenault.fr

fancyZoom simplifié

Une version allégée du plugin fancyZoom pour jQuery

• J'ai simplifié la version de fancyZoom de Steve Smith (qui lui-même avait fait sa version à partir de celle de Cabel Sasser) afin de supprimer le bouton de fermeture que je trouve superflu (j'ai pris l'habitude de cliquer n'importe où sur la photo pour la faire disparaître) et un peu disgracieux, et surtout afin de supprimer tous les éléments entourant la photo qui alourdissent le fonctionnement du zoom sur de petites configurations matérielles telles qu'un netbook ou un téléphone mobile.
• Exemple :
  

Comment l'utiliser ?

• Inclure vos photos, miniature et taille normale, de cette manière :

  <!-- la miniature -->
  <a href="#nom" class="zoom"><img alt="..." src="..."></a>
  
  <!-- la taille normale -->
  <div id="nom"><img alt="..." src="..."></div>
  

  La consultation reste possible si Javascript est désactivé, puisque #nom est une cible valide.
  
• Inclure fancyzoom_simplified.js de cette manière :

  <script type="text/javascript" src="fancyzoom_simplified.js"></script>
  

  et

  <script type="text/javascript">
  $(document).ready(function() {
  	$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
  });
  </script>
  

  Sans oublier jQuery, bien sûr (1.2.6 dans l'exemple ci-dessus)
• Ajouter une ombre autour du <div> de la photo zoomée avec border-shadow (supporté par la quasi-totalité des navigateurs), par exemple :

  div img { box-shadow: 0px 0px 6px #111; }