Lightbox in richukunst Templates

Aktualisiert 23.04.2018.

Die Lightbox ist von Lokesh Dhakar: www.lokeshdhakar.com

Der Einbettcode ist ohne CSS und Html Fehler, W3C-validiertes CSS und HTML. Developer Tools W3C Developers
 
Anleitung für die Templates richu176, richu176b, richu176c, richu181_de, richu181_en, richu181_fr und richu182. Die Lightbox Bildergalerie ist responsive. Der Code ist bereits in der template.htm Datei eingefügt und der Ordner lightbox ist im Template beigefügt. Sie müssen nur den Einbettungscode an Ihre Fotos anpassen. Bildformat jpg + png können verwendet werden. Achtung, Namens und Dateityp Änderungen müssen Sie anpassen. Tipp, das keiner Foto für die Miniaturansicht zusätzlich mit einem s = small kennzeichnen. Der Beispiel Code endspricht denn Beispiel Fotos die Sie zum Testen separat herunterladen können. Die Bildergalerie Lightbox können Sie auf verschiedenen Seiten in Ihre Webseite einfügen. Im Editor auf <> Quelltext oder HTML klicken und Ihren bearbeiteten und kopierten Code einfügen, auf Ok klicken und speichern. Die Fotos hochladen in Ihre CMSimple_XH Installation in den Ordner userfiles/images mit FTP-Programm. Alternativ empfiehlt es sich bei vielen Fotos in Ihrer CMSimple_XH Installation einen eigenen Ordner für jede einzelne Lightbox Galerie zu erstellen, der Web-Root Pfad lautet dann z.B. userfiles/images/Beispiel_Fotos. Alternativ können Sie sich auch in Ihre CMSimple_XH Installation einloggen und unter Dateien Bilder anklicken, jetzt Datei hochladen anklicken und Ihre Fotos von Ihrer Festplatte auswählen.

Einbettungscode für ein Foto ohne vor und rückwärts Pfeile aus dem Ordner userfiles/images.

lightbox_anleitung.jpg

<a href="./userfiles/images/img1.jpg" data-lightbox="example-1" data-title="Velotour 2017"><img src="./userfiles/images/img1_s.jpg" alt=""></a><p></p>

Bei jedem weiterem Bild ohne vor und rückwärts Pfeile muss der Einbettungscode erweitert werden mit example-2 und fortfahrend.
Einbettungscode für ein Foto ohne vor und rückwärts Pfeile aus dem Ordner userfiles/images/Beispiel_Fotos.

<a href="./userfiles/images/Beispiel_Fotos/img2.jpg" data-lightbox="example-2" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img2_s.jpg" alt=""></a><p></p>

Einbettungscode für mehrere Fotos mit vor und rückwärts Pfeile aus dem Ordner userfiles/images/Beispiel_Fotos.
Beachten Sie folgendes, example-set1 fortfahren 2, 3, 4 und so weiter im Code.
Ohne die Nummer werden bei mehreren Lightbox Galerie in einer Webseite die einzelne Galerie nicht beendet, nächste Galerien werden dann fortlaufend auch eingeblendet.
 

<a href="./userfiles/images/Beispiel_Fotos/img1.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img1_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img2.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img2_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img3.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img3_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img4.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img4_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img5.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img5_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img6.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img6_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img7.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img7_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img8.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img8_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img9.jpg" data-lightbox="example-set1" data-title="Velotour 2017 richu"><img src="./userfiles/images/Beispiel_Fotos/img9_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img10.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img10_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img11.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img11_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/Beispiel_Fotos/img12.jpg" data-lightbox="example-set1" data-title="Velotour 2017"><img src="./userfiles/images/Beispiel_Fotos/img12_s.jpg" alt=""></a> &nbsp;

Galerie mit Lightbox example-set1 aus dem Ordner userfiles/images/Beispiel_Fotos. Ohne vorwärts Pfeile beim letzten Bild.

Galerie mit Lightbox example-set2 aus dem Ordner userfiles/images/palma. Ohne vorwärts Pfeile beim letzten Bild.

<a href="./userfiles/images/palma/palma1_Richard_Kircher.jpg" data-lightbox="example-set2" data-title="Palma Ferien"><img src="./userfiles/images/palma/palma1_Richard_Kircher_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/palma/palma2_Richard_Kircher_TEST.jpg" data-lightbox="example-set2" data-title="Palma Ferien"><img src="./userfiles/images/palma/palma2_Richard_Kircher_TEST_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/palma/palma3.jpg" data-lightbox="example-set2" data-title="Palma Ferien Richard"><img src="./userfiles/images/palma/palma3_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/palma/palma4.jpg" data-lightbox="example-set2" data-title="Palma Ferien richu"><img src="./userfiles/images/palma/palma4_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/palma/palma5.jpg" data-lightbox="example-set2" data-title="Palma Ferien"><img src="./userfiles/images/palma/palma5_s.jpg" alt=""></a> &nbsp;
<a href="./userfiles/images/palma/palma6.jpg" data-lightbox="example-set2" data-title="Palma Ferien"><img src="./userfiles/images/palma/palma6_s.jpg" alt=""></a> &nbsp;


 
Free Download

Beispiel Fotos und Einbettungscode für Tests für die Bildergalerie Lightbox.

 

 

News

  

Templats Download für
CMSimple_XH  
 
links_icon.png
 
Webseiten Tipp: Fitness-Studio in Steffisburg.
www.silvergym.ch
 

Templates Demo

 

 Besuchen Sie meine
Templates Demo Seite.
 
Templates Demo richu153.jpg
 
 
 
 

Neustes Template

richu183_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.

Mit Animated Gradient Background
Free Templates richu183_de

 

Windows Tipp

Neue Rubrik Windows Tipp!

 Erster Tipp, Anleitung, Windows 10, Herunterfahren, Neustart.

ausfuehren.jpg