Fotogalerie mit CSS

Hallo,

So nun habe ich mal versucht meine Fotogalerien umzubauen
und würde mich sehr freuen, wenn Ihr Euch das Ergebnis mal anschauen könntet:

http://www.house-of-blue-eyes.de/fotogalerie.html

LG
Moni

02.03.2007 18:35


Ich sehe weder Fotos, noch verbergen sich welche hinter den Platzhaltern.

Ich hab jetzt auch endlich einen sinnlosen Weblog....

02.03.2007 21:20


Hallo Moni,

bist du grade am Umbauen? ich habe mir die Seite angeschaut, als die Bilder verschwanden.

Vor dem Verschwinden hat auch in Opera alles funktioniert. Allerdings hat diese Gallerie nicht den Vorteil, dass die größeren Bilder erst beim beim Hover geladen werden. Optisch ok, aber Besucher mit dünner Leitung müssen beim Laden der Bilder etwas Geduld mitbringen

02.03.2007 21:24 | geändert: 02.03.2007 21:24


Hi,

ja sorry, ich hatte ein paar Probleme - jetzt sollte es wieder funktionieren.

Jörg, wie kann ich das besser machen bzw. ändern um allen gerecht zu werden?

LG
Moni

02.03.2007 21:30 | geändert: 02.03.2007 22:04


Hm, eine verträglichere Ladezeit pro Seite könnte erreicht werden, wenn die großen Bilder auf einer Extra Seite geladen werden (z.B. Popup) - oder wenn sie über JavaScript nachgeladen werden.

Auf der Webtool-Seite von 1und1 kann man übrigens die Ladezeiten messen

02.03.2007 22:20 | geändert: 02.03.2007 22:22


Hi Jörg,

viele Leute blocken doch das Popup, oder?
Wie sieht es mit Java aus, auch viele haben es deaktiviert, oder?

Scheint nicht so einfach zu sein, hm

Wenn ich die Bilder weiter komprimiere, leidet die Qualität doch sehr...

Ich habe jetzt in Fotogalerie Billy noch die alten Seiten hochgeladen,
so heißen, beim anklicken kann man auch hier weiter navigieren...

LG
Moni

02.03.2007 23:50


viele Leute blocken doch das Popup, oder?

Nur die Popups, die sich ohne Interaktion des Users öffnen wollen.

Wie sieht es mit Java aus, auch viele haben es deaktiviert, oder?

Du meinst JavaScript, nehme ich an. Da hast du recht - die Popups waren auch nur ein Beispiel von mir. Die großen Bilder könnten sich ja auch über einen normalen Link im selben Fenster öffnen.

Ich habe jetzt in Fotogalerie Billy noch die alten Seiten hochgeladen,
so heißen, beim anklicken kann man auch hier weiter navigieren...

Das bringt den Modem-Usern aber keinen Vorteil, da die großen Bilder ja immer noch bereits auf der Gallerieseite geladen werden. - du kannst das ja mit dem von mir verlinkten Tool auch nachmessen

Wenn der Modem-User sich alle Bilder in groß anschaut, macht es insgesamt natürlich keinen Unterschied, bei deiner CSS-Gallerie muss er halt am Anfang warten, dass alle Bilder geladen sind, während sich die Ladezeit bei herkömmlichen Gallerien auch auf die Unterseiten bzw. Popups verteilt.

03.03.2007 00:32


Hi Jörg,

hast Du mir vielleicht eine Beispielseite, wo ich mir das mit den Popups anschauen kann?

LG
Moni

04.03.2007 13:59


Hallo Moni,

vom Prinzip her kannst du ein Popup folgendermaßen realisieren:

1. folgende JavaScript-Funktion in den head Bereich:

<script type="text/javascript">
function popup(url) {
  Popup = window.open(url, 'Popup', 'width=500, height=300, left=400, top=100, scrollbars=no');
  Popup.focus();
}
</script>

Die Werte für die Breite, Höhe und Position kannst du noch an deine Wünsche anpassen

2. Die kleinen Thumbnail-Bilder werden dann mit Links versehen, die diese Funktion aufrufen:

<a href="bild-1.html" onclick="popup(this.href); return false;"><img src="bild-1-klein.jpg" alt="Bild 1" /></a>
<a href="bild-2.html" onclick="popup(this.href); return false;"><img src="bild-2-klein.jpg" alt="Bild 2" /></a>

Bei deaktiviertem JavaScript werden die Seiten bild-1.html etc. ins selbe Fenster geladen

04.03.2007 16:10 | geändert: 04.03.2007 16:12


Hallo Jörg,

verstehe ich das jetzt richtig, ich muss also dies hier:

<script type="text/javascript">
function popup(url) {
Popup = window.open(url, 'Popup', 'width=500, height=300, left=400, top=100, scrollbars=no');
Popup.focus();
}
</script>

in meine Index der jeweiligen Fotogalerie einbinden?

Das hier müsste ich dann in meiner CSS-Datei ändern?

<a href="bild-1.html" onclick="popup(this.href); return false;"><img src="bild-1-klein.jpg" alt="Bild 1" /></a>
<a href="bild-2.html" onclick="popup(this.href); return false;"><img src="bild-2-klein.jpg" alt="Bild 2" /></a>

Sorry, stehe heute ein bissel neben mir...

LG
Moni

04.03.2007 18:19