Put a spotlight on your images.
Images are an integral part of any website, especially an ecommerce site, which will be using images to sell the products and / or services. Presenting your images in the best light is vital to help customers make that all important decision – to buy! If a customer wants a closer look at a product image, wouldn’t it be great if they could simply click on it and a larger version popped up in its own window? Well, brace yourself because your image presentation is about to get really exciting!! Reason8 have made life very easy for website builders with a feature called the Lightbox and you’re not going to believe how simple it is to incorporate this feature into your website.
On a web page, when you click a photo, a Lightbox is an effect that fades the page into the background to show or highlight new content in the foreground - most commonly larger images. It’s also a perfect way to present documents, diagrams or maps. Other plus points for the lightbox feature include the fact that it doesn’t require Flash animation, it doesn't get blocked by popup blockers, it opens the image on the same page, it makes the act of browsing and viewing a simple and pleasurable experience for visitors to your website and it adds a professional and fun aspect to your website.
Sounds great doesn't it?... Here’s the step by step.
You’ll need to open whichever image editing programme you normally use. Photoshop, Paintshop, Paint etc. If you don’t have one already, we recommend Picasa. You can download it free from: http://picasa.google.co.uk
Start by organising the images you want to use. You’ll need to resize your images to create two different sizes of each image. You may find it helpful to create a new folder for your resized images. Save them as new images and add the words "small" or "large" onto the end of the original image title to make them easier to identify. They group together nicely this way too!
1) A thumbnail - 150 pixels wide.
2) A larger version of between 600 - 750 pixels wide.
(Images can be no larger than 1000 pixels in either height or width)
Now login to your website and click step 3. On the left side of page, is a column of grey buttons. Click the "Manage Pictures and Files" button. Click "Larger Images" and in the next window, browse and upload the large versions of your images one by one.
Now go back to step 3, click to open your webpage in editor mode and place your smaller images on your page. You may wish to add a brief instruction line above your thumbnails such as "Please click the thumbnails below to view larger image..."
How to link to your larger image...
Select the first image by left clicking it once and then click the yellow insert link button, select; File > Images and find and select your larger image from the library (new images appear at the bottom). In the next window select YES to: "Open automatically - in a perfectly sized window?" Then click "Add to Website". Once you’ve linked all your images to their respective larger copies, click Save.
Now try it out, click one of your images and the lightbox feature will materialize before your eye’s.
You can also set up the lightbox feature on shopping basket items in step 4. Click to edit an item and in the description box, type something like, “Click to View Larger Image” the link this to the larger image.
If you have a number of images, the best way to set them out is to use a table. Place your cursor where you wish your table to sit then click the "Insert Table” button. Select the number of rows and columns you need, you can add more later in "Table Properties". Select the width and alignment for your table. Now left click to place your cursor in the first table cell that you wish your first image to appear in and click the insert image button. Browse and select the small version of the first of your images. In the Image Properties window, the size should be 150 pixels wide. The position needs to be "middle". Add a border if necessary. Space around the image should be the default "narrow" setting, which is fine. Then click submit.