Lightbox Popup - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      




Lightbox popups are an interesting take on the traditional website popup. They are especially suitable for super-imposing an image on a website. A visitor would be able to click on an image on a website, and this would bring out a lightbox popup, providing a close-up of the selected image, while hiding away the rest of the website temporarily so that the visitor can focus on the image they selected.


Used appropriately this script can make visitors' overall website experience much more personalized, as only the images that the user wants to view in greater detail will be shown.





Selecting this script from the list of scripts (how), and clicking the button_widget_wizard_edit_settings button loads the following screen:


lightbox wizard



In this screen we need to set three things:


1. Select The Image That Appears In The Pop-Up - This is the image that appears in the pop-up, when the visitor clicks on a set thumbnail (see part 2 below). To set this image, browse to your image file by clicking the button_application_image_browse button and then by selecting your image file (by double-clicking it) from the file explorer window.


2. Clickable Thumbnail - The thumbnail is the image the visitor must click in order to see the image you set for your pop-up (see part 1 above). You have two choices for how you want the thumbnail to be:


Use existing image for the thumbnail image - This will use the exact same image that you set for your pop-up (in part 1) as your thumbnail.

Automatically generate the thumbnail - Use the drop-down selector to set the size of your thumbnail. The percentage options here will use the selected percentage of the image as the thumbnail.


3. Optional Caption - Set a caption that you would like to be displayed below the pop-up image. This can be any text description that you like.


When you are happy with your lightbox pop-up settings, simply click the insertbutton button to insert the script into your Web page at the cursor-point.

Home  Previous  Next