- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
FAQs
General Tutorials
Ausgewählte Vorlagen
MonsterONE Subscrioption
JS Animated. Wie verwendet man Plugin jQuery lightbox “prettyPhoto”
Dezember 11, 2013
Das jeweilige Tutorial zeigt, wie verwendet man Plugin jQuery lightbox “prettyPhoto” in der Vorlage JS Animated.
JS Animated. Wie verwendet man Plugin jQuery lightbox “prettyPhoto” in der Vorlage JS Animated.PrettyPhoto – ist ein Klon jQuery lightbox. Man verwendet ihn nicht nur für Bilder, sonder auch für ein Video,Flash-Animation,iframes und ajax. Das ist vollwertiger Media lightbox.
. Um ihn auf die Seite hinzuzufügen:Laden Sie heunter und extrahieren Sie aus dem Archiv die Datei prettyPhoto_compressed_3.1.5.zip aus der Webseite http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/.
Kopieren Sie Ordner js und css in den Ordner site der Vorlage. Soweit dort schon Ordner mit solchen Namen sind, das System bietet sie zu ersetzen. Bestätigen Sie den Ersatz, weil es nur die neue Dateien in Ordner hinzufügen wird.
Öffnen Sie die Datei .html mit dem Bild, ür welche Sie Plugin verwenden möchten und fügen Sie die Bibliothek im Tabellenstil in Sektionen hinzu <head>, indem Sie den Texteditor DreamWeaver benutzen:
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Finden Sie die Zeile mit einem Bild, zum Beispiel:
Initialisieren Sie prettyPhoto: fügen Sie die folgende Kennummer in die Datei .html vor Schließendem Tag </head> hinzu:
- Speichern Sie die Seite und erneuern Sie den Browser: das Bild muss sich in lightbox eröffnen.
<img src="images/image_small.jpg " alt="" />
Redigieren Sie sie:
<a href="images/image_big.jpg" rel="prettyPhoto" title="Single Photo"><img src="images/image_small.jpg " alt=" " /></a>
Im Ordner images müssen die Dateien image_big.jpg und image_small.jpg entsprechend sein.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
.
Mehr ausführliche Information über Plugin-Anwendung kann man in offizieller Führung auf der Webseite finden http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
Sie können auch zum Vorwand ein ausführliches Tutorialvideo nehmen:
JS Animated. Wie verwendet man Plugin jQuery lightbox “prettyPhoto”