Welcome to WebmasterWorld Guest from 54.162.168.187

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)

New User

joined:Mar 15, 2013
posts:26
votes: 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)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3236
votes: 149


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)

New User

joined:Feb 15, 2014
posts:19
votes: 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)

Senior Member from US 

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

joined:Apr 9, 2011
posts:13682
votes: 446


Add this script


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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:939
votes: 25


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


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

Senior Member from US 

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

joined:Nov 29, 2005
posts:7521
votes: 506


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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 986
votes: 30


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)

New User

joined:Mar 15, 2013
posts:26
votes: 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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 986
votes: 30


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

It uses images and thumbnails. ;)


birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members