• Hallo @all,


    Nun möchte ich für mich doch ein schwieriges Thema angehen, worüber andere vielleicht nur lächeln können. Ich möchte eine Fotogallery erstellen nur mit HTML und CSS. Habe schon weitläufig im Netz gesucht, was dem gleich kommt, was ich mir vorstelle. Bin leider nicht fündig geworden. Die Frage ist, ob man dies auch ohne Javascript umsetzen kann. Hab selbst schon versucht mit Lightbox oder auch Fancybox das Vorhaben um zu setzen. Auch bei Codepan habe ich schon erfolglos gesucht. Leider bin ich nicht weiter gekommen, als Miniaturbilder anklickbar zu machen. Ich beschreibe mal meine Vorstellung. Ich möchte eigentlich nur ein Miniaturbild zum anklicken und darunter soll sich dann die Gallery mit mehrere Bilder befinden durch die man vor und zurück blättern kann. Der Hintergrund sollte dunkel transparent sein. Das Ihr euch das einigermaßen vorstellen könnt, geht bitte auf https://fancyapps.com/fancybox/3/. Unten unter Demos. Open/close animation type auf zoom stehen lassen. Transition effect between slides stellt Ihr auf slide. Elements Navigation arrows und Translation auf German. In dem Beispiel seht Ihr jedoch mehrere Miniaturbilder, ich möchte nur eines.

  • Zitat

    In dem Beispiel seht Ihr jedoch mehrere Miniaturbilder, ich möchte nur eines.

    Das ist eine etwas ungewöhnliche Anforderung an eine Galerie aber sie ist mir früher schon mal begegnet und es ist kein Problem, es so zu realisieren. In der Doku für die API der Fancybox:

    https://fancyapps.com/fancybox/3/docs/#api_usage

    wird beschrieben, wie man eine Galerie durch Javascript, ohne HTML und Vorschaubilder anlegen kann. Versuche, ob das dem entspricht, was Du dir vorstellst.

  • Das ist eine etwas ungewöhnliche Anforderung an eine Galerie aber sie ist mir früher schon mal begegnet und es ist kein Problem, es so zu realisieren. In der Doku für die API der Fancybox:

    https://fancyapps.com/fancybox/3/docs/#api_usage

    wird beschrieben, wie man eine Galerie durch Javascript, ohne HTML und Vorschaubilder anlegen kann. Versuche, ob das dem entspricht, was Du dir vorstellst.

    Das ist ja sehr lieb von Dir gemeint, Sempervivum, aber ich versteh da nur Bahnhof. Wir haben das mal in einer Weiterbildung mit der Lightbox gemacht. Mir ist leider der Stick abhanden gekommen und nun steh ich da und muss selbst irgendwie eine Lösung finden. Das ein zigste, woran ich mich noch erinnert kann, das der Dozent den Miniaturbildern ein display: none; verpasst hat Hab schon überlegt, ob man das irgendwie mit einem input Button hinbekommen kann. Kann man einem input Button ein div übergeben?

  • Das ist nicht besonders kompliziert. Hier eine Demo mit Kommentaren, versuche, es zu verstehen und prüfe, ob es deinen Vorstellungen entspricht:

  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

    Das versteh ich schon eher. Du verweist hier auf die Website von Fancybox. Ist es nicht besser Fancybox herunter zu laden und die Dateien auszulagern? Genügt dann die min.css und die min.js?

  • Zitat

    Ist es nicht besser Fancybox herunter zu laden und die Dateien auszulagern? Genügt dann die min.css und die min.js?

    Das hätte den Vorteil, dass Du mit der Galerie unabhängig vom CDN bist und dass sie auch ohne Verbindung zum Internet funktionieren würde.


    Zitat

    Hihi, das wird bei 100 Bildern aber ne lange Liste. Abkürzen kann man das wohl nicht?

    Das kann man abkürzen, indem man die Liste mit einem kleinen PHP-Skript generiert. Einschränkung dabei: Es entsteht nur die Liste mit den Dateinamen, die Beschreibungen müsstest Du immer noch manuell eingeben.

  • Das kann man abkürzen, indem man die Liste mit einem kleinen PHP-Skript generiert. Einschränkung dabei: Es entsteht nur die Liste mit den Dateinamen, die Beschreibungen müsstest Du immer noch manuell eingeben.


    Oh mein Gott. PHP hab ich auch keine Ahnung. Hab bisher alles nur mit HTML und CSS gemacht. :(:(:(

  • Code
    1. <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
    2. <link rel="stylesheet" type="text/css" href="js/jquery.fancybox.min.js">

    Die erste Zeile ist OK, die Syntax für die zweite gilt jedoch nur für ein Stylesheet, für ein Javascript muss es so aussehen:

    Code
    1. <script src="js/jquery.fancybox.min.js"></script>

    Außerdem musst Du auch jQuery einbinden, und zwar vor dem Fancybox-Skript, so:

    Code
    1. <script src="js/jquery.min.js"></script>
    2. <script src="js/jquery.fancybox.min.js"></script>
  • Sempervivum, nun hätte ich doch gern noch ein paar Fragen. Ich würde gern ein paar Stylesheets abändern. Da ich nicht genau weiß, wie ich das hier machen kann, hab ich einfach mal etwas ausprobiert. Zuerst habe ich im Stylesheet der Fancyboc geschaut. Dort hab ich leider keinen Überblick. Hab da nicht mal die ID "" starting gefunden. Dann habe ich hier eine eigene css Datei extra angelegt. Das komische ist, das er manche Styles von mir annimmt und manche nicht. Das Startbild zum Beispiel soll rund sein und 200pxx200px bekommen. Das hat er auch so angenommen. Aber nun wollte ich dem noch einen box-shadow verpassen, das macht er wieder nicht. Des weiteren sollte das Bild ein Hover bekommen. In der geöffneten Fancybox wollte ich auch ein paar Änderungen vornehmen, die er aber auch nicht annimmt. Am besten, ich stelle mal meine css mit rein. Kann man das überhaupt umsetzen und wenn, wie?


  • Zitat

    Dort hab ich leider keinen Überblick. Hab da nicht mal die ID "" starting gefunden.

    Das ist die ID des Startbildes "startimg" und die Fancybox "weiß" nichts von diesem Bild, weil wir es nur verwenden, um sie zu starten.


    Zunächst zu dem Schatten: Die Erklärung, warum es nicht funktioniert und eine Lösung findest Du z. B. hier:

    http://www.corelangs.com/css/box/image-shadow.html

    Zitat

    Since all HTML block elements are considered as boxes, you can apply a shadow to any block-level element.

    Ein img ist jedoch kein Blockelement, daher kann das mit dem Schatten nicht funktionieren. Lösung, wie dort angegeben, indem Du einen Container darum herum legst.


    Zu dem Hover:

    • Du verwendest dort die ID "starting" statt "startimg".
    • Eine Hintergrundfarbe kann nicht funktionieren, da das Bild ja das Element vollständig ausfüllt. Du kannst jedoch z. B. die opacity verändern oder einen Rahmen. Oder mit filter andere Effekte verwenden. Wobei das filter noch nicht stabil etabliert ist, siehe hier:
      https://developer.mozilla.org/de/docs/Web/CSS/filter
  • Zitat

    In der geöffneten Fancybox wollte ich auch ein paar Änderungen vornehmen, die er aber auch nicht annimmt.

    Code
    1. .fancybox.open {
    2. background-color: rgba(0, 0, 0, 0.5);
    3. background-color: red;
    4. font-size: 20px;
    5. color: #40E0FD;
    6. }

    Ich vermute beinahe, dass Du das aus dem Javascript abgeleitet hast:
    $.fancybox.open(

    denn im CSS der Fancybox finde ich keine Klasse "open".

    Wenn Du in den Elementen der Fancybox etwas ändern willst, suchst Du die Elemente am besten im HTML-Inspektor deines Browsers heraus und liest jeweils die Klasse(n) ab. Damit kannst Du dann das Styling der betr. Elemente ändern. Das CSS dafür nach dem Einbinden des CSS der Fancybox notieren oder einbinden, denn was zuletzt definiert wurde, setzt sich durch. Das kann noch etwas komplizierter werden, siehe hier:
    https://wiki.selfhtml.org/wiki…utorials/Einstieg/Kaskade

  • Hallo Sempervivum,

    Dank deiner zahlreichen Tipps konnte ich nun schon so einiges abändern, so das die Gallery langsam die Gestalt annimmt, die ich mir vorstelle. Vielen Dank dafür. Hast du vielleicht noch ein oder zwei Ratschläge, wie ich die Bilder in der geöffneten Fancybox und nur die links und rechts Pfeile ansprechen kann? Ich möchte den Bildern einen Rahmen und einen Schatten verpassen. Der Hintergrund für die Pfeile soll rund werden und die Pfeile selbst würde ich auch gern durch andere ersetzen. Mit .Fancybox-button spricht er alle Buttons an. Das ganze hier wird langsam zu einer großen Herausforderung für mich. Bin froh schon so weit zu sein, dank deiner Hilfe.