Using Lightbox in Templates Vol 4

From Documentation
Jump to: navigation, search

Using Lightbox in Templates Vol 4

A number of templates from our newest release, Templates Volume 4, contain third party scripts modified for use in NetObjects Fusion. This tutorial will walk you through adding and editing images to take advantage of a Lightbox script included. Templates that ship with the Lightbox script are:

Coffee, Deco, Good Inc, Limelight, Oak, Portfolio, Sticky, and Treehouse.

Technical Details (How This Works)

The Lightbox script has been modified to automatically work with any resized image placed in the template that is NOT optimized by NetObjects Fusion. The image cannot be optimized as it is renamed in the process (by the software). These are the only two requirements, once again:

  • Image optimization must be set to none.
  • You must use the original image, then resize it within NetObjects Fusion using the image editing tools.

Additional Details

As the images are NOT optimized in NetObjects Fusion, we suggest optimizing them BEFORE placing them. You can use your personal image editing software or an online or locally installed program to optimize your images. Here is a great article from Mashable.com on image optimization solutions.

NetObjects Tip: Images will scale automatically to the browser.

Apply a Lightbox Effect to Images

  1. Use the Image Bank or the Picture tool to place an image on your page.
  2. Set the image optimization to none via the Picture Properties palette > Optimize settings.
  3. The Alt Tag will be used as the caption of your image, edit this via the Picture Properties palette.


Image-optimization.jpg

  1. Use the Geometry tab of the Picture Properties palette to resize your image.

NetObjects Tip: If your image was large enough to alter the layout area, you are prompted to resize the picture with the Image Inspector. Whether you resize using the Image Inspector or the Geometry tab of the Picture Properties palette, check the option for Maintain aspect ratio to ensure the dimensions of your picture remain intact.


Geometry-tab.jpg

  1. Publish your site and enjoy your Lightbox effects!