hallo an alle....
seit stunden suche ich nach der lösung nach einer bildergalerie mit thumbnails... das thema ist auch hier schon oft behandelt worden - aber ich versteh das alles nicht wirklich...
also - mal zu meinem problem:
eine gallerie habe ich mir zusammengebastelt - die thumbnails sind linksseitig angeordnet und das grosse bild erscheint mit dem css attribut :hover rechts von den thumbs.
jetzt möchte ich aber dass die bilder nicht beim mouseover gross werden, sondern nur wenn man auf das jeweilige thumb klickt.
soweit ich das nun weiss, ist dafür javascript notwendig - und das überseigt mein verständnis vollkommen....
wohin mit dem javacode? was muss ich alles einbinden?
Ich schicke mal meine css sowie html codes mit....
html:
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/balaceakt1_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/balanceakt.jpg" /></a>
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/blowball_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/blowball.jpg" /></a>
<br />
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/blowball-2_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/blowball-2.jpg" /></a>
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/I_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/I.jpg" /></a>
<br />
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/II_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=.../portfolio/media/II.jpg" /></a>
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/papillo_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/papillo.jpg" /></a>
<br />
</div>
css:
<style type="text/css">
.gallerycontainer{
position: relative;
height: 600px;
}
.thumbnail img{
border: 1px solid black;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid black;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 1px;
left: -1000px;
border: 1px white;
visibility: hidden;
color: black;
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: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
seit stunden suche ich nach der lösung nach einer bildergalerie mit thumbnails... das thema ist auch hier schon oft behandelt worden - aber ich versteh das alles nicht wirklich...
also - mal zu meinem problem:
eine gallerie habe ich mir zusammengebastelt - die thumbnails sind linksseitig angeordnet und das grosse bild erscheint mit dem css attribut :hover rechts von den thumbs.
jetzt möchte ich aber dass die bilder nicht beim mouseover gross werden, sondern nur wenn man auf das jeweilige thumb klickt.
soweit ich das nun weiss, ist dafür javascript notwendig - und das überseigt mein verständnis vollkommen....
wohin mit dem javacode? was muss ich alles einbinden?
Ich schicke mal meine css sowie html codes mit....
html:
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/balaceakt1_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/balanceakt.jpg" /></a>
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/blowball_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/blowball.jpg" /></a>
<br />
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/blowball-2_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/blowball-2.jpg" /></a>
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/I_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/I.jpg" /></a>
<br />
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/II_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=.../portfolio/media/II.jpg" /></a>
<a class="thumbnail" href="#thumb"><img src=".../portfolio/media/papillo_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/papillo.jpg" /></a>
<br />
</div>
css:
<style type="text/css">
.gallerycontainer{
position: relative;
height: 600px;
}
.thumbnail img{
border: 1px solid black;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid black;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 1px;
left: -1000px;
border: 1px white;
visibility: hidden;
color: black;
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: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>