CSS Simple Photo Gallery Question

Question

Hello everyone! This is my first question on Stack Overflow. I heard this site was a great resource for website developers. I'm new and still learning so this should be easy.

I am making a photo gallery that has a few small thumbnail images and a large image in the middle, all on the same page. I want to make it so that when you click on each thumbnail the large image in the middle of the page changes.

Is there a way to do this with pure CSS and no javascript? Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?

Thank you in advance for any help! I look forward to participating here often!

Answer 1

I don't think there's a good way to do this with no Javascript.

With minimal Javascript, you could have all of the large images hidden, and use onClick on the thumbnails to un-hide the appropriate image.

With more Javascript, you could keep changing the src attribute of the large image and preload images using Javascript as well (see http://www.pageresource.com/jscript/jpreload.htm).

Answer 2

Is there a way to do this with pure CSS and no javascript?

It is possible, but not well supported in browsers.

You could link to the images and use :target to change the display property from none to block.

The problem with this is that if the browser supports display (i.e. almost all of them) but not :target (i.e. lots of them) then some images will simply be unavailable.

Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?

This would achieve that.

However, preloading the large versions of all the images would be quite a painful load on users' bandwidth.

Individual pages which use some form of include or server side process to duplicate the navigation are still the way to go.

Answer 3

A google search brought back some methods using pure CSS but I would suggest using a jquery plug-in like galleria. JQuery Plugins make this easy.