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

Paramètres/Méthodes	Description	Valeur par défaut
Basique
largeur	Définissez la largeur du port série contextuel lorsque le contenu est un swf, un iframe ou un texte sur une seule ligne, 'autoDimensions' doit être défini sur false	560
hauteur	Définissez la hauteur du port série contextuel lorsque le contenu est un swf, un iframe ou un texte sur une seule ligne, 'autoDimensions' doit être défini sur false	340
cyclique	S'il faut afficher en boucle lorsque le contenu est une collection d'images.	faux
centerOnScroll	Les pop-ups sont toujours centrées dans le navigateur.	faux
modal	S'il faut utiliser la fenêtre modale.Lorsqu'il est défini sur true, doit également inclure : 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' défini sur false et 'overlayShow' défini sur true	faux
titrePosition	La position du titre peut être réglée sur « extérieur », « intérieur » ou « au-dessus »	'dehors'
transitionIn, transitionOut	Le mode d'affichage de la fenêtre peut être réglé sur « élastique », « fondu » ou « aucun »	'fondu'
envoyer	Méthode, envoyer les données de l'image recadrée au serveur afin que le serveur puisse recevoir les paramètres de traitement, par exemple : cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
Méthode
$.fancybox.showActivity	Afficher l'animation de chargement
$.fancybox.hideActivity	Masquer l'animation de chargement
$.fancybox.close	Fermer la fenêtre
$.fancybox.resize	Ajustez automatiquement la hauteur de la fenêtre pour l'adapter au contenu
Centré	S'il faut centrer la sélection, c'est-à-dire l'afficher au centre du conteneur.

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.