[Solved] Click thumbnail and make it larger (image gallery) w/o javascript?

[we5inelgr]

Hi all,

Is there a way to make a thumbnail that is clicked on, become the larger image to the left? In other words, if thumbnail image #2 is clicked, how can that image become the larger image and all the other’s remain display:none?

I know how to do this using javascript, but would like to stay away from relying on javascript if possible.

<table style="width:700px;">
<tr>
<td style="width:80%;vertical-align:top;">
<div id="pic1">
<img src="http://lorempixel.com/530/400/nature/1" alt="Pic1" style="border:1px solid #000"/>
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 1.</div>
</div>
<div id="pic2" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/2" alt="Pic2" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 2.</div>
</div>
<div id="pic3" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/3" alt="Pic3" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 3.</div>
</div>
<div id="pic4" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/4" alt="Pic4" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 4.</div>
</div>
<div id="pic5" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/5" alt="Pic5" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 5.</div>
<div id="pic6" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/6" alt="Pic6" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 6.</div>
<div id="pic7" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/7" alt="Pic7" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 7.</div>
<div id="pic8" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/8" alt="Pic8" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 8.</div>
<div id="pic9" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/9" alt="Pic9"  />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 9.</div>
<div id="pic10" style="display:none;">
<img src="http://lorempixel.com/530/400/nature/10" alt="Pic10" />
<div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 10.</div>
</td>
<td style="width:10%;vertical-align:top;">
<div style="padding:0 0 2 0;"><a href="#pic1"><img src="http://lorempixel.com/65/65/nature/1" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic2"><img src="http://lorempixel.com/65/65/nature/2" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic3"><img src="http://lorempixel.com/65/65/nature/3" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic4"><img src="http://lorempixel.com/65/65/nature/4" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic5"><img src="http://lorempixel.com/65/65/nature/5" style="border:1px solid #000"></a></div><br>
</td>
<td style="width:10%;vertical-align:top;">
<div style="padding:0 0 2 0;"><a href="#pic6"><img src="http://lorempixel.com/65/65/nature/6" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic7"><img src="http://lorempixel.com/65/65/nature/7" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic8"><img src="http://lorempixel.com/65/65/nature/8" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic9"><img src="http://lorempixel.com/65/65/nature/9" style="border:1px solid #000"></a></div><br>
<div style="padding:0 0 2 0;"><a href="#pic10"><img src="http://lorempixel.com/65/65/nature/10" style="border:1px solid #000"></a></div><br>
</td>
</tr>
</table>

I’m using pic holders for demo purposes.

I know this isn’t the best way to do this, but I’ve tried using purely css image galleries but don’t know css well enough to make all the adjustments needed to make it fit into my needs. So this code above is basically my “mock up”, I”m just wondering how I can now enable the thumnails to become the main image when clicked individually. :confused:

Thanks.

[GroovyMotion]

@Mottie that’s a great demo! Thanks for sharing! :)

[we5inelgr]

Wow. Awesome. Many thanks.

I’m currently testing this in I.E. 9 and the main (larger) image didn’t show until I clicked ‘Combatility View.’ in the browser. Is the reason why, the ~ in the .wrapper input:checked class? Just currious.

I got it to work without having the click the Combatibility View by including:

<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

found via the link you provided above for “Support needed for IE7 & older” Just seems strange to me that it wouldn’t work in I.E. 9

Also, the

<div class="full-image"></div>

right after the wrapper class div, is that kind of like a placeholder? Meaning, there is nothing inside the div’s and it could be placed elsewhere in the html? Currious how that works.

Again, many thanks!

[we5inelgr]

oh, and b.t.w, love the opacity on the inactive thumbs. nice touch!

[we5inelgr]

ah, yes. that’s what was missing (the doctype). Again, many thanks Mottie. Very good work and thanks for the education :) !!

[raju0prt]

where is @mottie reply?

[Mottie]

@raju0prt I don’t have a copy of the original post I made… not sure why it’s gone now. Sorry!

[raju0prt]

Thanks for the reply @Mottie. I’ll try search for the solution. Thanks again.

[Author]

Posts