Effet de couche contextuelle riche du plug-in Jquery Fancybox avec code source download_jquery

Fancybox est un excellent plug-in jquery qui peut afficher de riches effets de calque contextuel. Nous avons déjà présenté l'effet de couche contextuelle Fancybox dans un article. Par rapport à Fancybox, Fancybox a des fonctions plus complètes. En plus de charger des DIV, des images, des ensembles d'images, des données Ajax, il peut également charger des films SWF, des pages iframe, etc. .

Démonstration d'effet Téléchargement du code source

Caractéristiques de Fancybox :

Peut prendre en charge les images, le texte HTML, l'animation flash, la prise en charge iframe et ajax
Vous pouvez personnaliser le style CSS du lecteur
Peut être joué en groupe
Si le plugin de la molette de la souris est inclus, Fancybox peut également prendre en charge le défilement de la molette de la souris pour parcourir les images
 ; Fancybox Player prend en charge la projection, lui donnant une sensation plus tridimensionnelle.

Prise en charge des touches fléchées du clavier et de la touche ESC.
Paramètres de paramètres riches et appels de méthodes.
Forte évolutivité.

Comment utiliser ?

Cet article utilise Demo2 dans DEMO comme exemple pour expliquer l'utilisation de Fancybox.

1. Ajouter des références javascript et des références de fichiers css

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script> 

2.HTML

<h4>图片集，支持键盘方向键</h4> 
<p> 
 <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> 
 <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> 
 <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> 
</p> 

3. Appelez Fancybox

$(function(){ 
 $("a[rel=group]").fancybox({ 
 'titlePosition' : 'over', 
 'cyclic' : true, 
 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
   return '<span id="fancybox-title-over">' + (currentIndex + 1) + 
 ' / ' + currentArray.length + (title.length &#63; ' ' + title : '') + '</span>'; 
  } 
 }); 
}); 

Notez que le format de paramétrage de Fancybox est : 'key':'value'. titlePosition : définissez la position d'affichage du titre de l'image sur sur l'image. cyclique : définissez le mode de navigation des images sur la navigation cyclique. titleFormat : définissez le format du titre de l'image, qui peut afficher le nombre total d'images et l'ordre actuel des images.

Liste des principaux paramètres et méthodes du plug-in Fancybox

Le contenu ci-dessus est la description complète de l'effet de couche contextuelle riche du plug-in Fancybox de Jquery avec téléchargement du code source. J'espère que vous l'aimerez.