Ich möchte aus einer Gallerie (Thumbs) die größeren Bilder in einem Container darstellen.

Oha, das war hoffentlich ein Schreibfehler. Galerie hätte nur dann was mit Galle zu tun, wenn's um eine medizinische Ausstellung geht.

das folgende Script funktioniert prima bei mouseover.

Du hast HTML-Code und CSS-Angaben geliefert, aber leider kein Skript.

Moin

Kurze Suche mit Google nach "Lightbox mit CSS" und siehe da:

http://stellatest.de/anleitungen/css/lightboxmitcss/index.html

oder

http://codepen.io/gschier/pen/HCoqh

oder

http://www.designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/

oder

.
.
.
.
.

Gruß Bobby

Aloha ;)

Wie an anderer Stelle schon erwähnt wurde, benutzt du kein Skript, sondern lediglich ein Stylseheet (CSS). Das ist aber auch gut so, es ist von Vorteil, Scripts nur dann zu nutzen, wenn sie unumgänglich nötig sind.

Mein Vorschlag an dieser Stelle: Du benutzt ja die Pseudoklasse :hover für Mouseover. Für Klicks gibts in CSS etwas weniger Möglichkeiten, du könntest aber vllt. die Pseudoklasse :focus nutzen. Ich weiß aktuell nicht genau, ob img-Elemente einen focus haben können, es ist dann aber eventuell möglich, das mit tabindex nachzurüsten. Näheres und Beispiele findest du z.B. unter CSS-Tricks oder StackOverflow... Oder natürlich auf erneute Nachfrage hier ;)

Grüße,

RIDER

Om nah hoo pez nyeetz, Conny!

ich bin der Neue (Anfänger).

Ich finde es gut, dass du dein Markup bzw. deinen CSS-Code entsprechend auszeichnen wolltest und dich ebenso um eine umfängliche Darstellung deines Problems bemühst.

Kleiner Tipp: markiere zunächst den Text, der als Code ausgezeichnet werden soll und drücke dann den entsprechenden Button. In der Vorschaufunktion hättest du auch sehen können, dass die Formatierung nicht wie gewünscht erfolgt ist. Aber vielleicht hast du dies sogar getan und nur die entsprechende Lösung nicht gefunden.

.gallerycontainer{

position: absolute;
/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 grey;
}

.thumbnail span{ /CSS for enlarged image/
position: absolute;
background-color: #000000;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: grey;
text-decoration: none;
}

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

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

  
So zum Beispiel.  
  
Ich empfehle außerdem konsequent mit HTML5 zu arbeiten. So kannst du die Angabe  
  
`<style type="text/css">`{:.language-html} zu `<style>`{:.language-html} verkürzen.  
  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Lot und Lotion](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=L#lot).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

Hallo Freunde,

vielen Dank für die Unterstüzung,
mein Problem ist gelöst

Conny

Hallo Leute,
ich bin der Neue (Anfänger).
Ich möchte aus einer Gallerie (Thumbs) die größeren Bilder in einem Container darstellen.
das folgende Script funktioniert prima bei mouseover.
Was muß ich ändern, dass es auch bei onclick funktionirt.
Wer kann mir helfen

Conny

``
<style type="text/css">

.gallerycontainer{
position: absolute;
/*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 grey;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: grey;
text-decoration: none;
}

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

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

</style>

{:.language-html}

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="Bilder/Bild3.png" width="56px" height="80px" border="0" /><span><img src="Bilder/Bild3.png" width="405px" height="585px"/></span></a>

<a class="thumbnail" href="#thumb"><img src="Bilder/Bild5.png" width="56px" height="80px" border="0" /><span><img src="Bilder/Bild5.png" width="405px" height="585px"/></span></a>

<br />

</div>