CSS Gallerie - Ich hab mal ein Beispiel geschrieben
lima-city → Forum → Die eigene Homepage → Promotion
ansatz
ansehen
ansicht
bedarf
benutzer
beschreibung
bild
browser
code
definition
element
erzeugen
galerie
http
image
ladezeit
liste
meinung
span
url
-
Ja wie der Titel schon sagt, habe ich eine kleine Gallerie nur mittels CSS erstellt, sie öffnet sich ähnlich wie die bekannten lightbox-scripte, nur dass Sie halt kein script ist, sondern halt nur mittels hover-effekt durch CSS realisiert wurde.
Hier könnt ihr sie euch ja mal ansehen: http://nemoinho.lima-city.de/css-gallery/v1.htm
Sie funktioniert in jedem Browser der CSS 2.1 beherscht, sprich der IE6 ist auf jeden fall ausgeschlossen, ie 7er könnte es möglicherweise schon laufen und im IE8 sollte es eigentlich gehen. Die anderen Browser können es alle samt, auch schon in alten Varianten.
Zur Beschreibung, die Gallerien öffnen sich durch überfahren der thumbnails und erstreckt sich dann über das ganze Fenster, in der Mitte ist einmal eine vergrößerte Ansicht und auf der linken Seite eine Liste, in der man weitere thumbs sieht, diese kann man sich durch überfahren mit der Maus vergrößert ansehen. Eine geöffnete Gallerie kann man schließen indem man oben rechts auf den Closebutton fährt.
Zu den Vor- und Nachteilen
- Leider werden alle Bilder geladen, während bei einer Scriptlösung dieses nur bei Bedarf geschehen sollte
- Manchmal kommen "Endlosschleifen" (es sind keine echten Endlosschleifen, sprich belasten den Computer nicht, sondern sind nur ein Ärgernis) zustande, wenn sich der Closebutton über einem thumb zum öffnen einer Gallerie befindet
- Die Gallerie ist (noch) sehr abhängig von der Seite und deren Inhalten, auf der sie eingesetzt wird
+ Die Gallerie funktioniert auch, wenn JS abgeschaltet ist
+ außerdem ist der reine Text im Dokument wesentlich weniger als bei einer vergleichbaren Scriptvariante
+ Die Gallerien können simpel erweitert werden
Da ich jetzt meine Gallerie vorgestellt habe, würde ich gerne von euch eure Meinung erfahren.
Was haltet ihr davon?
Würdet ihr eine solche Gallerie einsetzen?
Was würdet ihr gerne anders machen/gemacht haben?
Wie könnte ich eurer Meinung nach die Gallerie verbessern?
Ich erwarte eure Antworten.
Beitrag zuletzt geändert: 1.6.2010 15:38:42 von nemoinho -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich finde die Gallerie super, vor allem, da auf JS verzichtet wurde.
nemoinho schrieb:
- Leider werden alle Bilder geladen, während bei einer Scriptlösung dieses nur bei Bedarf geschehen sollte
Eventuell könntest du die Bilder über CSS-Eigenschaft Background-Image laden und in der Liste nur Thumbnails anzeigen. -
An die background-images hatte ich auch schon gedacht, aber bisher noch nicht implementiert, der Mensch ist faul, zumal ich dann auch die thumbs mit den Bildern in einem abspeichern könnte, bzw. halt allgemein mehr sprites und entsprechend weniger ladezeiten erzeugen könnte.
Aber es freut mich zu hören, dass der JS-verzicht auf gegenliebe stößt. -
Ich finde es ja auch einen löblichen Ansatz - allerdings ein weiterer Vorteil an der JS-Galerie (außer der Ladezeit und die ist wirklich ziemlich lange) ist, dass die Bilder schön sanft einblenden, was man von deiner Galerie nicht gerade behaupten kann... Evtl. könnte man das mit CSS3 implementieren.
-
Ich hab nun die Gallerie verbessert.
Transitions habe ich noch nicht umsetzten können, da Chrome dieses Konstrukt nicht mochte:
, irgendwie ging habe ich das nur auf das hover-element bezogen bekommen, aber nicht auf ein kind davon.li span { -webkit-transitions:opacity 2s linear; opacity:.1; } li:hover span { opacity:1; }
Naja immerhin läd die Gallerie nun alle Bilder "on demand", sprich es braucht nicht mehr so viel Ladezeit, leider ist dies zugunsten der schön einfach zu integrierenden img-elemente gegangen, da nun ja alles über hintergründe läuft. Außerdem hat sich so eine ziemlich umfangreicht Datei nur für background-definitionen aufgebaut, aber wenn ich eine solche Gallerie z.B. mittels php verwalten würde wäre sie immernoch leichter zu warten als die meisten anderen, im Endeffekt immer nur ein neuer Listenpunk und eine neue bg-definition nötig ist, nur in Ausnahmen, braucht man zusätzliche Regeln.
Desweiteren habe ich die thumbnails in einen css-sprite gepackt, das spart Ladezeit und ist mit PHP auch in wenigen sekunden passiert... (ich hab sie zusätzlich auch noch optimiert).
Aber genug geschwafelt, hier ist die neuere Version:
http://nemoinho.lima-city.de/css-gallery/v2.htm
Bitte gebt mir Verbesserungsvorschläge, ich bin grade so drin. -
Ich finde die Idee eine Gallery ohne JS zu machen echt super! Mir gefällt deine Gallerie auch schon sehr gut. Und dass die Bilder on demand nachgeladen werden, finde ich auch besser, als wenn sofort alles auf einmal geladen wird.
Nur während des Ladevorgangs sieht man nur einen weißen Hintergrund und der Benutzer weiß nicht, was gerade los ist. Kommt noch ein Bild oder gibt es eh keines mehr. Hier würde ich den Ladevorgang darstellen (zB ein animiertes Gif), damit der Benutzer informiert ist, dass hier gerade noch was geladen wird. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
