Using lightboxes

Lightboxes are a fun and modern way of displaying all kinds of web content superimposed over your web page. When you click an object, the light box presents your chosen content "on demand" in a pop-up window.

Lightboxes can be used to display:

To create a lightbox for a picture on your web page:

  1. Select the picture (preferably a thumbnail).

  2. Click  Hyperlink... from the Web Properties toolbar (or Format menu or right-click).

  3. From the Hyperlinks tab, select Picture from the menu.

  4. From the Target Window tab, choose Lightbox from the Type drop-down list.

  5. (Optional) Add a caption to the picture in the lightbox using the Caption box. You can also make the picture part of a slideshow using the Slideshow Name drop-down list. (See Lightbox slideshows.)

  6. Click OK.

To restrict the display size of this linked "lightboxed" picture, WebPlus scales down outsized pictures to a maximum width and height (default 800 x 600 pixels) always preserving their aspect ratios. Images with native dimensions less than these maximum dimensions are left unchanged. The maximum width and height can be modified.

To modify the maximum linked picture dimensions:

To create a lightbox to a local picture:

You'll have the option to embed or link the picture; either way, the picture always displays using its native image dimensions.

Lightbox slideshows

Simple lightbox slideshows can be created which are based on the pictures already placed on the same web page. The lightbox itself will display controls to navigate through your slideshow.

To create a lightbox slideshow:

  1. Create a lightbox for a picture on your web page (as above).

  2. From the Edit Hyperlink and Actions dialog, select the Target Window tab.

  3. Enter a slideshow name in the Slideshow Name drop-down list. This will be used for other pictures to be added to this slideshow. Click OK.

  4. Repeat for the next picture. The previously created slideshow name will show for other pictures. Select the slideshow name to include this picture.

  5. (Optional) Enter caption text.

  6. Click OK.

  7. Lightbox slideshows only apply to pictures on the same page. If pictures are added to a slideshow from different pages, then a new slideshow will be created for each page.

Lightboxes to any hyperlink target

Lightboxes are not just limited to the display of pictures. As a light box is actually a type of window, any hyperlink target can be displayed within it—typically a form, login box, page in your site, Internet page, blog, forum, or RSS feed. You can also view a Word file, PDF, or any other file type (using the File option) in your lightbox.

To create a lightbox to any hyperlink target:

  1. Select an object (picture, button, navigation bar, or any other object) or text.

  2. Click  Hyperlink... from the Web Properties toolbar (or Format menu or right-click).

  3. From the Hyperlinks tab, select a hyperlink target from the menu.

  4. From the Target Window tab, configure the lightbox as described previously.

Setting global lightbox properties

As with most settings in WebPlus, you can customize lightbox settings for the current site. Settings can be adjusted for general lightbox controls (including border type), caption controls (font, font size, font colour, opacity), and background settings (colour and opacity).

To modify lightbox properties for your site:

  1. From Edit>Site Properties..., select the Features>Lightbox menu option.

  2. Modify settings in the General, Caption, and Background Settings sections.

  3. (Optional) Preview your lightbox using the Preview Lightbox... button, fine-tuning your settings between previews.

Photo gallery lightboxes

You can create lightbox-style photo galleries if using a JavaScript Photo Gallery; a gallery style is available specifically for lightboxes.

If you choose this style, you can configure lightbox settings which will override the global Site Properties settings (see above).