Using Lightbox in NetObjects Fusion

From Documentation
Jump to: navigation, search

Using Lightbox in NetObjects Fusion

Lightbox is a JavaScript technique used to display images similar to a modal dialogs where the image is centered, filling most of the screen, and the rest of the window is dimmed out.

Using Lightbox in NetObjects Fusion has a few requirements listed below.

LightBox Requirements

  • Two script files must be imported into your NetObjects Fusion site.
  • Image optimization must be set to none.
  • Custom CSS needs to be input into the Style view of NetObjects Fusion.
Importing the js scripts

Download the two attachments listed below. Save them somewhere you can easily locate them like your desktop or documents folder.

NetObjects Tip: Right click and select Save As for the above two files.

  1. Open your site the page you want the Lightbox effect to be located.
  2. Click on the MasterBorder to show the MasterBorder Properties palette.
  3. Click the Scripts Importing Order tab.

Scripts-importing-order.png

  1. Click the + button to add a script.
  2. Browse for the imagelightbox.js file.

The Script Settings dialog appears.

Script-settings.gif

  • Select Client Side for Script Side.
  • Select text/javascript for Script Type.
  • Select Page specific for Script Scope.

NetObjects Tip: If you wish the LightBox effect to be available on multiple pages, select either Side-wide or MasterBorder specific. You can now reuse the effect on any pages appropriate to your selection.

  1. Click OK.
  2. Repeat the process for nof-lightbox.js.
Setting Image Optimization to None globally
  1. Click on Tools > Options > Application options.
  2. Under the Program tab, locate the Auto-generated image output section.
  3. Select the Image type and select Not Optimized for Optimize.

Application-options.png

NetObjects Tip: Setting the Image Optimization from the Application options is a global setting, meaning the settings will affect all of your website projects in NetObjects Fusion. Continue reading below to set Image Optimization to none on individual images.

Setting Image Optimization to None individually
  1. Select an image and look to the Picture Properties palette.
  2. Under Settings, select Not Optimized.
  3. Repeat for all images that will be utilizing the Lightbox effect.

Individual-image-optimization.png

Editing the Lightbox Style

Below is a basic style for the Lightbox effect but you can edit as needed via the Style view.

Here is the basic Style we’ve created:

#imagelightbox {
position:fixed;
z-index:9999;
-ms-touch-action:none;
touch-action:none;
}

#imagelightbox-overlay {
background-color:rgba(255,255,255,.9);
position:fixed;
z-index:9998;
top:0;
right:0;
bottom:0;
left:0;
}

#imagelightbox-caption {
text-align:center;
color:#fff;
background-color:#666;
position:fixed;
z-index:10001;
left:0;
right:0;
bottom:0;
padding:.625em;
}
  1. Copy the code above.
  2. Open NetObjects Fusion to the Style view for your website project.
  3. If the Read Only option is checked in the Style properties palette, uncheck it.
  4. Click on the CSS Code tab.
  5. Scroll to a blank line in your CSS.
  6. Paste the code here.

Css-code-tab.png

  1. Click to the Graphic tab, you will be prompted to save, do so.

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.
  4. 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.