Let your customers see the Lightbox!!

build a websiteWhen you build a website, images are going to be a very big part of it. You may need an image gallery or simply use images alongside your text for design or visually informative purposes. Well, brace yourself because your use of images has just got really exciting!! One of the very latest features introduced by Reason8 is the Lightbox. 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. Its also great for documents, diagrams or maps.

The Lightbox is a fantastic new feature for several reasons:  

it grabs the attention of visitors,
it works on all web browsers,
it creates a much more interesting and responsive photo gallery
it does not require Flash animation,
it doesn't get blocked by popup blockers
it opens the image on the same page
it promotes easier browsing
and it adds a professional, yet fun aspect to your website.

So, how do you use the New Lightbox feature? Well lets have a look at creating a simple gallery….

Start by organising the images you want to use. You then need to create two different sizes of each image:

1) A thumbnail - 150 pixels wide. (For best results resize all your thumbnails to the same width)

2) A large version for the Lightbox – ideally no more than 750 pixels wide. (Any bigger than this and images can be slow to upload, which can cause impatience and frustration in your visitors! - a reaction we really want to avoid!)

When resizing your images, if you set the required “width”, the “height” should automatically change to maintain the existing aspect ratio.

If you don't have an image-editing programme, such as Paint shop or Photoshop, Google offer a super little programme called Picasa. You can download it free from: http://picasa.google.co.uk/.

Resize, then compress or optimise for web, then save the 2 new versions of your images into a new folder to make it easier to find them. I always add "small" or "large" onto the end of the original image title to make them easier to identify.

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. build a website

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 and click the edit button next to the page on which your gallery is going to sit.

You may wish to add a brief introduction for your gallery and perhaps an instruction such as "Please click the thumbnails below to view larger image..."

The best way to create a tidy gallery of thumbnails 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, don't worry if you're not sure how many you need, you can always add more in "Table Properties".

build a website

Select the width of your table. To fill the width of your website page neatly, select "percent" rather than "pixels" and enter a value of between 95 to 100. Again this can be changed if need be.

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.

build a website

In the Image Properties window, set the Size at width - 150 (thumbnail). Choose "middle" in the position box. Add a border if necessary. In Space around Image, the default "narrow" setting works well in most cases but change it if you need to. Then click submit.

Now lets link to the Lightbox!

Select the image you have just placed by left clicking it once and then click the insert link button , select; File > Images > select your image from the library (newly uploaded images appear at the bottom).

build a website

In the next window select YES to: "Open automatically - in a perfectly sized window?" Then click "Add to Website". Save your page…. wait for the page to save then click your thumbnail image and enjoy the show and revel in your technological skills!!!

Now simply repeat the process for any image, which has a larger version that you'd like to open with The Lightbox Effect.

build a websiteWe'd love these blog pages to become a handy forum for all Reason8 Web Builders, so please add your comments or questions and let's get chatting!!

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');