Frage thumbnail bildergallerie

[sadlime]

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>

 

[Sempervivum]

Kommt mir bekannt vor. Hast Du das schon Mal irgendwo anders gepostet?

 

[sadlime]

Hallo Sempervivum,

nein - also ich war's nicht. Ich gebe zu, den Code habe ich im Web gefunden und an meine Bedürfnisse angepasst. Aber sonst habe ich bezüglich html und co noch nie etwas gepostet - weder hier noch in einem anderen Forum.

html habe ich bislang immer noch einigermassen hinbekommen - aber bei javascript häng ich voll.... ich verstehe wohl den sinn eines javascripts aber einfach die durchführung ist mir völlig unklar...

 

[Sempervivum]

Tut mir Leid, dann muss ich mich irren.
Probiers mal so:
Im Head folgendes Javascript:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
     $(".thumbnail").on("click", function () {
         $(".thumbnail.vis").removeClass("vis");
         $(this).addClass("vis");
     });
});
</script>

Und das CSS folgender Maßen ändern:

<style>

.gallerycontainer{
position: relative;
height: 600px;
}

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

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

.thumbnail.vis 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.vis span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>

d. h. ich habe das thumbnail:hover durch thumbnail.vis ersetzt.

 

[sadlime]

Hallo sempervivum!

habs gleich ausprobiert und ich könnt springen vor Freude! :):)
Genauso hab ich mir das vorgestellt - und wenn ich da mal so schnell über deinen Schnipsel gucke - ist es gar nicht sooooo schwierig...
Wieder was gelernt!

Auf alle Fälle ein ganz HERZLICHES DANKESCHÖN!!! :):)

 

[sadlime]

...so ich schon wieder...

wie erwähnt funktioniert alles bestens... vielleicht kann mir nochmal jemand helfen - denn ich möchte gern folgendes erreichen:
wenn ich auf meine galerie klicke, dann erscheinen ja meine thumbnails und die jeweils dazugehörigen grossen bilder erst nachdem ich (oder der besucher) auf ein thumbnail klickt.
wäre es möglich, bereits beim öffnen der galerie das erste thumbnail gross darzustellen?

 

[Sempervivum]

Ganz einfach: Diesem Thumbnail im HTML die Klasse vis geben:

<a class="thumbnail vis" href="#thumb"><img src=".../portfolio/media/balaceakt1_thumb.jpg" width="70px" height="70px" border="0" /><span><img src=".../portfolio/media/balanceakt.jpg" /></a>

 

[sadlime]

oh - bin ich .... *kopfschüttel*
hatte statt "thumbnail vis" die "alte" klasse vergeben - darum hat es einfach nicht funktionieren können....
man sollte solche dinge einfach auch nicht während dem nachtdienst machen... dann läuft das hirn schlichtweg auf sparflamme....

DANKE auf alle fälle vielmals - es läuft und ich hoffe nun das thema thumbnail galerie abschliessen zu können.. ;):)