Anyone know how to make a picture enlargable by clicking on it in RV Site Builder?

[Acornstudio]

I'm new to RV Site Builder (and creating websites in general). I'm wondering if anyone knows how to make a picture enlargeable when you click on it using RV Site Builder? Basically I have a bunch of pictures of different items on my site and when someone clicks on the picture I want it to get larger so they can see the details of the item better. Anyone ever done this? I tried contacting Web Hosting Buzz tech support and they said I might have to use Fantastico De Luxe to do this. I'm not sure how to even get started doing this in Fantastico or how if I did something in Fantastico I could get it to work in RV Site Builder (where I have 99.9% of the website done -- all the thumbnail pictures are there already). Any help from some of the more experienced web developers would be much appreciated.

Thanks so much!

[JasonD]

Two things...

First... You want to use icons (Smaller images), as opposed to using a full-size image that is just resized smaller.

Reason: Icon = 5k (0.1second load-time), Full-image = 500k (10.0second load-time). 10 images as icons = 1.0second, as Full-image = 100.0seconds.

Second... The code is a little complex, to handle that properly.

Reason: You have two choices, if done the simple way. Reduce to fixed-size, or reduce by percentage. If you tell an image to be 50px X 50px, and the image is actually 200px X 100px, it will get severely distorted as you turn a rectangle into a square. If you tell an image to be 50% X 50%, and one image is 50px X 50px, while the other is 200px X 100px, you end-up with one being too small, and one being too large and funky shaped to fit correctly.

The IDEAL method of reduction, can ONLY be done with javascript, and it does not work well on all browsers. It is called proportional constrained reduction. Where you tell all your images that are larger than 50px X 50px, to reduce proportionally, into that 50px X 50px space. (That results in the 200px X 100px image resizing proportionally to 50px X 25px, so it does not get squished from a rectangle, into a square shape. The image just shrinks as a ratio, until the largest side, fits into the desired constraint. While the 50px X 50px image, or smaller ones, would not attempt to shrink, since they fit in there, as is...)

Sooo....

In conclusion, your best option is to simply have two images. One you reduce by hand, so it fits in 50px X 50px, when too large. Then have the original image in a separate folder, and link the smaller image to the larger one.

<A HREF="http://www.com/images/full/0001.jpg"><IMG SRC="http://www.com/images/small/0001.jpg"></A>

Many paint-program can do batch-conversions, but few have settings to do proportional constrained reductions.

Hope that helps!

Just remember to name the small and large image the same, but in separate folders.