homepage Welcome to WebmasterWorld Guest from 54.146.143.102
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
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#: 4645449 posted 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

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



 
Msg#: 4645449 posted 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#: 4645449 posted 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

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



 
Msg#: 4645449 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4645449 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4645449 posted 1:09 am on Feb 16, 2014 (gmt 0)

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

tangor

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



 
Msg#: 4645449 posted 1:25 am on Feb 16, 2014 (gmt 0)

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

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4645449 posted 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#: 4645449 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4645449 posted 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