Change main photo when you click on links

I’m trying to add a very simple gallery where the photo is at the top and thumbnails are underneath. All I want to happen is that the photo changes when you click on one of the thumbnails. I’ve been trying to search for this but the galleries all seem to have stuff I don’t want.

At CSS Play (Stu Nicholls) you can find examples of clean galleries and other stuff. The html and the embedded css for it you’ll find if you view source.

Note the clicking on the thumbnails thing is a per-browser thing. Some browsers leave the :focus where you last clicked, but others remove it right away (mostly Chrome/Safari).

In general when something needs to happen “on click” then Javascript needs to be looked at. CSS can do whatever you want on :hover and on :focus but not on click.

There are ways to achieve that in css too. :slight_smile:

Two examples from where I linked that stay changed when you clicked a thumb:
A permanent image click horizontal gallery
A permanent image click vertical gallery

Weird ways…

Strong disregard for content in favour of presentation. It’s more like a demo of what CSS can do. But not a demo of how it should be used. I’d rather have a JS progressive enhancement. To go, please :slight_smile:

I usually prefer to have css replace javascript whenever possible, but not when the css is too hacky (as in way to complicated method of achieving what it should).
I would recommend just going with js for this.

I don’t think the horizontal gallery is weird. Not at all. :slight_smile:

The semantics is easily mended if you like (I’ve no idea why he used divs instead of a second list):

<ul id="fullsize">
	<li id="pic1"><img src="click/pic1.jpg" alt="pic1" /></li>
	<li id="pic2"><img src="click/pic2.jpg" alt="pic2" /></li>
	<li id="pic3"><img src="click/pic3.jpg" alt="pic3" /></li>
	<li id="pic4"><img src="click/pic4.jpg" alt="pic4" /></li>
	<li id="pic5"><img src="click/pic5.jpg" alt="pic5" /></li>
	<li id="pic6"><img src="click/pic6.jpg" alt="pic5" /></li>
	<li id="pic7"><img src="click/pic7.jpg" alt="pic5" /></li>
	<li id="pic8"><img src="click/pic8.jpg" alt="pic5" /></li>
	<li id="pic9"><img src="click/pic9.jpg" alt="pic5" /></li>
	<li id="pic10"><img src="click/pic10.jpg" alt="pic5" /></li>
	<li id="close"></li>

Then add list-style none to the now second list #fullsize and change the two #fullsize div selectors to #fullsize li.

The vertical gallery is a little more complicated but easily changed too. Didn’t check other examples. :slight_smile:

OP wants a simple gallery. I would recommend CSS in this case, afaik for now.

Thanks for the help guys. I’ve been trying to get a few javascript based change overs but am not having much luck.

I tried this but it just opened up the image. Then I tried [URL=“”]this which did work when you click it but it also opens up the image in a new window. Does anybody have a demo that they know works?

Oh and I had a look at CSSPlay but I couldn’t find a download link and couldn’t figure out what was going on the source.

I Agree completely with Erik J here. I don’t find it

Strong disregard for content in favour of presentation.

at all. If there is a change to use CSS over JS as team1504 mentioned you should grab it. And here is such a change!

In the source he always wraps the HTML in a div named “info”. The CSS is always embedded, you’ll find it wrapped with style tags at top of the source.

Copy paste his code like this to test:

<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
	[COLOR="Red"]Paste all the embedded CSS here.[/COLOR]

<div id="info">

	[COLOR="Red"]Paste all content from the div marked "info" here.[/COLOR]

</div> <!-- end of info -->

Hmmm… definitely JS progressive enhancement.

To all that look at the as an actual solution: if you surf with FF, please go to: View -> Page Style -> No Style.

If you surf w/ another UA, let me know so I will give you the path towards looking at the page w/o the author CSS enabled. Unless you can manage that your self.

You’ll see then what I mean when I say: strong disregard for the content.

Sorry, I can’t see that the fact that he reused the larger images also as thumbs - witch I didn’t notice, thanks - should mean that javascript would be the better solution.

I for one never surf with javascript active, so maybe I’m biased. :wink:

I am confused. if you were going to do this, CSS ONLY , why would you want to load two sets of images ( thumbs/full size). Wouldnt that mean EXTRA loading time and server request? I suppose one set becomes presentational, regardless of how its done with CSS or if there is actually a SMALL and big image , as the mark up contains both thumbs and full scale images are present .

it begs the question however, is this really mark up fro presentations ? since it’s done to circumvent having a DYNAMIC page…?

Well, all I can see is that for presentation and behaviour done with CSS alone, he’s hurting the content, having duplicate content elements. The HTML layer has to be unaffected by the presentational and behaviour implementations… as much as possibile. Using semantic-less divs and spans, for structure AND as hooks for presentation, even using those two as empty elements with the sole purpose of presentation, is one thing. Duplicating content for presentation is another.

Ah, I see what he’s doing. With the url fragments, he gets around the problems of browser focus. However it also wrecks the back button somewhat.

Wouldnt that mean EXTRA loading time and server request?

If this was an issue (as it would be if you were targetting low-bandwidth devices or the list was ginormous), then you’d have the clicking do a GET for the larger image. Sure there’s a lag, but then only the large image specifically asked for gets the request. Then you could ajax it if you wanted more speed (if that gives you more speed, I’m not sure… still requests to the server).

No more so than any normal “in page” links (although some people say don’t use in page links ).:slight_smile: You could argue that it actually makes it work better as you go back to the last image you clicked.

We used this method in some CSS quizzes a few years ago and also in the newer animation quiz. This game of pairs uses the same method.

The main problem I see with using fragment identifiers for a gallery though is the fact that you get a page jump when you click the link as the page navigates to the destination. Of course this brings all the picture into view so it may be seen as a good thing but I find it a little disconcerting.