Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée sur l'utilisation du plug-in de lecture d'images jquery PrettyPhoto_jquery

WBOY
Libérer: 2016-05-16 16:25:34
original
1910 Les gens l'ont consulté

Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery. Introduction à PrettyPhoto

Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery

PrettyPhoto est un plug-in léger de lecture d'images Lightbox basé sur jquery. Il prend non seulement en charge les images, mais prend également en charge les vidéos, Flash, YouTube, iframe et ajax. De plus, PrettyPhoto est très simple à configurer et à utiliser, et offre une bonne évolutivité. Vous pouvez personnaliser PrettyPhoto au maximum. Actuellement, PrettyPhoto est compatible avec la plupart des navigateurs grand public, y compris le déroutant IE6.

Adresse du projet du plug-in PrettyPhoto : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Il est recommandé aux amis qui maîtrisent bien l'anglais d'aller directement sur le site officiel pour apprendre à utiliser ce plug-in. Si votre anglais est mauvais, ne vous inquiétez pas, je vous présenterai comment utiliser PrettyPhoto un par un. .

2. Introduction à l'utilisation de PrettyPhoto

Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery. Présentez la bibliothèque principale jquery, la bibliothèque de plug-ins PrettyPhoto et le fichier de feuille de style PrettyPhoto

Copier le code Le code est le suivant :




2. Initialisez le plug-in jquery. Voici le code js de configuration le plus simple

Copier le code Le code est le suivant :

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});

Voici les codes html pour chaque type

Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery. Photo unique

Copier le code Le code est le suivant :

2. Album photos

Copier le code Le code est le suivant :
3. Flash unique

http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294
"
rel="prettyPhoto[flash]" title="Démo Flash Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery0"> Démo Flash Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery0


4. Vidéo YouTube

Copier le code Le code est le suivant :

http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
YouTube

5、Viméo

Copier le code Le code est le suivant :

http://vimeo.com/8245346" rel="prettyPhoto" title=""> YouTube

6. Vidéo QuickTime

Copier le code Le code est le suivant :

7. Site Web externe (iframe)

Copier le code Le code est le suivant :

http://www.google.com?iframe=true&width=Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery00%&height=Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery00%"
rel="prettyPhoto[iframes]" title="Google.com ouvert à Explication détaillée sur lutilisation du plug-in de lecture dimages jquery PrettyPhoto_jquery00 %">Google.com
http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com
http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com

8. Texte normal

Copier le code Le code est le suivant :



Ceci est un texte normal


J'espère que vous aimerez la jolie photo que je vous présente aujourd'hui. C'est du HTML qui lit du texte ordinaire


.

9. Contenu AJAX

Copier le code Le code est le suivant :

3.Résumé

Le plug-in du lecteur d'images PrettyBox est très utile, utilisez-le pour créer votre propre album photo exclusif !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal