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

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

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

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.

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