Using a Loupe effect in NetObjects Fusion

From Documentation
Jump to: navigation, search

Using a Loupe effect in NetObjects Fusion

A loupe is a Javascript effect that magnifies an object within a page, generally within a designated space. This Loupe script mimics a magnifying glass to which a higher resolution image is shown through.

Using a loupe effect in NetObjects Fusion has a few requirements listed below.

Loupe Requirements

  • One script file must be imported into your NetObjects Fusion site.
  • A jQuery call needs to be input in the BODY of your page.
  • Custom CSS needs to be input into the Style view of NetObjects Fusion.
  • Your HTML Generation Output needs to be set to HTML5 Dynamic.
Importing the js script

Download the file below. Save the file somewhere you can easily locate like your desktop or documents folder.

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

  1. Open your site the page you want the loupe 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 jquery.loupe.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 loupe 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.
Adding a jQuery call to the BODY of your page
  1. Open your site to the page the loupe effect will be on.
  2. Click to the Layout Properties
  3. Click the HTML button in the Layout Properties palette.

Paste the following code under this line:

<!-- NetObjects Fusion 2015 Generated BODY -->

<script>
$(".my-loupe").loupe({ width: 200, height: 200});
</script>

Jquery-call.png

Setting your HTML output to HTML5 Dynamic
  1. Click Tools > Options > Current Site.
  2. Under Site Generation, set the HTML to HTML5 Dynamic.

Current-site-options-site-generation.png

  1. Click OK.
Editing the Loupe Style

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

Here is the basic Style we’ve created:

.loupe {
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
-webkit-box-shadow:0 0 0 7px rgba(255,255,255,0.85), 0 0 7px 7px rgba(0,0,0,0.25);
-moz-box-shadow:0 0 0 7px rgba(255,255,255,0.85), 0 0 7px 7px rgba(0,0,0,0.25) 0;
box-shadow:0 0 0 7px rgba(255,255,255,0.85), 0 0 7px 7px rgba(0,0,0,0.25);
}
  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.

Read-only.png

  1. Click on the CSS Code tab.
  2. Scroll to a blank line in your CSS.
  3. Paste the code here.

Css-code-tab-loupe.png

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

Apply a Loupe Effect to Images

  1. Use the Image Bank or the Picture tool to place an image on your page.
  2. Resize the image to a smaller dimension.
  3. With the image selected, click Link.

The Link dialog appears.

  1. Change the Link Type to File Link.
  2. Browse for the image you added earlier in this tutorial.
  3. Click the HTML button.
  4. Add the following snippet of code between the end of the link code and end tag.

class="my-loupe"

It should look like the following:

Class-insertion.png

  1. Click OK.
  2. Click Link.