• Hallo zusammen,


    ich habe mir eine Fotogalerie zusammengebaut und auf einen Testserver gestellt. http://lupus.bplaced.net/perennial.html Mit Chrome funktioniert alles bestens, aber wenn ich die Seite mit Firefox aufmache, ein Foto auswähle und dann auf das kleine Kreuz in der rechten oberen Ecke klicke, damit wieder die Übersicht angezeigt wird, springt die Anzeige hin und her. Das ist bei Chrome nicht der Fall. Ich habe dafür keine Erklärung. Kann mir jemand weiter helfen?


    Danke.

  • Eigentlich macht Firefox alles richtig weil das

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

  • Hallo Basti1012, danke erst mal. Ich habe es mit disply:none getestet. Das funktioniert. Leider kann man dann jedes Foto nur einmal anschauen. Das ist nicht gut. Mit JS kenne ich mich gar nicht aus. Kannst du mir helfen?

  • 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

  • Danke bast1012. Ich werde mich am Wochenende mal drüber her machen. Das mit dem <iframe> mache ich für eine Bekannte, die ihre Webseite um's Verrecken nicht auf neue Gegebenheiten anpassen will. :cursing: Ich fummle schon seit Tagen damit rum! Mir wäre hier ein Grid-System lieber. Vielleicht kann ich sie noch für ein neues Design überzeugen.

  • Hi basti1012, ich habe getestet und es sieht gut aus. Musste ein Bisschen die Größen anpassen. Wie bekomme ich jetzt die <figcaption> unter die Fotos?

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

  • 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

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

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

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

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

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

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

    Code
            $("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.

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

    Code
            $("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 ...

    Hallo Sempervivum danke für das Script. Leider funktioniert der Code bei mir nicht. Die Fotos werden bei Anklicken nicht größer! :wacko:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!