Thumbnail Image rollover to main image

[chippyb]

Hi all

Wondering if anyone could help, I am trying to setup a image gallery sort of thing on one of my sites to display multiply images, one main image, then about 3 or 4 thumbnails that when they are hovered over they are displayed in the main image selection.

I would like to know if you know of any websites that I could learn this from,

I know the gist of what I need to do but have found loads of different answers so far online that isnt helping, could anyone point me to a good website to learn

Thanks

 

[seemly]

Have a look over at codecanyon.net. Great resource for scripts such as this, and for a couple of quid per script, it saves both time and money searching there first.

 

[chippyb]

Thanks Chris

I will go over and take a look, im hoping to it from just pure css and html to save on page load times etc.

I didnt really want to buy as I really wanted to learn how to do it myself but I guess I can always study the code,

 

[seemly]

No worries.

I was going to ask if you wanted a CSS only version, but figured you would prefer jquery.

A pure CSS thumbnail gallery is easy enough to do - head over to Stu Nicholls CSS Play - this is a great resource for stepping into more advanced CSS. Just open up the code and have a good play.

Maybe try this one: http://www.cssplay.co.uk/menu/gallery.html

 

[chippyb]

Thanks again Chris,

Thats a really good resource there, shame there is no search on the site to find what im looking for, having to go through them all at the mo but havent really found what im after, some are close but there only support a handful of browsers.

Im sure it will be in there somewhere

 

[seemly]

Even if you look at:
http://www.cssplay.co.uk/menu/

Surely you could adapt the code from something like this:
http://www.cssplay.co.uk/menu/photo_simple.html

 

[chippyb]

Seriously Thank you, I have been looking for that all day and I think I have just gone blind trying to find something lol,

That is what i am after, just need to make the hover image stay as main after they move cursor away and that will be it

Cheers

 

[seemly]

Seriously Thank you, I have been looking for that all day and I think I have just gone blind trying to find something lol,

That is what i am after, just need to make the hover image stay as main after they move cursor away and that will be it

Cheers

Click the thumbnail.