✔ Bildergalerie mit Vorschaublid

N

namiro

Mitglied
Hallo ihr, ich habe hier eine Bildergalerie mit a:hover gebastelt,
aber eine Vorschaubild muss schon auf der Seite gezeigt werden.

Also kleine Thumbnails - Mouseover - große Bilder

Ich habe das ersten großen langen Bild mit position:absolute als background-image neben den Thumbnails platziert, aber mein Problem ist, dass die Galerie aus Bilder mit den unterschiedlichen Längen besteht.
Also wenn man über das breiten Thumbnail Mousehover macht, sieht es doof aus, da das langen Bild noch unter dem großen breiten Bild liegen bleibt.


HTML: 
#content_bildergalerie{
background-color:#ececde;
width:556px;
padding:10px 25px 0px 25px;
position:relative;
}
#galerie_hotel{
background-color:#ececde;
width:270px;
margin-bottom:0px;
}
.gl_hotel_start{
position:absolute; 
top: 10px; 
left: 290px;
background-image:url(../images/bildergalerie/hotel/gross/Heide-Hotel-Kluetz-Hotelschild.jpg);
background-repeat:no-repeat;
width:245px;
height:365px;
}

.hoverbox
{
	cursor: default;
	list-style: none;
}
.hoverbox a{
cursor: default;
}
.hoverbox a .preview{
	position: absolute;
	left: -999em;
}
.hoverbox a:hover .preview{
display: block;
position: absolute;
top: 10px;
left: 290px;
z-index: 1;
}
.hoverbox img{
margin:0px 5px 5px 0px;
vertical-align: top;
border:0px;
}

.hoverbox li{
display: inline;
float: left;
/*margin: 3px;
padding: 5px;
position: relative;*/
}
.sfhover

.hoverbox .preview{
border:0px;
}

Könnt jemand mir helfen?
Danke.
 
Zuletzt bearbeitet:
Du könntest die Bilder in einem Block-Element (div, span) platzieren und diesem eine Höhe / Breite geben, so dass es einem Hochkantbild entspricht gefüllt mit der Hintergrundfarbe der Seite.

Wird dieses sichtbar, so verdeckt es darunter liegende Elemente und nur das Bild in diesem Block wird angezeigt.
 
Moin.
ZodiacXP hat gesagt.:
Du könntest die Bilder in einem Block-Element (div, span) platzieren und diesem eine Höhe / Breite geben, so dass es einem Hochkantbild entspricht gefüllt mit der Hintergrundfarbe der Seite.
Zum Vergrößern anklicken....
Dem Online-Stylesheet zufolge war dies im Ansatz wohl auch so vorgesehen. Oder hast du zwischenzeitlich versucht, Zods Tipp in die Tat umzusetzen?

Da ein Block-Element (= <div>) in einem Inline-Element (= <a>) nicht enhalten sein darf, sondern nur weitere Inline-Elemente darin eingebunden werden dürfen, kommt hier das <span>-Element zum Einsatz, dem die Klasse .preview übergeben wird:
Code: 
<li><a href="#"><img src="http://hk.miokha.de/29/images/bildergalerie/hotel/klein/Heide-Hotel-Kluetz-Hotelschild.jpg" width="60" height="90" border="0" /><span class="preview"><img src="http://hk.miokha.de/29/images/bildergalerie/hotel/gross/Heide-Hotel-Kluetz-Hotelschild.jpg" width="245" height="365" /></span></a></li>


Und dieser CSS-Auszug:
CSS: 
.hoverbox a .preview{
	position: absolute;
	left: -999em;
}
.hoverbox li span{
	position: absolute;
	left: -999em;
	width:290px;
	height:365px;
	background-color:#ececde;
}

.hoverbox a:hover .preview{
display: block;
position: absolute;
top: 10px;
left: 290px;
z-index: 1;
}
.hoverbox a:hover li span{
display: block;
position: absolute;
top: 10px;
left: 290px;
z-index: 1;
}
wird demnach folgendermaßen abgeändert und reduziert:
CSS: 
.hoverbox li a span.preview {
        position: absolute;
        left: -999em;
        display:block;
        width:290px;
        height:365px;
        background-color:#ececde;
}

.hoverbox li a:hover span.preview {
        top: 10px;
        left: 290px;
        z-index: 2;
}


mfg Maik
 
Oder hast du zwischenzeitlich versucht, Zods Tipp in die Tat umzusetzen?
Zum Vergrößern anklicken....

Hattaaaa. Hatta Ärbäg? Hatta auch.

