Fragen zum Aufbau einer einfachen Bildergalerie

  • 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 !! :*

  • Zitat

    Wie kann ich alle Photos in der Bildergalerie so anordnen das jedes das gleiche Seitenverhältnis hat bzw in einen quadratischen Rahmen packen?

    Wenn Du die Bilder in einen quadratischen Rahmen packen willst, musst Du akzeptieren, dass

    • entweder seitlich oder oben und unten ein Leerraum entsteht
    • oder seitlich oder oben und unten etwas abgeschnitten wird.

    Realisieren kannst Du beides entweder mit Hintergrundbildern und der CSS-Eigenschaft background-size oder mit img-Tags und der CSS-Eigenschaft object-fit.

    https://wiki.selfhtml.org/wiki…d_-bilder/background-size

    https://wiki.selfhtml.org/wiki…ige/object-fit#object-fit


    Zitat

    einfache Galerie mit vier quadratischen Formaten auf jeder Zeile

    Ich empfehle, dich nicht auf eine feste Anzahl pro Zeile festzulegen, sondern diese variabel zu halten, denn es gibt vom Smartphone bis zum Desktop-PC sehr viele verschiedene Bildschirmabmessungen.


    Zitat

    Sollte ich die Bilder für die Vorschau in der Bildergalerie (...) 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?

    Egal ist es nicht, denn die Ladezeit ist ein wichtiger Faktor für deine Besucher. Sind es relativ viele Bilder, ist auf jeden Fall zu empfehlen, Thumbnails zu verwenden.


    Zitat

    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?

    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.

  • 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:


    bw_images_01.jpg



    Was ich eigentlich möchte ist diese Anordnung:


    img_02.jpg



    Kann mir jemand einen Tipp geben wie ich die obere Anordnung einstellen kann?



    Vielen Dank !!!

  • 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..

  • Ja, die Antwort ist immer die selbe aber dadurch nicht weniger richtig: Informiere dich über Flexlayout und die Eigenschaft align-items, damit kannst Du solch eine Andordnung leicht erzeugen.

  • Zitat

    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 trifft zu. Aber <head> nicht mit <header> verwechseln, beides sind verschiedene Dinge.


    Zitat

    die Website wird allerdings richtig angezigt..

    Das ist so, die Browser versuchen, auch aus fehlerhaftem Code eine vernünftige Anzeige zu machen.

  • Hab mich gerade in die Einbingung von einer lightbox eingelesen.


    Ich habe diesen Quellcode

    Code
    1. <link href="ihr-css-verzeichnis/lightbox.css" rel="stylesheet">

    in meinen <head> geschrieben.


    Diesen Quellcode

    Code
    1. <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:


    Screenshot 2019-08-29 at 23.11.13.png




    Nun sollte ich diesen Quellcode

    Code
    1. <a href="images/bild-1.jpg" data-lightbox="bild-1" data-title="Bildunterschrift"> <img src="images/bild-1-vorschau.jpg" alt="alternative Erklärung">
    2. </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.. :D


    Besten Dank für Hilfe!!

  • Zitat

    Diesen Quellcode

    Code

    1. <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:

    Offenbar hast Du das von hier:

    https://wiki.selfhtml.org/wiki…orials/Lightbox_einbinden

    I. allg. ist Selfhtml eine gute Quelle, aber in diesem Fall wird das Einbinden des js-Files nicht gut beschrieben. 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>


    <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>

    Zitat

    Nur wo soll ich den Quellcode einfügen?

    Dieser Code zeigt das Vorschaubild an und enthält den Link auf das große Bild, das in der Lightbox angezeigt werden soll. Die Position ist beliebig, platziere diesen Code dort, wo das Vorschaubild angezeigt werden soll.


    Lightboxes gibt es diverse, die Beschreibung bei Selfhtml bezieht sich auf die lhokeshdakar-Version. Ich empfehle statt dessen Fancybox 3, weil sie voll responsiv und Touch-geeignet ist. Wenn Du sie aus dem CDN lädst, wie im Quickstart angegeben, ist es ganz einfach.

    https://www.fancyapps.com/fancybox/3/

  • 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:


    Screenshot 2019-08-29 at 23.39.22.jpg


    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 :)

  • Danke für das Sorbet! Ich lasse es Mal laufen, während ich dies schreibe.


    So wie auf dem Screenshot ist es richtig. Mehr zum Einbinden von JS und CSS kannst Du hier nachlesen:

    https://wiki.selfhtml.org/wiki…ls/DOM/Einbindung_in_HTML

    https://wiki.selfhtml.org/wiki…ieg/Stylesheets_einbinden


    Zitat

    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?

    Ja.

  • 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? =O


    Danke für ein paar Hinweise und Tipps!