CSS Image Zoom - Hauptimage als Standartanzeige sichtbar machen

[kaukauz]

Hallo, ich habe folgendes Problem:

ich habe soweit eine CSS Imagezoom-Galerie in meine Homepage eingebettet, jedoch wird das vergrösserte Image nur sichtbar, wenn man mit dem Mauszeiger über das thumb gleitet.

Was ich möchte ist, dass ein Standartfoto (z.B. das erste Image der Galerie) sichtbar ist ohne zuerst mir dem Mauszeiger drüberfahren zu müssen, da sonst ein grosses leeres Feld in meiner Box vorhanden ist.

Ich hoffe ich habe das verständlich formulieren können.

Über Hilfe wäre ich sehr dankbar.

Das ist der Link mit dem Originalcode den ich bei mir eingefügt habe:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb

...und das soll ein Beispiel sein wie ich das mit dem Image gerne haben möchte (bitte nach unten zur Image-Galerie scrollen):

http://cgi.ebay.de/DOLCE-GABBANA-D-G-DAMEN-UHR-DW0145-PRIME-TIME-UVP-235-/330560814636?_trksid=p5197.m7&_trkparms=algo%3DLVI%26itu%3DUCI%26otn%3D4%26po%3DLVI%26ps%3D63%26clkid%3D373038573572939489


Das hier ist der Css Code:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
    position: absolute;
    width: 279px;
    top: 374px;
    height: 323px;/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 6px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 210px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

das der HMTL:

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>

 

[threadi]

Ergänze bei dem anzuzeigenden Bild eine Klasse, z.B. "thumbaktiv". Ergänze im CSS bei ".thumbnail:hover" -> ".thumbnail:hover, .thumbaktiv", bei ".thumbnail:hover img" -> ".thumbnail:hover img, .thumbaktiv img" und bei ".thumbnail:hover span" -> ".thumbnail:hover span, .thumbaktiv span".

 

[kaukauz]

Danke für den Tip!

Ich habe die Klasse im HTML Tag mit "thumbaktiv" so erweitert, ist das richtig?

<a class="thumbnail thumbaktiv" href="#thumb"><img src="images/003.jpg" width="137" height="100" border="0" /><span><img src="images/003.jpg" /><br />DOLCE & GABBANA D&G UHR DW0145</span></a>

 

[threadi]

Wenn es funktioniert, dann ja.

 

[kaukauz]

Ja es funktioniert.
Noch eine zusätzliche Frage zu der Galerie:

Kann ich dem Zoomfenster eine feste Grösse vorgeben, in welches die Fotos dann automatisch eingepasst werden. Bei grösseren Images ist sonst das Problem, dass diese dann über die dafür vorgesehene Box erscheinen. Das mit Hand jedesmal nachjustieren und anzupassen ist auf Dauer sehr mühselig und zeitraubend.

 

[threadi]

Ergänze doch bei ".thumbnail span img" die gewünschte Höhe und Breite.