Click thumbnail and make it larger image (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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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://example.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.

[edited by: DrDoc at 7:39 pm (utc) on Feb 17, 2014]
[edit reason] examplified [/edit]

[not2easy]

Just a note - best practice here is to replace domain names in URLs with "example.com" to avoid unintended consequences.

Have you tried using the thumbnail as an anchor for a link to the larger image? Ideally the larger image would have its own page so the link goes to its page and not to the naked image.
As in

<a href="http://example.com/image1.html"><img src="http://example.com/image1thumb.jpg" alt=""></a>

. No css or js required.

[Oldsoldier]

Try This
Change your .css to
img {
width: 50px;
height: auto;
}

.clicked {
width: auto;
}


Add this script to the header
$('img').click(function() {

$(this).toggleClass('clicked');
});

[lucy24]

Add this script

but would like to stay away from relying on javascript if possible.

:(

[rainborick]

Well, let's acknowledge that, given this code structure, clicking here to make something happen over there is pretty much going to require JavaScript.

[drhowarddrfine]

Not necessarily. You can base it on :active or :visited.

[tangor]

Might also take a look at 1frame as another method.

[birdbrain]

unfortunately, due to archaic forum restrictions, I am unable to post
a link to my CSS solution to this problem. :(

It does not employ "active" or "visited" as drhowarddrfine suggested.

Instead "focus" is the chosen option. :)

I have sent a PM, with the link, to the OP - we5inelgr.

If anyone else would like to see it, in all it's glory, let me know. ;)

coothead

[we5inelgr]

Many thanks, all, for the replies and suggestions.

I went with another solution using <label>'s and radio buttons.

[birdbrain]

Hi there we5inelgr,

did you not check out the solution that I sent in my PM to you?

It uses images and thumbnails. ;)

birdbrain