Welcome to WebmasterWorld Guest from 54.162.226.212

Forum Moderators: not2easy

Message Too Old, No Replies

Click thumbnail and make it larger image (image gallery) w/o javascript

     
12:33 am on Feb 15, 2014 (gmt 0)



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]

2:01 am on Feb 15, 2014 (gmt 0)

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



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.
1:02 pm on Feb 15, 2014 (gmt 0)



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');
});
1:49 pm on Feb 15, 2014 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Add this script


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

:(
12:48 am on Feb 16, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, let's acknowledge that, given this code structure, clicking here to make something happen over there is pretty much going to require JavaScript.
1:09 am on Feb 16, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not necessarily. You can base it on :active or :visited.
1:25 am on Feb 16, 2014 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Might also take a look at 1frame as another method.
1:58 pm on Feb 16, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
5:27 pm on Feb 17, 2014 (gmt 0)



Many thanks, all, for the replies and suggestions.

I went with another solution using <label>'s and radio buttons.
6:57 pm on Feb 17, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there we5inelgr,
did you not check out the solution that I sent in my PM to you?

It uses images and thumbnails. ;)


birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month