✔ Startbild bei Bildergalerie

[quidnovi]

Hi CSS - Welt,

versuche mittels CSS eine Bildergalerie zu bauen (da ich noch ein "Frischling" bin, habe ich sie aus dem Internet gesaugt, studiert und größtenteils auch verstanden).
Mein Problem ist nun, dass ich es gerne hätte, dass, bevor irgendetwas in der Bildgalerie angeklickt wird, mir das erste Bild bereits geladen erscheint.

Anmerken muss ich allerdings, dass ich bereits ein Hintergrundbild für die Galerie eingebaut habe, mir also somit die Chance genommen wird, das erste Bild als Hintergrundbild einzubauen, was mir am Einfachsten erscheinen würde.

Egal, was ich auch alles probiert habe , ich habe keine Möglichkeit gefunden, mein Problem zu lösen, weshalb ich mit meinem Problem nun an euch herantrete und hoffe, dass man mir dahingehend Tipps geben kann.

Grüße
quidnovi

p.s.: gesaugt habe ich von Stu Nicolson unter dieser Url: http://www.cssplay.co.uk/menu/gallery_click.html
und anstatt "Views of London" soll mir nun eben das erste Bild erscheinen;

 

[Maik]

Hast du schon das h1-Element ("Views of London") durch das img-Element ersetzt, und damit die Grafik aufgerufen?

 

[quidnovi]

ouuuuhhh mann, das nennt man wirklich den ganzen Wald ... :-(

peinlich, peinlich

Danke, hast' mich wieder in die Realwelt zurückgebeamt!

Denke ma, ich werde mich jetzt vom PC so weit wie möglich entfernen und Ihn und mich ruhen lassen.

Schönen Sonntag Abend noch

 

[mennepaul]

Habe mich jetzt zwei Tage damit beschäftigt.
komme aber garnicht mit der Vorlage zurecht.

http://www.cssplay.co.uk/menu/gallery_click.html

Vieleicht kannst Du mir ja mal dein Link zur Galerie zu kommen lassen. Brauche eigentlich nur Thumbnails at bottom

Danke

Menne

 

[quidnovi]

Hi,

So sieht der Code aus:

<style type="text/css">   
html,body   {
   margin: 0;
   padding: 0;
   background-color: #afafaf;
   color: #000000;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 100.01%;
}

/*galerie in der seite positioniert*/
#gallery_position { /*im Textfluss*/
   margin-left: 50px;
   margin-top: 30px;
}

/*galerie gesamt*/
#gallery {
   position: relative;
   width: 550px;
   height: 450px;
   border: 0px solid #000000;
   background: url(http://stot.linux3.webhome.at/fotosWerbetechnik/texte/fahrzeugwerbung.gif);
   background-repeat:no-repeat;
   background-position:0px 74%;
   
}
/*startbild*/
#gallery img {
   width: 383px;
   height: 255px;
   position: absolute;
   display: block;
   left: 65px;
   top: 143px;
   border: 0px solid red;   
}

/*thumbnails*/
#gallery a, #gallery a:visited {
   display: block;
   float: left;
   width: 70px;
   height: 43px;
   margin: 4px;
   margin-left: 0px;
   border: 0px solid green;
   text-decoration: none;   
}

#gallery a span, #gallery a strong { /* loading-Block */
   display: none;
}

/*breite und höhe des angeklickten thumbnails, das sich über das startbild legt*/
#gallery a span em {
   display: block;
   width: 384px;
   height: 256px;
   margin: 0;
   border: 0px solid yellow;
}

/*aktiviertes thumbnail*/
#gallery a:focus, #gallery a:active  {
   border: 0px solid blue;
}

/*angeklicktes thumbnail, das sich über das startbild legt*/
#gallery a:focus span, #gallery a:active span  {
   position: absolute;
   display: block;
   left: 65px;
   top: 143px;
   width: 386px;
   z-index:1;
   font-size: 0.8em;
   color: #000000;
   border: 0px solid #FF9900;
}

/*weißer hintergrund zur abdeckung des startbildes*/
#gallery a:focus strong, #gallery a:active strong  { /* loading-Block */
   position: absolute;
   display: block;
   left: 66px;
   top: 143px;
   width: 383px;
   height: 256px;
   background-color: #EFEDEC;
   color: #1199FF;
   font-size: 0.8em;
   border: 0px solid #CCFF00;
}


/*]]>*/
</style>



<div id="gallery_position">

<div id="gallery">
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-01.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-01.jpg)">&nbsp;</em>
     
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-02.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-02.jpg)">&nbsp;</em>
      
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-03.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-03.jpg)">&nbsp;</em>
    
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-04.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-04.jpg)">&nbsp;</em>
     
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-05.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-05.jpg)">&nbsp;</em>
     
   </span>
