Small photos to big photos on same page

[ggeoff]

I have seen websites where an arrangement of several photos is displayed. The user can see an enlarged photo by clicking or mouseover a small photo. The larger photo is displayed on the same page at the side of the arrangement of the smaller photos or in some other place on the same page.

The big photo is replaced by another big photo when the user selects another small photo
I am wondering where I can find a program to do this, or will I have to work from a script? At present I am using Frontpage 2002 but I am upgrading to MS Expresson Web 2.0 soon.

[MidiMagic]

Here is how it works:

1. Each small photo is a reduced size and resolution thumbnail image of its larger photo.

2. Each thumbnail is made a clickable device with an onclick to call a JS function for that photo. There is one function for each photo.

3. The function loads the image into an img container for the large picture.

[ggeoff]

Thanks Midimagic how do I get the code?

[MidiMagic]

You learn JavaScript and write it. It must be specific to your images.

[sTyleSHA]

I have seen websites where an arrangement of several photos is displayed. The user can see an enlarged photo by clicking or mouseover a small photo. The larger photo is displayed on the same page at the side of the arrangement of the smaller photos or in some other place on the same page.

The big photo is replaced by another big photo when the user selects another small photo
I am wondering where I can find a program to do this, or will I have to work from a script? At present I am using Frontpage 2002 but I am upgrading to MS Expresson Web 2.0 soon.

I think you are mentioning the Carousel View...Search for "carousel menu in flash" in google..it could be made in flash...some sites for your reference where you may find this source or tutorial is.

http://www.flshow.net/
www.kirupa.com
www.ffiles.com
www.flashkit.com (huge)

[ggeoff]

I think you are mentioning the Carousel View...Search for "carousel menu in flash" in google..it could be made in flash...some sites for your reference where you may find this source or tutorial is.

http://www.flshow.net/
www.kirupa.com
www.ffiles.com
www.flashkit.com (huge)

Thanks sTyleSHA but I don't have the Flash program I have FP 2002 and have just bought Expression Web 2.0. I also understand that many users will not be able to view Flash material. I was hoping to find a program that would do this for me, r4ather than reinvent the wheel.

[ggeoff]

You learn JavaScript and write it. It must be specific to your images.

Thanks MidiMagic. I don't understand why the program has to be specific to the images, if the only variables are position, size, image large and image small. However, I have found Craig Grannell's book: 'CSS and HTML Web Design' that has the code in it. The tutorial material is under 'Using links & Creating Navigation' section: 'Creating an online gallery' and uses JavaScript. The technique is called 'switching images with JavaScript' It cost 35USD and is a good buy.

I'll have to learn how to write and use JavaScript and also need to get started with CSS. I suppose I'll just have to take the steps to increase my knowledge in order to make my websites more professional. Thanks once again.

[MidiMagic]

It has to know the filenames and locations too.

[ggeoff]

It has to know the filenames and locations too.

Thanks MidiMagic. So if the program couldn't prompt the user for the relevant image location the user would have to carefully type this into the source code. This doesn't alter the basic function of the program does it?

[tommyt755]

I have used the code from Lightbox ( http://www.lokeshdhakar.com/projects/lightbox2/ ) a number times. It sounds like this is what you're talking about although it's all JavaScript and not Flash. Hope it helps!

[ggeoff]

Thanks tommyt755 I have had a look at Lightbox its not exactly what I want to do but it is very good! What I want to do is place a grid of, four small photos, for example, on the left hand side of the page. If on mouseover (or click) on one of the small photos a larger photo appears on the same page aligned to the right of the four photos. The user may then click on another photo and that will replace the existing large photo.