CSS Bildergalerie

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

kann mir jemand vielleicht sagen, ob es möglich ist, in der folgenden Galerie beim Start Bild 1 automatisch zu laden, Im Moment werden die Bilder nach der Auswahl eines Thumbnails angezeigt. Beim Öffnen der Galerie ist so natürlich noch nix zu sehn, was ich gerne mit Bild 1 quasi als „Default“ ändern würde:

a, a:visited {color:#000;}

a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:55px; height:27px; float:left; margin:5px; z-index:50;}
a.slidea {background:url(images/burg_thumbs/BILD1.jpg);}
a.slideb {background:url(images/burg_thumbs/BILD2.jpg);}
a.slidec {background:url(images/burg_thumbs/BILD3.jpg);}
a.slided {background:url(images/burg_thumbs/BILD4.jpg);}
a.slidee {background:url(images/burg_thumbs/BILD5.jpg);}
a.slidef {background:url(images/burg_thumbs/BILD6.jpg);}
a.slideg {background:url(images/burg_thumbs/BILD7.jpg);}
a.slideh {background:url(images/burg_thumbs/BILD8.jpg);}
a.slidei {background:url(images/burg_thumbs/BILD9.jpg);}
a.slidej {background:url(images/burg_thumbs/BILD10.jpg);}
a.slidek {background:url(images/burg_thumbs/BILD11.jpg);}
a.slidel {background:url(images/burg_thumbs/BILD12.jpg);}

a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}

#container_top {position:relative; width:425px; height:480px; ; border:0px solid #000000; margin:1em auto;}

#container_top a.gallery:active, #container_top a.gallery:focus {border:1px solid #000;}
#container_top a.gallery:active em, #container_top a.gallery:focus em {display:block; position:absolute; width:400px; height:250px; top:100px; left:5px; padding:0px; color:#000; border:0px solid #3d330f; z-index:50;}
#container_top h1 {clear:both; margin:0; padding-top:200px; text-align:center; font-family: georgia, „times new roman“, serif; font-size:3em; font-weight:normal; color:#fff;}
#container_top h1 em {font-size:0.6em; color:#000;}

Vielen Dank schon jetzt!!

Gruß

Ben

#2

#container_top h1 em {font-size:0.6em; color:#000;}

#container_top a.slidea em {display:block; position:absolute; width:400px; height:250px; top:100px; left:5px; padding:0px; color:#000; border:0px solid #3d330f; z-index:50;}

leider bleibt dann aber bild1 immer sichtbar .

#3

Hi,

vielen Dank! Das hilft mir schon mal weiter. Leider hab ich noch ein Problem: Gibts ne Möglichkeit, das Bild1 (wie von dir beschrieben) erst angezeigt wird, wenn alle Vorschaubilder geladen sind?

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Hi,

vielen Dank! Das hilft mir schon mal weiter. Leider hab ich
noch ein Problem: Gibts ne Möglichkeit, das Bild1 (wie von dir
beschrieben) erst angezeigt wird, wenn alle Vorschaubilder
geladen sind?

ja aber die frage gehört dann ins JavaScript Brett :smile:

#5

Ei,ei, kenn mich mit Javascript nicht aus, aber wer es deaktiviert hat, bekommt dann wahrscheinlich Probleme,oder?
Gibts keine andere Lösung? Kann man es nicht irgendwie umgehn, dass das Bild, dass wir ja auf block gestellt haben, nicht permanent stehen bleibt? Dann könnte ich nämlich statt dem ersten einfach das letzte nehmen.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#6

Ei,ei, kenn mich mit Javascript nicht aus, aber wer es
deaktiviert hat, bekommt dann wahrscheinlich Probleme,oder?

hmm

Eine frage, was meisnt du mit bilder fertig geladen, Bilder werden geladen wenn sie angezeigt werden.

Nein ein Browser holt sich nciht erst alle resourcen die im HTML quelltext stehen, sondern nur die resourcen die auch benutzt werden.

ergo ist am anfang nur thumbs zu sehen, wenn du willst das die alle erst geladen werden und dann eine andere anzeige stattfindet, ist das nur mit JavaScript möglich.

Der browser selbt hat keine wirkliche reihenfolge, er läd was zuerst kommt.

Gibts keine andere Lösung? Kann man es nicht irgendwie umgehn,
dass das Bild, dass wir ja auf block gestellt haben, nicht
permanent stehen bleibt? Dann könnte ich nämlich statt dem
ersten einfach das letzte nehmen.

klar kann auch das letzte die ganze zeit stehen bleiben.

Hi,

vielen Dank! Das hilft mir schon mal weiter. Leider hab ich
noch ein Problem: Gibts ne Möglichkeit, das Bild1 (wie von dir
beschrieben) erst angezeigt wird, wenn alle Vorschaubilder
geladen sind?

sind wir wieder bei JavaScript

HTML bietet keine ablaufkontrolle .

ja aber die frage gehört dann ins JavaScript Brett :smile:

#7

also, es ist so:

ich wähle einen link „bilder“ und komme dann in meine galerie. hier kann ich aus verschiedenen alben auswählen (galerie 1,…)
Die Galerien selbst bestehen immer aus einer Leiste mit thumbnails und (darunter) einem Bilderrahmen, indem das gewählte Vorschaubild angezeigt wird.
altes Problem:
es soll ein bild gleich angezeigt werden, damit der bilderrahmen nicht leer bleibt. das klappt ja mit deinem display:block soweit ganz gut. problem: setzte ich das erste bild auf „block“, wird es sofort angezeigt und ich kann die weitern thumbnails ebenfalls auswählen und das bild im rahmen verändert sich. wunderbar! nur hätte ich gerne, dass das erste bild erst angezeigt wird, wenn alle thumbnails in der oberen leiste drin sind. also habe ich statt dem ersten bild einfach das letzte auf „block“ gesetzt. jetzt habe ich aber das problem, dass ich die anderen bilder nicht mehr anwählen kann und das letzte bild quasi im bilderrahmen bleibt?

möchte halt javascript vermeiden, aber es gibt da wohl keine andere lösung?

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#8

problem, dass ich die anderen bilder nicht mehr anwählen kann
und das letzte bild quasi im bilderrahmen bleibt?

dann gehts also mit Javascript weiter.

#9

Hallo Ben,

hier findest du (hoffentlich) die Lösung (und das nicht nur eine)

http://www.cssplay.co.uk/

auf Anhieb:

http://www.cssplay.co.uk/menu/photo_not_so_simple

Viele Grüße
Maja