Hab gerade das Video gefunden was ich suche, hier ist die Beschreibung:
Hab mir gerade die Lighbox heruntergeladen. In dem Master Ordner sind mehrere Datein und Ordner mit den Namen dist, docs und src. Ich habe mich auch etwas in die Einbindung eingelesen, komme allerdings trotzdem nicht weiter. Was soll ich denn mit den ganzen Dateien in dem Lighbox Ordner anstellen? Bzw. welche Dateien soll ich verlinken? Wie das ganze Ding einrichten? 
Danke für ein paar Hinweise und Tipps!
Du musst, genau wie beim CSS-File, die Datei lightbox.js in dein Verzeichnis für Javacripts kopieren, gängiger Name "js", und dann den Verzeichnisnamen im Skript-Tag angeben:
<script src="js/lightbox.js"></script>
Ok das habe ich gemacht, bin mir allerdings nicht sicher ob es denn innerhalb des <script> tags stehen soll oder ob ich es danach kurz vor dem endenden </body> tag einfügen soll. Siehe hier:
html-seminar.de/woltlab/attachment/2026/
Lightboxes gibt es diverse, ich empfehle Fancybox 3, weil sie voll responsiv und Touch-geeignet ist. Wenn Du sie aus dem CDM lädst, wie im Quickstart angegeben, ist es ganz einfach.
Heißt das ich muss mich für eine der vielen Lightboxen entscheiden und diese dann in meinem javascript (js) Ordner einbinden, durch den eingesetzten <script> Code wird das vom Browser dann erkannt und es kann losgehen mit der Diashow?
BTW: Es ist schon spät und Du hast mir heute sehr weitergeholfen! Als kleinen Dank möchte ich Dir einen link zu einem wunderschönen Montagssorbet von Laut&Luise schenken der bei mir gerade läuft. Hier der link:
Ich hoffe Du hast genau so viel Spaß wie ich daran
Externer Inhalt
soundcloud.com
Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
Hab mich gerade in die Einbingung von einer lightbox eingelesen.
Ich habe diesen Quellcode
<link href="ihr-css-verzeichnis/lightbox.css" rel="stylesheet">in meinen <head> geschrieben.
Diesen Quellcode
<script src="ihr-js-verzeichnis/lightbox.js"></script>habe ich in der letzten Zeile bevor der </body> tag schließt eingefügt. Wahrscheinlich falsch, siehe hier:
html-seminar.de/woltlab/attachment/2025/
Nun sollte ich diesen Quellcode
<a href="images/bild-1.jpg" data-lightbox="bild-1" data-title="Bildunterschrift"> <img src="images/bild-1-vorschau.jpg" alt="alternative Erklärung">
</a>einfügen um das Bild in Originalgröße in der Lightbox anzuzeigen. Nur wo soll ich den Quellcode einfügen? Im html Editor im <body> oder doch besser innerhalb des <div> tags wo die links zu den eigentlichen Photos stehen ???
Ganz schön kompliziert das ganze.. 
Besten Dank für Hilfe!!
Gerade ist mir noch etwas anderes aufgefallen: In meinem <head> tag steht mein <body> tag und in meinem <body> tag steht mein <header> tag. Sollte nicht der <head> tag seperat an erster Stelle stehen und und wenn der </head> tag geschlossen ist, danach erst der <body> tag anfangen??
Das hat mich gerade verwirrt, die Website wird allerdings richtig angezigt..
warum suchst du dir den da nix fertiges ? Da gibt es doch schon so viele ferige sache wo du nur noch deiine Bilder eingeben musst
Hier ein paar simple Codepens https://codepen.io/tag/image%20gallery/
Ich bin sehr penibel was die Bildergalerie angeht und möchte am Besten alles kontrollieren.
Ein Raster schon, aber auf eine neue Seite verlinken weniger, weil es für den Besucher umständlich ist, von der neuen Seite immer wieder zurück in die Übersicht zu müssen. Ein gängiges Verfahren für eine Bildergalerie ist, eine Lightbox zu verwenden, ich empfehle Fancybox 3:
https://www.fancyapps.com/fancybox/3/
Probiere es aus und mach dir ein Bild.
Danke für deine hilfreiche Antwort! Genau soetwas suche ich. Allerdings habe ich gerade das Problem das ich nicht auf die Photos in der Bildergalerie klicken kann sodass sie sich vergrößern. Ich werde also Thumbnails einrichten für die Gallerie und dann über eine Lightbox die Bilder in der eigentlichen Größe anzeigen. Kann mir denn jemand einen Tipp geben wie ich das am Besten mache?
Außerdem habe ich gerade das Problem das eines der Photos nicht an die linke Seite überspringt weil es wahrscheinlich von dem Hochformat aufgehalten wird. Wie kann ich den Fehler beheben?
Hier ein Beispielbild:
html-seminar.de/woltlab/attachment/2023/
Was ich eigentlich möchte ist diese Anordnung:
html-seminar.de/woltlab/attachment/2024/
Kann mir jemand einen Tipp geben wie ich die obere Anordnung einstellen kann?
Vielen Dank !!!
Hallo Freunde!
Bin neu hier im Forum und sage erstmal "Cheers!"
Mir bereitet die Erstellung einer einfachen Bildergalerie schon lange Kopfschmerzen und ich hoffe das mir hier jemand helfen kann.
Das Problem ist das die Photos mal Hochformat und mal Querformat sind und immer wieder mal ein anderes Seitenverhältnis haben.
Meine erste Frage ist: Wie kann ich alle Photos in der Bildergalerie so anordnen das jedes das gleiche Seitenverhältnis hat bzw in einen quadratischen Rahmen packen?
Meine zweite Frag ist: Sollte ich die Bilder für die Vorschau in der Bildergalerie (einfache Galerie mit vier quadratischen Formaten auf jeder Zeile) mit Thumbnails bestücken das die ladezeit kürzer wird und erst die originalgröße der Photos beim klick auf das Vorschaubild in einer neuen Seite laden oder ist das egal?
Meine dritte Frage: Ist es überhaupt die richtige Herangehensweise die Photos über CSS Code in ein Raster zu packen und dann in einer neuen Seite zu verlinken in der das Photo dann mit der Originalgröße angezeigt wird?
Mein Html Code sieht gerade so aus:
<div class="row">
<div class="col col-lg"><img src="images/image_website_01.jpg" alt="Trip01" width="1000" height="769"></div>
<div class="col col-lg"><img src="images/image_website_02.jpg" alt="Trip02" width="1000" height="769"></div>
<div class="col col-lg"><img src="images/image_website_03.jpg" alt="Trip03" width="1000" height="769"></div>
....
Mein CSS Code sieht gerade so aus:
.col {
float: left;
padding: 5px 5px 5px 5px;
}
.col-lg {
width: 20%;
}
.col-lg img {
width: 100%;
height: auto;
display: block;
}
Besten Dank für eure Hilfe !! 
