+

JavaScript & jQuery-Plugins

+
+

jQery Plugin integrieren

+

Die JavaScript-Bibliothek jQuery stellt eigentlich nur Grundfunktionen bereit. Für speziellere Aufgaben gibt es Plugins, das heißt zusätzliche JavaScript-Dateien.

+

Für dieses Beispiel einer (lightbox) Galerie habe ich https://noelboss.github.io/featherlight/ausgewählt.

+ + +
+
+

Einbinden von jQuery und Plugins

+
+</footer>
+    <script src="../js/jquery-3.4.1.min.js"></script> 
+    <script src="../js/jquery.detect_swipe.js"></script> /* Swipe Funktion Smartphone */
+    <script src="../js/featherlight.min.js"></script>
+    <script src="../js/featherlight.gallery.min.js"></script> /* Galerie Funktion */
+</body>
+
+
+
+
+

Galerie mit Funktionen zum öffnen und blättern von Bildern

+ + + + + +
+
+

Eigene Konfiguration des jQuery Plugins

+
+$('a.gallery').featherlightGallery({
+  previousIcon: '&#9664;',     /* Code that is used as previous icon */
+  nextIcon: '&#9654;',         /* Code that is used as next icon */
+  galleryFadeIn: 100,          /* fadeIn speed when slide is loaded */
+  galleryFadeOut: 300          /* fadeOut speed before slide is loaded */
+});
+
+
+
+ + +