</a>

<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-06.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-06.jpg)">&nbsp;</em>
     
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-07.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-07.jpg)">&nbsp;</em>
      
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-08.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-08.jpg)">&nbsp;</em>
    
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-09.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-09.jpg)">&nbsp;</em>
     
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-10.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-10.jpg)">&nbsp;</em>
     
   </span>
</a>

<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-11.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-11.jpg)">&nbsp;</em>
      
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-12.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-12.jpg)">&nbsp;</em>
    
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-13.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-13.jpg)">&nbsp;</em>
     
   </span>
</a>
<a title="loading" style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/thumb/thumb-kfz-14.jpg)" href="#">
   <strong>Loading......</strong>
   <span>
      <em style="background-image: url(http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-14.jpg)">&nbsp;</em>
     
   </span>
</a>

<img alt="bild" src="http://stot.linux3.webhome.at/fotosWerbetechnik/fotosFahrzeugwerbung/kfz-01.jpg" />

</div>
</div>

Hoffe, Du kannst damit etwas anfangen.
Ansehen kannste das unter: http://www.stot.com/fotos-fahrzeugwerbung.html

 

[mennepaul]

Danke werde es mir mal in Ruhe anschauen.

Gruß
Menne

 

[Maik]

Hi,

Brauche eigentlich nur Thumbnails at bottom

es ist doch alles auf der genannten Seite vorhanden, was man hierfür benötigt

/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(london/thumb2.jpg);}
a.slideb {background:url(london/thumb3.jpg);}
a.slidec {background:url(london/thumb4.jpg);}
a.slided {background:url(london/thumb5.jpg);}
a.slidee {background:url(london/thumb6.jpg);}
a.slidef {background:url(london/thumb7.jpg);}
a.slideg {background:url(london/thumb8.jpg);}
a.slideh {background:url(london/thumb9.jpg);}
a.slidei {background:url(london/thumb10.jpg);}
a.slidej {background:url(london/thumb11.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}

/* styling for BOTTOM gallery */
#container_bottom {position:relative; width:425px; height:425px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}
#container_bottom img {border:0;}
#container_bottom .thumbs {position:absolute; left:0; bottom:0; height:114px;}
#container_bottom a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:-45px; left:5px; padding:5px; font-style:italic; color:#fff;  z-index:100;}
#container_bottom a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_bottom a.gallery:active, #container_bottom a.gallery:focus {border:1px solid #000;}
#container_bottom a.gallery:active em, #container_bottom a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:-305px; left:5px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container_bottom h1 {clear:both; margin:0; padding-top:80px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_bottom h1 em {font-size:0.6em; color:#000;}

<h3>Thumbnails at bottom</h3>
<div id="container_bottom">
<div class="thumbs">

<a class="gallery slidea" href="#nogo"><em><img src="london/pic2.jpg" alt="LSE Square" title="LSE Square" /></em><span>LSE Square<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideb" href="#nogo"><em><img src="london/pic3.jpg" alt="Buckingham Palace" title="Buckingham Palace" /></em><span>Buckingham Palace<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidec" href="#nogo"><em><img src="london/pic4.jpg" alt="Tower Bridge" title="Tower Bridge" /></em><span>Tower Bridge<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slided" href="#nogo"><em><img src="london/pic5.jpg" alt="Tower of London" title="Tower of London" /></em><span>Tower of London<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidee" href="#nogo"><em><img src="london/pic6.jpg" alt="Houses of Parliament" title="Houses of Parliament" /></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidef" href="#nogo"><em><img src="london/pic7.jpg" alt="St. Paul's Cathedral" title="St. Paul's Cathedral" /></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>

<a class="gallery slideg" href="#nogo"><em><img src="london/pic8.jpg" alt="The London Eye" title="The London Eye" /></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideh" href="#nogo"><em><img src="london/pic9.jpg" alt="Albert Hall" title="Albert Hall" /></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidei" href="#nogo"><em><img src="london/pic10.jpg" alt="Wandsworth Common" title="Wandsworth Common" /></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidej" href="#nogo"><em><img src="london/pic11.jpg" alt="London Taxi Cab" title="London Taxi Cab" /></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
</div>
<h1>Views<br /><em>of</em><br />London</h1>

</div>

Zumal quidnovis Galerie genau entgegengesetzt aufgebaut ist, nämlich "Thumbnails at Top". :suspekt:

 

[mennepaul]

Danke.

Mal schauen ob ich so anpassen kann wie ich es brauche.

Gruß
Menne