Bildergalerie

  • Hallo,

    eine Frage bezüglich Bildergalerien. Würdet Ihr sowas mit einer vorgefertigten Lösung (z.B. lightbox) realisieren oder selber programmieren'?

    Man muss dazu sagen, dass ich Laie bin, und mir alles selber beigebracht habe oder erst beibringe. Ist Lightbox ok, oder gibt es bessere Systeme?

    Kann man Lightbox auch responsive machen, bzw. ist die Lösung responsive?

    Danke fü rEure Hilfe.

  • Ich finde das Lightbox und Fancybox schon viele möglichkeiten bieten.

    Wenn du was sehr ausgefallenes haben willst wirst du es wohl selber machen müßen ( obwohl es für fast alles nee Lösung gibt ).

    Wenn man aber mit wennig Code viel erreichen will kann man das auch selber bauen weil jedes eingebunde Script extra Daten sind.Bei den meisten Scripten ist mehr Code drinne als wie man gerade brauch.

    Ansonsten bin ich auch PRO Fancybox:thumbup:

  • Hallo,

    ich habe derzeit eine Bildergalerie (rund 50 Bilder) mit flex realisiert. Dazu habe ich das Bild in Originalgröße gespeichert und in der Galerie mit width und height verkleinert. Folgendes CSS vergrößert die Bilder beim hovern:

    Das funktioniert auch schon recht gut, und wenn ich die Bilder im Html nicht mit divs einbinde, sondern mit "figure", dann könnte ich mittels des Elements figurecaption auch den Text dazu einbinden, der dann ja auch beim skalierten Bild angezeigt wird. Meine Frage dazu: Entspricht diese Lösung in etwa der lightbox Lösung (natürlich nicht so perfekt) und ist diese Lösung auch responsive (wenn ich die Bilder z.B. mit max-width und max-height auszeichne), oder wäre hier lightbox doch die bessere Alternative.

    Danke für die Hilfe.

  • Zu einer Vorschau gehört die Bilder zunächst im kleinen Format anzubieten um Traffic deiner Besucher zu sparen und die Ladezeit in Grenzen zu halten.

    Wenn die Bilder 'eh alle in voller Auflösung geladen werden können die also auch gleich so groß wie möglich angezeigt werden.

    So werden bei Lightbox auch die Bilder in der Übersichtseite kleinformatig geladen. Deine Lösung hat mit Lightbox also nichts zu tun.

  • Die Bilder werden mit den Angaben "height" und "width" kleiner angezeigt, aber doch mit der höheren Auflösung geladen. Habe ich das richtig verstanden?

    Es wäre also besser, meine Bildergalerie mit lightbox zu realisieren. Verstehe ich das richtig?. Ist lightbox aber auch responsive, bzw. kann man das CSS so bearbeiten, dass es responisve wird? Danke für Eure Hilfe.

  • Was ich aus diesem Artikel nicht herauslesen konnte, ist die Information, ob es auch möglich ist, die Bilder mit Text zu versehen.

    Weiters wollte ich auch wissen, ob diese Version der Lightbox auch responsive ist: https://lokeshdhakar.com/projects/lightbox2/.

    Eine der beiden Varianten werde ich dann bevorzugen.

    Man sieht daher auch, dass mein Google funktioniert ;);)

    Einmal editiert, zuletzt von Spider67 (29. November 2019 um 10:18)

  • Beziehen sich dann die beiden genannten Links auf jeweils dieselben Dateien???

    Wenn man sich nämlich die Links der beiden Beispiele ansieht, werden die images jeweils mit unterschiedlichem HTML eingebunden.

    Oder kann man beide Beispiele auf der github Seite downloaden?

    Einmal editiert, zuletzt von Spider67 (9. Januar 2020 um 07:12)

  • Oder kann man beide Beispiele auf der github Seite downloaden?

    Wenn du mal auf Download geklickt hättest und dann in das Zip-File rein gesehen hättest, hätte sich die Frage von alleine erledigt. Jetzt mal ehrlich, zeige doch endlich mal mehr Eigeninitiative!

  • Also jetzt habe ich auf den Download geklickt, in die Zip Files reingesehen und meine Frage ist noch immer nicht beantwortet.

    Ich wollte wissen, ob beide Links auf die selben Dateien verweisen oder nicht. Und warum bei beiden Versionen unterschiedliches html angeführt wird.

    Dies wird durch Durchsicht der zip Dateien nicht beantwortet, außer man ist Hellseher

  • Also bitte! Jetzt downloade die Zip-Datei, entpacke sie und starte die index.html im Verzeichnis examples. Somit siehtst du, dass du ein lauffähiges Beispiel hast. Was willst du noch?

  • Spider67 ich versuche mal zu helfen.

    1. Du gehst auf den Link https://github.com/lokesh/lightbox2

    2. der Grüne Button mit "Clone or Download" lädst du die Zip Datei runter.

    3.Auf deinen Pc Entpacken.

    4.Du erstellst einen Ordner auf deinen Server ( den nennen wir jetzt mal TEST )

    5.Den Inhalt des erstellten Ordner aus Punkt 3 ( "lightbox2-dev") läds du jetzt auf deinen Server in den Ordner TEST

    6.Dann rufst du im Browser diesen Link auf

    Code
    http://DEINE_WEB_ADRESSE.de/TEST/examples/index.html

    Ich wahr mal so nett und habe das gleiche gemacht. anstatt wie hier im Ordner TEST , habe ich den Ordner "loesungen/forenhilfe/"

    genommen.Dieser Link sieht dann so aus https://sebastian1012.bplaced.net/loesungen/fore…ples/index.html

    Als Ergebniss kommt dann das raus was man bei Punkt 1 runtergeladen hat

  • Vielen Dank für Deine Hilfe Basti, mir ist die Funktion und das was ich tun muss schon klar.

    Mir ist es nur darum gegangen, ob einer der beiden Links eine Lightbox Variante enthält, die mit eienm Bild auskommt, oder ob man immer 2 Bilder in unterschiedlicher Größe speichern muss

  • Mir ist es nur darum gegangen, ob einer der beiden Links eine Lightbox Variante enthält, die mit eienm Bild auskommt, oder ob man immer 2 Bilder in unterschiedlicher Größe speichern muss

    Das hättest du alleine mit dem Beispiel ausprobieren können.

    Damit du mir das auch glaubst, aus dem HTML-Code des Beispieles:

    Code
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>

    Wenn man sich das betrachtet, sieht man eindeutig, dass da 2 Images benutzt werden.

    Einmal editiert, zuletzt von Bandit (10. Januar 2020 um 08:49)