Need help with Image gallery

Get Started
1

I have a div containing image thumbnails on the left panel and an empty space div on the right. I want the user to hover and/or click on the thumbnail on the left, so the full size image, with description, appears in the space in the right panel. This will not go to a new page, but just make the larger image appear next to the thumbnails.

I’d like this to have a smooth fade-in effect, ideally.

What is the best way to do this? I’m not asking you to tel me the code, just what method would you advise?

I’m reasonably competent with html/css but dont yet know javascript/jquery. Is there a gallery that does exactly this you know of I can drop into my website or must I build it from scratch(which I cant do if it involves jquery/javascript)?

Thanks

2

Using a library like jQuery is very easy; with minimal understanding of Javascript.
You simply add the reference in the head of your HTML page


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

And then you can use all the really cool stuff shown in the API Docs, like [URL=“http://docs.jquery.com/Effects/fadeIn”]Fade.

HTH

3

Ok, guess I better get learning!

Thanks for your reply :slight_smile:

4

There are quite a few of these, such as

http://exposure.blogocracy.org/demos/demo1.html?v=0.9.1

http://www.twospy.com/galleriffic/example-2.html

http://demo.webdeveloperplus.com/featured-content-slider/

http://slidervilla.com/pointelle/

http://www.pikachoose.com/

As Parkin T said, these are very easy to add to your site. You can change their layout with CSS, too, of course. :slight_smile: