Fotogalerie

Eigentlich macht Firefox alles richtig weil das

#ausgabe li ul:active{
left:-9999px;
}

Sag ja das bei active( ZB Mausklick ) das Bild aus den Sichtbaren Bereich geschoben wird .Also nur wenn du die Maus gedrückt hälst.Läßt du die Maus wieder Los ,kommt das Bild da hin wo es vorher wahr.Zumindest ist es jetzt bei dir der Fall.Ob das so sein muss weiß ich jetzt auch nicht genau.Aufjeden Fall musst du da was machen . Mach das Left:-9999px; weg und schreib display:none hin. Dann kann man aber nur jedes Bild einmal anschaun. Oder mach das X doch ganz weg ,durch klick aufs Foto verschwindet das ja auch . Oder du machst etwas Javascript dazu dann kann man den Fehler auch beheben. Man kann den Fehler bestimmt auch mit Css lösen,aber mir fält gerade nix ein .Bin noch nicht richtig wach ,brauche erst Kaffee und dann kucke ich mal nach einen anderen weg.Oder ein anderer hat in der zwischen zeit eine idee,die mir gerade nicht einfallen tut

jo ich lasse mir gleich mal was einfallen.Mit Javascript ist das kein Problem.Ohne muss ich mal kucken ob ich da was finde

Mal nee frage,Warum bindest du das als <iframe> ein ? .Machdie Seite die du da einbindest doch vernünftig fertig .das spart Platz auf den server .Ist zwar nicht viel,aber finde ich besser als iframs.

Aber das ändert nix an dein Problem.

Ich kucke jetzt mal

Ich habe mal das ganze ding umgebaut.Ich hatte keine Lust daran rum zufummeln bis es ging.Heute ist irgendwie nicht mein Tag zum denkenund fehler suche.

Deswegen habe ich es so gebautwie ich es gemacht hätte.

Geht auch in firefox und andere Browser denke ich auch .Habe hier nur 4 zur auswahl.

http://sebastian1012.bplaced.net/galerie_lupus.html

Zitat von Lupus_III

Was verbirgt sich dahinter - <link rel="stylesheet" href="http://adblockers.opera-mini.net/css_block/default-domainless.css" type="text/css" /> ?

Ja die scheisse regt mich auf . Hat irgendwas mit den addblocker zu tun.Auch wenn du es löscht es kommt immer wieder im quellcode rein .Wie es darein kommt habe ich auch noch nicht verstanden.Kannst du aber eigentlich löschen. Aber ich google mal nach weil interesiert mich jetzt auch mal.

Zu dein anderen Problem. wie willst du das den haben ,das in jeden Bild ganz unten eine Beschreibung rein kommt ?

Erklären kann ich das jetzt noch nicht weil ich es selber erst testen muss.Aber mache ich gleich mal.Ich werde es heute noch fertig machen ,zumindest versuchen

meinst du so http://sebastian1012.bplaced.net/galerie_lupus.html

Da gibt es doch fertige Plugins wie Fancybox, die so etwas wie Bildbeschreibung von Haus aus unterstützen. Mir unbegreiflich, dass man davon keinen Gebrauch macht, sondern immer wieder von neuem das Rad neu erfindet.

Ob genau so weiß ich nicht.Aber die Fancy Boxen haben schon einige Vorteile.Die Fertigen Bibiliotheken funktionieren eigentlich immer zu 99,9999 Prozent. Lassen sich meist leicht anpassen und man erspart sich den ärger den Code erst schreiben zu müßen. Ich benutze so gut wie keine Bibiliotheken weil ich erst selber versuchen will.Als Javascript Neuling sollte man auf jeden Fall auf die Bibiliotheken zugreifen ,weil solche Scripte für Anfänger doch etwas kompliziert sein können um sie selbst zu schreiben. Fals ich mal eine Foto Galerie auf Meiner Home Page veröffentlichen will,werde ich mich auch nach was fertigen um schauen.

Der Vorteil ist auch ,wenn du mal probleme hast das irgendwas nicht läuft ,können dir meist mehr helfen ,weil sie das Script schon kennen oder sich nicht erst durch den Fremd Code durch wühlen müssen.

Zitat

Ist damit eine Bildbox, wie von basti1012 realisiert, machbar? 3 Thumbnails in Reihe, n Reihen . Bei Klick großes Foto?

