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 */
});