Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

CSS Galerie





Frage

Hallo, ich habe auf einer Website folgende Bildergallerie: 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;} </style> <div id="container_top"> <div class="thumbs"> <a class="gallery slidea" href="#nogo"><em><img src="images/burg/BILD1.jpg" /></em></a> <a class="gallery slideb" href="#nogo"><em><img src="images/burg/BILD2.jpg" /></em></a> <a class="gallery slidec" href="#nogo"><em><img src="images/burg/BILD3.jpg" /></em></a> <a class="gallery slided" href="#nogo"><em><img src="images/burg/BILD4.jpg" /></em></a> <a class="gallery slidee" href="#nogo"><em><img src="images/burg/BILD5.jpg" /></em></a> <a class="gallery slidef" href="#nogo"><em><img src="images/burg/BILD6.jpg" /></em></a> <a class="gallery slideg" href="#nogo"><em><img src="images/burg/BILD7.jpg" /></em></a> <a class="gallery slideh" href="#nogo"><em><img src="images/burg/BILD8.jpg" /></em></a> <a class="gallery slidei" href="#nogo"><em><img src="images/burg/BILD9.jpg" /></em></a> <a class="gallery slidej" href="#nogo"><em><img src="images/burg/BILD10.jpg" /></em></a> <a class="gallery slidek" href="#nogo"><em><img src="images/burg/BILD11.jpg" /></em></a> <a class="gallery slidel" href="#nogo"><em><img src="images/burg/BILD12.jpg" /></em></a> </div> </div> Durch Auswahl eines Thmbnails wird das entsprechende Bild einwandfrei angezeigt. Ich hab aber leider keine Ahnung, wie ich das erste Bild der Gallerie beim aden automatisch anzeigen kann? Ist das möglich? Vielen Dank schon jetzt Gruß Ben

Antwort 1 von katy

Hallo Ben,

natürlich ist das möglich, du musst nur dem entsprechenden Element die Eigenschaft display:block geben.

Allerdings muss ich zugeben, dass ich in deinem Code nicht erkennen kann, welches Element du überhaupt meinst.

katy

Antwort 2 von BenterA

Hallo,

wie meinst du das?

ich hab hier meine kleinen Vorschaubilder:

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);}

und hier werden die Bilder in Originalgröße angezeigt wenn man das entsprechende Vorschaubild wählt.

<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="images/burg/BILD1.jpg" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="images/burg/BILD2.jpg" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="images/burg/BILD3.jpg" /></em></a>
<a class="gallery slided" href="#nogo"><em><img src="images/burg/BILD4.jpg" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="images/burg/BILD5.jpg" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="images/burg/BILD6.jpg" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="images/burg/BILD7.jpg" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="images/burg/BILD8.jpg" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="images/burg/BILD9.jpg" /></em></a>
<a class="gallery slidej" href="#nogo"><em><img src="images/burg/BILD10.jpg" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="images/burg/BILD11.jpg" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="images/burg/BILD12.jpg" /></em></a>

Funktioniert auch soweit prima, nur möchte ich, dass das erste Bild sofort angezeigt wird, sodass der rahmen, in dem die bilder angezeigt werden, nicht leer ist.


Wo genau müsste ich den dispaly:block setzen?

Antwort 3 von BenterA

Hallo,

wie meinst du das?

ich hab hier meine kleinen Vorschaubilder:

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);}

und hier werden die Bilder in Originalgröße angezeigt wenn man das entsprechende Vorschaubild wählt.

<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="images/burg/BILD1.jpg" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="images/burg/BILD2.jpg" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="images/burg/BILD3.jpg" /></em></a>
<a class="gallery slided" href="#nogo"><em><img src="images/burg/BILD4.jpg" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="images/burg/BILD5.jpg" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="images/burg/BILD6.jpg" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="images/burg/BILD7.jpg" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="images/burg/BILD8.jpg" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="images/burg/BILD9.jpg" /></em></a>
<a class="gallery slidej" href="#nogo"><em><img src="images/burg/BILD10.jpg" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="images/burg/BILD11.jpg" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="images/burg/BILD12.jpg" /></em></a>

Funktioniert auch soweit prima, nur möchte ich, dass das erste Bild sofort angezeigt wird, sodass der rahmen, in dem die bilder angezeigt werden, nicht leer ist.


Wo genau müsste ich den dispaly:block setzen?

Antwort 4 von BenterA

Hallo,

wie meinst du das?

ich hab hier meine kleinen Vorschaubilder:

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);}

und hier werden die Bilder in Originalgröße angezeigt wenn man das entsprechende Vorschaubild wählt.

<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="images/burg/BILD1.jpg" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="images/burg/BILD2.jpg" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="images/burg/BILD3.jpg" /></em></a>
<a class="gallery slided" href="#nogo"><em><img src="images/burg/BILD4.jpg" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="images/burg/BILD5.jpg" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="images/burg/BILD6.jpg" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="images/burg/BILD7.jpg" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="images/burg/BILD8.jpg" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="images/burg/BILD9.jpg" /></em></a>
<a class="gallery slidej" href="#nogo"><em><img src="images/burg/BILD10.jpg" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="images/burg/BILD11.jpg" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="images/burg/BILD12.jpg" /></em></a>

Funktioniert auch soweit prima, nur möchte ich, dass das erste Bild sofort angezeigt wird, sodass der rahmen, in dem die bilder angezeigt werden, nicht leer ist.


Wo genau müsste ich den dispaly:block setzen?

Antwort 5 von BenterA

hallo nochmal!

sorry, muss wohl etwas oft auf "absenden" gedrückt haben :)

das mit display:block funktioniert soweit. gibts zufällig ne möglichkeit,
dieses bild/element erst anzuzeigen, wenn alle vorschaubilder geladen wurden?

gruß

ben

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: