Hallo,
ich habe nunmehr erfolgreich die Lightbox auf meiner Seite eingebunden:
mit folgendem CSS werden die Vorschaubilder angeordnet (hier nur der Relevante Teil der zuständigen CSS Datei)
Code
#galerie {
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
colour: #000066;
flex-wrap: wrap;
}
Hier das dazugehörende html für die ersten 6 Bilder:
HTML
<!doctype html>
<html>
<head>
<!-- Kommentar -->
<title>Besatz 2019</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../../css/lightbox.css">
<link rel="stylesheet" type="text/css" href="../../css/bilder uebersicht 1.css">
</head>
<body>
<div id="galerie">
<a href="Besatz_2019_Bild_1_g.JPG" data-lightbox="Besatz_2019" data-title="Der Besatz 2019 beginnt"><img src="Besatz_2019_Bild_1_k.JPG" alt="Besatz 2019 Bild 1" /></a>
<a href="Besatz_2019_Bild_2_g.JPG" data-lightbox="Besatz_2019" data-title="Unser Stammlieferant aus Litschau"><img src="Besatz_2019_Bild_2_k.JPG" alt="Besatz 2019 Bild 2" /></a>
<a href="Besatz_2019_Bild_3_g.JPG" data-lightbox="Besatz_2019" data-title="Über die Rutsche ins Wasser"><img src="Besatz_2019_Bild_3_k.JPG" alt="Besatz 2019 Bild 3" /></a>
<a href="Besatz_2019_Bild_4_g.JPG" data-lightbox="Besatz_2019" data-title="Über die Rutsche ins Wasser"><img src="Besatz_2019_Bild_4_k.JPG" alt="Besatz 2019 Bild 4" /></a>
<a href="Besatz_2019_Bild_5_g.JPG" data-lightbox="Besatz_2019" data-title="Über die Rutsche ins Wasser"><img src="Besatz_2019_Bild_5_k.JPG" alt="Besatz 2019 Bild 5" /></a>
<a href="Besatz_2019_Bild_6_g.JPG" data-lightbox="Besatz_2019" data-title="Über die Rutsche ins Wasser"><img src="Besatz_2019_Bild_6_k.JPG" alt="Besatz 2019 Bild 6" /></a>
</div>
<script src="../../html/Anwendungen/js/lightbox-plus-jquery.js"></script>
</body>
</html>
Alles anzeigen
Im Test funktioniert das ganze schon ganz gut.
Mir ist nur nicht klar, ob die Einbindung so passt bzw. welche Klasse aus der lightbox.css Datei ich den einzelnen a Elementen zuweisen muss. Im Beispiel wird die Klasse example-image-link für die a Elemente und example-image für die img Elemente verwendet. Welche Klassen muss ich für den Echteinsatz den jeweiligen Elementen zuweisen.
Danke für die Hilfe.