Automatische Lightbox für Bilder

Für diese Webseite stand ich vor dem "Problem" das ich jedesmal die Lightbox Parameter nach dem einfügen eines Bildes im Artikel Quelltext einfügen musste. Auf der Suche nach einer einfacheren Lösung, welche die uikit 3.x Lightbox automatisch "erstellt" habe ich einen kleinen Script geschrieben.
jQuery(document).ready(function($){
   $('img.lightbox').each(function(){
      const imgsrc = $(this).attr('src');
      //console.log(imgsrc);
      $( this ).wrap( '<div uk-lightbox><a href="'+imgsrc+'"></a></div>' );
   });
});
 
Der oben gezeigte Codeblock sucht sich Bilder mit der Klasse "lightbox" - speichert die URL des Bildes in die Variable imgsrc, umspannt das Bild mit einem div Container (mit dem Attribut uk-lightbox) sowie einem a Tag welchem die Bild URL als href Attribute mitgegeben wird. Yoothemes UIkit Framework erledigt dann den rest und generiert eine Lightbox "on click".
Tuesday, 14 August 2018 Posted in jQuery, Yootheme uikit Framework, Javascript

Leave a comment

You are commenting as guest.

Kontakt

Marco Rensch
Glashüttenweg 30
8887 Mels
This email address is being protected from spambots. You need JavaScript enabled to view it.

Technik

Webseite basierend auf Joomla!
Template erstellt mit uikit
Symbolbilder von unsplash.com