Wovon ich spreche, ist eine Lightbox. Davon gibt es diverse, ich empfehle Fancybox. Diese erledigt das Aufpoppen des Fensters mit dem großen Bild. Der Aufbau der Galerie mit Zeilen und Spalten ist nicht Bestandteil davon, diese kannst Du lassen, wie sie jetzt sind.

Kann nur bestätigen, was Sempervivum sagt.

Ich mache das gerne mit Colorbox. Bei Gipspferd.de gibt es sogar eine Version mit CSS. Die fand ich total cool.

Beispiele bei mir: https://einsterneinberg.de/bildergalerie.php

Aber bei den Lightboxen sind die Geschmäcker halt unterschiedlich.

Just my 5 cents.

PS: Bastis Galerie ist vom HTML her ja schon sehr gut. Ich habe mal das CSS auf Flex umgestellt, damit sie responsiv wird und Fancybox3 hinzu gefügt:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body>
    <style>
#wrapper {
            max-width: 600px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
        }
        figure {
            margin: 0.5em;
            flex-basis: calc(33% - 1em);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        figure img {
            width: 100%;
            height: auto;
            min-height: 1px;
        }
        figure a {
            min-height: 1px;
        }
        figure figcaption {
            text-align: center;
        }
    </style>

    <div id="wrapper">
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />
            <figcaption>
                Text Bild 1
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />
            <figcaption>
                Text Bild 2
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />
            <figcaption>
                Text Bild 3
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />
            <figcaption>
                Text Bild 4
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />
            <figcaption>
                Text Bild 5
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />
            <figcaption>
                Text Bild 6
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />
            <figcaption>
                Text Bild 7
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />
            <figcaption>
                Text Bild 8
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />
            <figcaption>
                Text Bild 9
            </figcaption>
        </figure>
    </div>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
        <script>
        $("figure img").each(function(idx, item) {
            var url = $(this).attr("src");
            var caption = $(this).next("figcaption").text();
            $(this).wrap('<a></a>');
            var atag = $(this).parent();
            var caption = atag.next("figcaption").text();
            atag.attr({href: url, "data-fancybox": "", "data-caption": caption});
        })
    </script>
</body>

</html>

Ist schon immer interesant was so eine Bibiliothek so kann. Vor allem nur 7 Zeilen Javascript und voll Funktions tüchtig. Schade das die Fancybox kein weiter button hat um die Bilder zu Blättern ,damit man nicht immer auf und zu machen muß um alle Bilder zu sehen.

Oder habe ich das übersehen?

Aber sonst schon cool. Hauptsache den TO gefällt das. Besser kann er es ja fast nicht mehr bekommen.

Edit habe mal gerade auf Code geachtet ,der ist durch Fancy und Flexboxen um einiges kürzer geworden,so soll es sein .

Zitat

Schade das die Fancybox kein weiter button hat um die Bilder zu Blättern ,damit man nicht immer auf und zu machen muß um alle Bilder zu sehen.

Das geht selbstverständlich auch, indem man für data-fancybox einen Namen definiert:

        $("figure img").each(function(idx, item) {
            var url = $(this).attr("src");
            var caption = $(this).next("figcaption").text();
            $(this).wrap('<a></a>');
            var atag = $(this).parent();
            var caption = atag.next("figcaption").text();
            atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption});
        })

Versuch mal mit der Maus horizontal zu wischen oder auf dem Handy mit dem Finger ...

Ja da gibt es jetzt nix mehr zu beanstanden.Funktioniert bestens. Habe das erstmal als fiddle gespeichert.Da ich ja gerade versuche meine Homepage zu verschönern und da auch mal Bilder rein sollen,habe ich zumindest schon mal eine Fancbox . Die kann man ja 1 zu 1 übernehmen. Hast du erfahrung mit der Fancbox? Wie reagiert die Bibiliothek wenn man nicht wie hier 9 Bilder sondern zb 150 Bilder hat?

Ich denke mal das sollte wohl kein problem sein oder? Wir sind ja nicht mehr in den 90 igern wo 200 mb ram viel wahren Man man das wahren Zeiten,jeder ha in der Schule angegeben er hätte den besten Rechner mit 200 Ram. Ha heute hat jeder Taschenrechner mehr Leistung

Zitat

Wie reagiert die Bibiliothek wenn man nicht wie hier 9 Bilder sondern zb 150 Bilder hat?

Da erwarte ich keine Probleme. Die Elemente der Lightbox sind ja nur einmal vorhanden und werden nicht für jedes Bild extra angelegt.

Habe aber selber keine Erfahrung mit Fancybox weil ich selber iLightbox benutze.