What is Lightbox and How to Use it in Weebly?

What is Lightbox?

Lightbox is a popup overlaying window shows the original size of an image or a video when clicked on it. JavaScript was initially used in this image overlaying technique with jQuery introduced later to provide better user interface. When an image is shown in the overlaying window, user will still be able to use keyboard functions like up / down arrows and tab to navigate on the page without closing the popup. The outside area in the page is dimmed out and clicking outside lightbox will exit the popup.

Below is an example of an image when viewed as a lightbox:

Enabling or Disabling Lightbox in Weebly

Weebly allows to add lightbox effect to the images using two elements:

• Image Element – you can add lightbox effect to a single image.
• Gallery Element – you can add lightbox effect to a image gallery.

Adding Lightbox on Single Image

Drag and drop an image element on the desired content area and add the image to your Weebly website. Once added, click on the image to see the advanced popup settings box as shown in the screenshot below.

You can enable or disable the lightbox using the “Lightbox” option.

Using Lightbox on Gallery

Similar to single image, add a gallery element and upload all your images. Click on any of the image to see the advanced settings and you can enable lightbox under “Thumbnail” option. The gallery element has three options for lightbox:

• Lightbox Only
• Lightbox & Partial Thumbnails
• Lightbox and Full Thumbnails

When to Enable Lightbox?

It is not necessary to enable lighbox for all the images on your Weebly site. Below are some of the situations you may need to use this feature:

• When resizing larger size images to smaller size
• When an image has text and the user needs to enlarge the image to original size in order to view the text.
• View the gallery of images elegantly.

When the lightboxof an image is disabled then the user will not be able to click on the image to see the original size in a pop-up window. Also lightbox option can’t be used when linking the image to any other resource since clicking on the image will take you to the target URL.

How Weebly Lightbox Works?

Weebly uses a third party jQuery fancybox script from fancyapps.com to offer lightbox feature. You can customize the lightbox effect by reading the tips & tricks section on fancyapps site. If you don’t like Weebly’s default lightbox effect, you can use any other JavaScript or jQuery plugins to add lightbox effect to your images. Some plugins also display all the images on a page in a pop-up slideshow view.

Disadvantages of Using Lightbox

Though the lightbox effect looks good, it has many disadvantages.

• Since jQuery script is used to provide the fancy effect, using lightbox will increase the page load time, hence use only if it is required.
• Since original image can’t be viewed in a browser window, the only way to copy the image URL is to right click on the image and copy the URL.
• Feature will not work if JavaScript is disabled in a web browser. Full size images will open on a browser window when JavaScript is disabled.