Click on thumbnails to display larger image in separate div

[designclash]

I would like to be able to click on a thumbnail images which will display the larger version in a separate div. Preferably the image fades in rather than just appear. Additionally I would like a border to appear around the thumbnail when selected.

The only experience I have of javascript/jquery was from installing a lightbox2 gallery.

I am total newcomer, so please be kind!!!


stuart lighting v3 projects.jpg

[ralph.m]

There are lots of prewritten jQuery scripts for this sort of thing. You can Google things like jQuery thumbnail gallery" etc. and find a lot of examples. Here are some that may or not be what you want, or at least adaptable to your need:

http://www.twospy.com/galleriffic/example-2.html (article)
http://www.pikachoose.com/
http://galleria.io/
http://demo.webdeveloperplus.com/fea...ontent-slider/

[designclash]

Thankyou for your input. The Galleriffic one looks the closest.

In my attachment I have the left hand column which contains the thumbnails and the right hand column which is currently a blank div which I hope to display the selected image.

Could Galleriffic be adapted to my current layout? I'd like to keep the layout exactly as it is.


Many thanks

[ralph.m]

Are you saying that, on page load, you want a blank space where the photos will appear?

Of course that's possible, but I'm not sure if those scripts allow for that. (That's the downside of not knowing how to write them yourself.)

Here is a nice, simple JS gallery that doesn't use jQuery, but just some simple JS:

http://domscripting.com/domsters/photos.html

It has a placeholder image until you click on a thumbnail. You could make that placeholder image a simple, transparent one, so that it looks like there's nothing there, or an image the same color as the background. You can style this gallery to look just like your screen shot, too.

And here's another jQuery gallery I meant to list:

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

Not what you want, quite, but o well ...

[designclash]

The right hand div shouldn't be blank on page load but contain a default image which should be the first thumbnail.

Thanks for al your input. Can anyone recommend a good JavaScript book for novices?

[ralph.m]

The right hand div shouldn't be blank on page load but contain a default image which should be the first thumbnail.

That sounds contradictory ... but anyhow, I think that domsters link is what you want.

Can anyone recommend a good JavaScript book for novices?

That domsters gallery I linked to is from an excellent book by Jeremy Keith, called DOM Scripting. It's a classic, and explains in detail how that gallery works. (There is a new version of the book here: )

[designclash]

Thanks for the link its on my wish list, which is growing by the day. It has received many good reviews which is a big plus.

Basically I have 2 columns. Click on a thumbnail in the left hand div and a larger version of the images appears in the right hand div.

Thanks again for the help. Much food for thought.

[designclash]

Didn't see your earlier reply but yes the domsters link is pretty much what I had in mind.

Cheers!

[ralph.m]

Yes, it's a really nice bit of code, too. And it can be laid out any way you like—just as in your screen shot. If you need any help with the layout, just let us know.

[designclash]

The layout and styling is actually done and exactly like the wireframe. Being a novice I had trouble to start with but it all clicked into place. Starting to enjoy piecing the puzzle together and am thinking I prefer it to working in print!

I should imagine I'll have a few more questions soon but thanks for the input.

[ralph.m]

Glad it's working out. It's more satisfying and reassuring to get there yourself (at least for the most part).