- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
FAQs
General Tutorials
Ausgewählte Vorlagen
MonsterONE Subscrioption
JS Animated. Wie wendet man Plugin lightbox jQuery “Magnific Popup”an
Januar 21, 2014
Das jeweilige Tutorial zeigt, wie wendet man Plugin lightbox jQuery Magnific Popup in der Vorlage JS Animated an.
JS Animated. Wie wendet man Plugin lightbox jQuery “Magnific Popup”anMagnific Popup – ist das schnelles, einfaches, passendes für mobile Geräte, adaptives Plugin für lightbox und dialogunterstütztes modales Bildfenster,das auf Bibliothek jQuerygebildet ist. Die Demo-Version kann man auf der Webseite CodePensehen. Um ein Plugin auf die Seite hinzuzufügen:
Laden Sie die Datei Magnific-Popup-master.zip auf dem Link https://github.com/dimsemenov/Magnific-Popup auf den Computer herunter und ziehen Sie es aus dem Archiv aus.
Kopieren Sie den Ordner dist und setzen Sie in den Ordner site der Vorlage ein.
- Öffnen Sie die Datei .html mit dem Bild, auf welche man Plugin anzuwenden braucht und mittels DreamWeaver fügen Sie in die Bibliothek und Tabelle der Stile ins Tag <head> hinzu:
<!-- Magnific Popup core CSS file --> <link rel="stylesheet" href="./dist/magnific-popup.css"> <!-- Magnific Popup core CSS file --> <link rel="stylesheet" href="./dist/magnific-popup.css"> <!-- Magnific Popup core JS file --> <script src="./dist/jquery.magnific-popup.js"></script>
- Drücken Sie die Zeile mit dem Bild, zum Beispiel:
- Redigieren Sie auf folgende Weise
- Im Ordner images sollen sich Dateien image_big.jpg und image_small.jpg entsprechend befinden.
- Um aufschwimmendes Bildfenster zu initialisieren, fügen Sie die jeweilige Kennummer in die Datei .html nach dem schließenden Tag </head> oder in Footer (vor dem schließenden Tag </body>hinzu:
- Speichern Sie die Veränderungen und öffnen Sie die Seite im Browser: das Bild soll lightbox mit einer Überschrift erscheinen. Um Plugin zu aktivieren, die Webseite soll sich auf entferntem/lokalem Server befinden.
<img src="images/image_small.jpg" alt="" />
<a class="image-popup-vertical-fit" href="images/image_big.jpg" title="Title">
<img src="images/image_small.jpg">
</a>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
Mehr ausführliche Information kann man in der offiziellen Anleitung finden: http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup
Sie können auch zum Vorwand ein ausführliches Tutorialvideo nehmen:
JS Animated. Wie wendet man Plugin lightbox jQuery “Magnific Popup”an