Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery

Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery. Einführung in PrettyPhoto

PrettyPhoto ist ein leichtes Lightbox-Bildwiedergabe-Plug-in, das auf JQuery basiert. Es unterstützt nicht nur Bilder, sondern auch Videos, Flash, YouTube, Iframe und Ajax. Darüber hinaus ist PrettyPhoto sehr einfach zu konfigurieren und zu verwenden und verfügt über eine gute Skalierbarkeit. Sie können PrettyPhoto maximal anpassen. Derzeit ist PrettyPhoto mit den meisten Mainstream-Browsern kompatibel, einschließlich des verwirrenden IE6.

PrettyPhoto-Plug-in-Projektadresse: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Es wird empfohlen, dass Freunde, die gut Englisch sprechen, direkt die offizielle Website besuchen, um zu lernen, wie man dieses Plug-in verwendet. Wenn Ihr Englisch schlecht ist, werde ich Ihnen nacheinander die Verwendung von PrettyPhoto vorstellen .

2. Einführung in die Verwendung von PrettyPhoto

Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery. Einführung der JQuery-Kernbibliothek, der PrettyPhoto-Plug-In-Bibliothek und der PrettyPhoto-Stylesheet-Datei

Code kopieren Der Code lautet wie folgt:

2. Initialisieren Sie das JQuery-Plug-In. Das Folgende ist der einfachste Konfigurations-JS-Code

Code kopieren Der Code lautet wie folgt:

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

Hier sind die HTML-Codes für jeden Typ

Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery. Einzelbild

Code kopieren Der Code lautet wie folgt:

2. Bilderalbum

Code kopieren Der Code lautet wie folgt:

3. Einzelner Blitz

Code kopieren Der Code lautet wie folgt:

http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294"
rel="prettyPhoto[flash]" title="Flash Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery0 Demo">

4. YouTube-Video

Code kopieren Der Code lautet wie folgt:

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

5、Vimeo

Code kopieren Der Code lautet wie folgt:

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

6. QuickTime-Video

Code kopieren Der Code lautet wie folgt:

http://trailers.apple.com/movies/universal/despicableme/despicableme-tlrAusführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery_r640s.mov?width=640&height=360 "> http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlrAusführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery_r640s.mov?width=640&height= 340"> a> http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlrAusführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery_r640s.mov ?width=640&height=272">

7. Externe Website (iframe)

Code kopieren Der Code lautet wie folgt:

http://www.google.com?iframe=true&width=Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery00%&height=Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery00%"
rel="prettyPhoto[iframes]" title="Google.com zu Ausführliche Erklärung zur Verwendung des JQuery-Bildwiedergabe-Plug-Ins PrettyPhoto_jQuery00 % geöffnet">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. Normaler Text

Code kopieren Der Code lautet wie folgt:

Dies ist normaler Text

Ich hoffe, Ihnen gefällt das hübsche Foto, das ich Ihnen heute vorstelle. Dies ist HTML, das gewöhnlichen Text abspielt.

9. AJAX-Inhalt

Code kopieren Der Code lautet wie folgt:

Ajax-Inhalt

3. Zusammenfassung

Das PrettyBox-Bildplayer-Plug-in ist sehr nützlich. Erstellen Sie damit Ihr eigenes exklusives Fotoalbum!