Bild per hover tauschen -im Lightbox öffnen

[krug_s]

Hallo

Ich habe ca. 20 Bilder ...


Wie kann ich folgendes machen:

Wenn jemand mit seinem Maus über das kleine Bild geht (hover) dann sollte ein anderes Bild angezeigt werden und falls die Person auf das Bild klickt, dann sollte im Lightbox in grossem Format das Originalfoto angezeigt werden.


Ich hoffe ihr versteht was ich meine, bin am suchen aber finde nix..

E D I T:

Ich habe so eine Lightbox gefunden aber ohne JS nur mit CSS (noch besser)

Aber das mit hover klappt nicht (wenn ich mit Maus über das Bild gehe sollte andere gezeigt werden)




Danke.

 

[Jan-Frederik Stieler]

Hi,
auf CSSPlay solltest du was vernünftiges finden:https://www.google.de/search?q=css+...5.4351j0j7&sourceid=chrome&es_sm=119&ie=UTF-8

Grüße

 

[Sempervivum]

Hier kannst Du dich informieren, wie man so etwas macht:
http://ppfeufer.de/css-bildwechsel-bei-mouseover/

 

[krug_s]

Ihr werdet villeicht sagen, das ich spinne, aber es funktioniert nicht ... ..es wird immer hinter das kleine Bild hover ausgeführt....

Kann es sein das die Code es nicht akzeptiert?

Hier noch Code.

http://jsfiddle.net/or4v66wp/

 

[Sempervivum]

Nach welcher Anleitung bist Du denn vorgegangen? In deinem Fiddle finde ich nichts von hover.
Wenn Du mehrere Bilder hast, musst Du IMO das Verfahren mit CSS-Sprites verwenden.
Edit: Ich habe mal das Fiddle editiert:
http://jsfiddle.net/Sempervivum/or4v66wp/2/
So funktioniert das Hover. Jedoch funktioniert der Schließen-Knopf der Lightbox leider nicht.

 

[krug_s]

Hallo und Danke

Nach Css sprite habe ich es versucht und eine andere aus Google hover Effects.

Bei Css sprite wird nichts angezeigt und bei anderen hover Effects nur im Hintergrund, was keinen Sinn macht.

Ich werde versuchen deinen Fiddle/ code zu integrieren.

 

[SpiceLab]

http://jsfiddle.net/Sempervivum/or4v66wp/2/
So funktioniert das Hover. Jedoch funktioniert der Schließen-Knopf der Lightbox leider nicht.

Der Grund dafür ist lediglich das dahinter liegende Wort "Result" - ober- u. unterhalb dieses Bereichs erscheint der typische Mauszeiger für einen Link, der die Aktion auch auslöst. Wird der Code in einem lokalen Dokument aufgerufen, funktioniert der "Close"-Button vollflächig.

Für das jsfiddle-Demo hab ich ihn kurzerhand zur linken Seite ausgerichtet

http://jsfiddle.net/spicelab/or4v66wp/3/

[edit]Tipp-Ex[/edit]​

 

[krug_s]

Also ich muss sagen so funktioniert es Danke.

Bleibt noch zu wissen, wie kann ich unter jedem Bild ein Text (Name/Vorname) einfügen ..ich werde es versuchen für jedes Bild neue .class ?

 

[Sempervivum]

CSS ist zwar nicht meine Stärke, aber weil ich gern etwas dazu lerne, habe ich mal versucht, eine Lösung auszuarbeiten:
http://jsfiddle.net/Sempervivum/or4v66wp/4/
Folgendes verstehe ich nicht:

1. Warum ist mein a-Element so weit nach unten verschoben?
2. Wenn ich, statt dem a-Element ein padding-top zu geben, dem span-Element ein margin-top gebe, funktioniert es nicht. Warum? margin ist doch der äußere Abstand zum Rand des Eltern-Elementes.

 

[SpiceLab]

Das <span>-Element benötigt als "Inline-Element" zusätzlich display:block, damit margin-top greift.

Ich hab stattdessen die Lightbox-Links mit einer Mindesthöhe ausgestattet, falls die einzelnen Bildhöhen variieren sollten, und die Bildunterschrift am unteren Elementrand positioniert. So entfällt das (Nach-)Justieren des margin-top-Wertes.

CSS-Auszug:

/* Styles the thumbnail */

.lightbox {  
  position:relative;
  float:left;
  width:75px;
  min-height:120px;
  margin:20px
}
.lightbox .caption {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  text-align:center;
  color:#000
}

Demo: http://jsfiddle.net/spicelab/yhsk1sst/

[edit]Tipp-Ex[/edit]​