Zusätzlich könnte "namiro" jedem Vorschaubild einen Rahmen (border) in der Hintergrundfarbe geben oder dem <a href=...> einen Innenabstand (padding), so dass die Abstände zwischen den Bildern erhalten bleibt.

Der Effekt wäre, dass das ursprüngliche Bild nicht mehr dazwischen flackert bei einem Wechsel zwischen zwei Vorschaubildern, da der Abstand zu den Elementen der Vorschau dazu gehört.


Edit: Eventuell kannst du nicht nur bei einem ":hover" über die Vorschau das große Bild erscheinen lassen, sondern bei einem ":focus" - quasi bei einem Klick auf das Bild. Hier wäre das Resultat, dass man sich die Großansicht noch einmal in Ruhe ansehen und auch mit der Maus drüber gehen kann. Zudem darf etwas Text unter die Bilder, finde ich, damit man nicht nur mehr Informationen hat, sondern auch Blinde und Google etwas zu lesen haben.
 
Zuletzt bearbeitet:
Hallo ihr beide,

vielen Dank für eure Tipps, wie immer.

Ja, ich habe erstmal Zods Tipp probiert, nach lange Überlegung kommt eine Lösung wie Maik.

Und nun machte ich gerade Gedanken über das flackerte Hintergrundbild.

Und, Zod schreibt mir noch einen Tipp.
Das ist toll.

Ich werde sie probieren, und so oder so, melde ich wieder.

Nochmals vielen Dank!

PS: Ach, ja.. Ich habe auch gesehen, wenn man auf einen Thubmail klickt, da ich mit # geankert, dann hat IE ein bisschen schwierigkeit, das große Bilder zu zeigen.
Kann man irgende was anderes nehmen für die leeren Link statt #.
 
namiro hat gesagt.:
PS: Ach, ja.. Ich habe auch gesehen, wenn man auf einen Thubmail klickt, da ich mit # geankert, dann hat IE ein bisschen schwierigkeit, das große Bilder zu zeigen.
Zum Vergrößern anklicken....
Der IE benötigt hier grundsätzlich die :active-Pseudoklasse:
CSS: 
.hoverbox li a:focus span.preview, .hoverbox li a:active span.preview {
top: 10px;
left: 290px;
z-index: 2;
}

mfg Maik
 
Hi, ihr,

es hat gedauert, aber ich habe :focus und :active probiert.

Es scheint zu funktionieren, aber wenn mann 3.Bild anklickt, bei 1. und 2. Bilder geht :hover nicht mehr.

Mein Code

HTML: 
.hoverbox
{
	cursor: default;
	list-style: none;
}
.hoverbox a.anders{
cursor: default;
}
.hoverbox li a span.preview {
        position: absolute;
        left: -999em;
        display:block;
        width:290px;
        height:365px;
        background-color:#ececde;
}
 
.hoverbox li a:hover span.preview{
        top: 10px;
        left: 290px;
        z-index: 2;
}

.hoverbox li a:focus span.preview{
top: 10px;
left: 290px;
z-index: 2;
}



.hoverbox a img{
/*margin:0px 5px 5px 0px;*/
vertical-align: top;
border-right:5px solid #ececde;
border-bottom:5px solid #ececde;
}

.hoverbox li{
display: inline;
float: left;
/*margin: 3px;
padding: 5px;
position: relative;*/
}

.hoverbox span.preview img{
border:0px;
}

CSS für IE (mit extra file)

HTML: 
.hoverbox a:hover
{
display: block;
	z-index: 2;
}
.hoverbox li a:active span.preview {
top: 10px;
left: 290px;
z-index: 2;
}

habe ich was falsch gemacht?
 
Hi,

richte mal für die :hover-Pseudoklasse eine höhere z-index-Position ein:
CSS: 
.hoverbox li a:hover span.preview, 
.hoverbox li a:focus span.preview {
        top: 10px;
        left: 290px;
}
.hoverbox li a:hover span.preview {
        z-index: 3;
}
.hoverbox li a:focus span.preview {
        z-index: 2;
}
CSS: 
.hoverbox a:hover {
        display: block;
	    z-index: 3;
}
.hoverbox li a:active span.preview {
        top: 10px;
        left: 290px;
        z-index: 2;
}

mfg Maik
 
Hallo Maik,

ich danke dir vielmals.
Es funktioniert!! Danke.
Habe viel gelernt.

und bin ich mit kontaktformular beschäftigt.
möchte ich schon die Fragen steleln.
Soll ich neue Beitrag schreiben? oder kann ich hier weiter führen?
 
Naja, wenn nun ein Formular auf der Agenda steht, wäre dafür schon ein neues Thema angebracht ;)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück