homepage Welcome to WebmasterWorld Guest from 54.161.133.166
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4645451
 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]

 

not2easy




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

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




msg:4645547
 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');
});

lucy24




msg:4645561
 1:49 pm on Feb 15, 2014 (gmt 0)

Add this script


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

:(

rainborick




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

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




msg:4645644
 1:09 am on Feb 16, 2014 (gmt 0)

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

tangor




msg:4645645
 1:25 am on Feb 16, 2014 (gmt 0)

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

birdbrain




msg:4645737
 1:58 pm on Feb 16, 2014 (gmt 0)

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




msg:4646108
 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.

birdbrain




msg:4646131
 6:57 pm on Feb 17, 2014 (gmt 0)

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

It uses images and thumbnails. ;)


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved