Video tutorial and step-by-step guide to creating light boxes which are attractive ways of displaying popup images.
A node owner who saw my BMW F650GS Motorbike Review contacted me to find out how I converted the thumbnail images in the article into "lightboxes" which when clicked expand to fill the screen.
This step-by-step guide will teach you how to add lightboxes to your articles and pages.
Click this image to find out what a lightbox looks like when applied to "Mr Pig":
Online Video Tutorial
To begin playback, click the play button
Another example of a lightbox - click the thumbnail to be shown full-size image:
1) Save your image in two sizes:
1st will be viewable on the webpage (small)
2nd will be viewable when clicked (full-size)
The reason why you create two files is so that your page loads up fast for people who have slow internet connections. If you use the same full-sized image for your thumbnail and lightbox then your users will think you've got a very slow website!
Note: 99% of computers come pre-installed with software for resizing images and there are also countless "online image resizers"
2) In the editor (Article or Page – it doesn't matter), click on the "HTML" button to enter HTML mode. At the top, copy and paste this HTML: