Lightbox gallery

  • Hallöchen,


    mal ne Frage, gibt's ne Möglichkeit wie ich bei Klick aus einem Bild eine Gallerie in einer Lightbox darstellen kann?

    Also bspw hat man auf einer Seite 3 Bilder. 1 Bild von Katzen, 1 von Hunden und 1 von Hühnern.


    Bisher passiert folgendes wenn ich auf das Bild der Katze klicke: Das Bild wird vergrößert in einer Lightbox dargestellt.


    Das soll passieren: Das Bild sowie weitere Katzenbilder sollen als Art Gallerie (oder Slideshow) in der Lightbox dargestellt werden. Ich hoffe Ihr wisst was ich meine


    Kann ich das irgendwie ohne JS umsetzen?



    https://github.com/BlackrockDi…bootstrap-4-col-portfolio

    Falls benötigt kann man sich hier den gesamten Code anschauen -> nutze ein Bootstraptemplate dafür

  • Das sieht auf dem ersten Blick nicht so aus wie ich mir das vorstelle, kann ich damit denn umsetzen dass man lediglich 1 Bild sieht was man anklicken kann und nach Klick auf dem Bild dann mehrere Bilder als Slideshow oder Gallerie dargestellt werden.

    Also bei Highslide wäre das "with gallery" nur dass man nicht vorab die gesamte gallery sehen kann, weist du was ich meine?

  • Ok hat sich schon erledigt, der Hinweis dass es mit CSS sehr komplex wird hat schon gereicht dass ich bei google nach JS Lösungen schaue und siehe da der erste Link war's schon :)


    Falls es jemanden interessiert nachfolgend noch die Lösung:


    https://www.w3schools.com/howto/howto_js_lightbox.asp


    Den folgenden Code musst ich noch entfernen damit man nur 1 statt alle 4 Bilder sieht

    Code
    1. <div class="column">
    2. <img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
    3. </div>
    4. <div class="column">
    5. <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
    6. </div>
    7. <div class="column">
    8. <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
    9. </div>
  • ok zu früh gefreut... irgendwie funzt das nicht bei mir

    Ich hab den geänderten code mal blau gefärbt, kann mir vielleicht jemand sagen warum es bei mir nicht so wie bei W3 Schools aussieht? Bei denen wird das Bild in einer vernünftigen Größe angezeigt, die Pfeile (nächstes/vorheriges Bild) sind an der richtigen Position etc.

    Bei mir ist das Bild viel zu groß, so dass man nur ca. 60-70% des Bildes sieht (scrollen geht in Lightbox nicht) und die Pfeile sind unter dem Bild und auch ohne hover Effekte o.ä.




  • Bei mir sieht's so aus wie auf dem Bild

    Es funktioniert soweit alles bis auf die Lightboxgallerie


    Ich möcht damit erreichen, dass man nicht eine extra Portfolioseite öffnen um sich alle Bilder zum dazugehörigen Projekt anzuschauen sondern.


    Welche divs meinst du? Hab mal geschaut aber immer wenn ich ein div(wo ich dachte dass es offen ist) geschlossen habe hats die komplette Seite zerhauen


    4 Col Portfolio Start Bootstrap Template.png

  • kuck mal den post von mir an ,da sind 2 fiddles drinne .Ist da nix bei was dir passt -Undwas meinst du das du keine extra Portfolioseite anzeigen willst . sollen die bilder ohne lightbox geöffnet werden .direkt auf der seite ,zb überden Fotos ,ider wie ?


    undwas soll der mousein und mouseout zu bedeuten zu haben . soll das so bleiben

  • Ne leider nicht also hab jetzt nochmal alles genau so gemacht wie du in deinem fiddle aber es kommt bei mir nicht so raus wie bei dir

    Beim HTML Teil hast du als letztes 3x </div> --> wenn ich das einfüge zerhauts mir die gesamte Seite schon bevor man die Lightboxgallerie öffnet


    Beim CSS hab ich auch alle Änderungen übernommen aber das hat auch nicht viel geändert, es sieht immer noch genau so aus wie auf dem Bild oben bei mir. Beim JS hast du ja nichts geändert so wie ich es gesehen hab.


    Im ersten Beitrag hab ich auch noch einen Link für die kompletten Code eingefügt, falls das irgendwie behilflich ist



    & ne ne das soll schon mit Lightbox geschehen, nur bisher ist es so, dass ich das Vorschaubild zwar mit Hover angepasst habe. Wenn man aber alle Bilder zum Projekt sehen muss, muss man auf das Projekt klicken, dann öffnet sich eine neue Seite und dann muss man noch auf das Bild klicken um die Lightboxgallerie zu öffnen.

  • Hast du das irgendwo schon mal online gestellt ? Weil wenn du alles aus meiner Fiddle kopierst https://jsfiddle.net/basti1012/s5a7wvc3/4/ sollte das auch gehen . Denke das da irgendein andere Code aus Css oder Script da mit rein Funkt, Probiere es mal mit diesen Script .

    Die letzten 3 divs gehöhren eigentlich schon mit zu den Script.Ohne wird es halt nicht so angezeigt wie es soll.


    Hast du Link zurSeite ?

    Wenn nicht zeig mal dein Code ,anbesten die ganze HTML Seite

  • Die CSS hat ein so eingefügt, dass man die sehen kann.

    Normalerweise hab ich die auch nur verlinkt

    <!-- Bootstrap core CSS -->

    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">


    <!-- Custom styles for this template -->

    <link href="css/4-col-portfolio.css" rel="stylesheet">


    Hab meinen Fehler auch schon gefunden, ich habs in bootstrap.min.css gespeichert -> funktioniert nicht

    Wenn ichs aber in 4-col-portfolio.css speicher dann funzt es



    Also das ist die aktuelle CSS



    Dann habe ich noch die Breite der Slides eingestellt (pack das sobald alles funzt natürlich noch in die CSS)

    Code
    1. <div class="mySlides">
    2. <div class="numbertext">1 / 4</div>
    3. <img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca3.jpg" style="width:100%">
    4. </div>


    Soweit sieht es nun auch schon gut aus, ABER 2 Kleinigkeiten stimmen noch nicht ganz

    Zum einen werden die Vor und Zurück buttons in der Lightbox immer mittig an der Lightbox ausgerichtet. Ich möchte dass die Mittig vom aktuell angesehen Bild positioniert werden.

    Und die kleinen Vorschaubilder unter dem aktuell angezeigten Bild werden momentan noch untereinander angezeigt, schöner wäre es wenn diese nebeneinander in einer Reihe angezeigt


    Also im Endeffekt soll es genau so wie bei W3School aussehen

  • mach mal bitte fiddle fertig,


    wenn ich aus den Datein ne Fiddle mache werden die rschaubilder nebeneinander dargestellt .nd die vor und zurück Buttons, ja das kann man bestimmt anpassen. Aber ich glaube ich habe da kein Nerv mehr zu heute,irgendwie ist es heute nicht mein Tag.