FUSION BUILDER LIVE  Compatibility Underway!

Ticket Support Hours: Monday-Friday 9am-5pm Eastern
Please note ticket response may take up to 24-hours.

Okay
  Print

Home    Articles    Multi-Shape Glass Loupe & Image Magnifying Element

Documentation: Multi-Shape Glass Loupe & Image Magnifying Element

Table of Contents

  1. Software Requirements
  2. Recommended PHP Configuration Limits
  1. Installation
  2. Registration
  3. User Guide

i. Software Requirements

  • WordPress 4.6 or higher
  • PHP 5.3 or higher (5.6 recommended)
  • MySQL 5.6 or higher

ii. Recommended PHP Configurations Limits

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

1. Installation

  1. Download the plugin from your CodeCanyon "Downloads" page
  2. Open WordPress, go to plugins, then "Add New"
  3. Click "Upload Plugin"
  4. Upload the plugin .ZIP downloaded from CodeCanyon, then click "Install Now"
  5. Activate the plugin.
  6. Go to Fusion Builder > Settings
  7. Make sure the "ArcticLune Image Magnify" element is checked. Click Save Settings.

The element will now be available to add to your pages!

2. Registration

To enable updates including new features and bug fixes, you’ll need to register the plugin. 

After the plugin is activated in the WordPress plugin list, a notification bar will appear near the top of the screen with registration instructions. Once that process is complete, plugin updates will be activated. 

If for whatever reason the notification bar does not show up, you can also register by clicking "Registration" underneath the plugin name. This registration link will only show up if the plugin is activated. 

You can check for updates by going to the WordPress plugin list, and clicking "Check for updates" below the plugin description. 

3. User Guide

This element is designed to be used with the Fusion Builder page builder interface. 

Quick Start Guide

  1. Click the "+ Element" button, then "ArcticLune Image Magnify"
  2. Open the element's settings
  3. Use the "Image" field to add the base image, then customize other settings as needed. Note: there is an "Animation" tab where you can set an intro animation to draw attention to the element when it comes in to view.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Sizing note: the Multi-Shape Glass Loupe & Image Magnifying Element is responsive, and will scale to fit the width of its container.

Increase the Image Magnification Amount

  1. Open the element's settings
  2. Under the "General" tab, set the "Magnification Amount" field to be the multiplication factor for the image.
    1. For example, entering "2" will set the magnification amount to twice as large (2x the original size)
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Set a Larger Magnification Image (For Clearer Results)

This is useful to load smaller, fitted images on the page, but provide higher-resolution images for magnification.

  1. Open the element's settings
  2. Under the "General" tab, click on the "Upload Image" button for the "Magnified Image (Optional)" field.
  3. Upload the larger version of the image.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Change the Interaction Type

  1. Open the element's settings
  2. Under the "General" tab, set the "Magnification Area Movement" to "Hover" or "Drag"
    1. If set to "Drag", you can also allow the user to click to move the loupe with the "Move By Clicking" or "Move By Tapping (Mobile)"" fields.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Set the Magnification Loupe Shape & Size

  1. Open the element's settings
  2. Under the "Design" tab, you can change the "Magnification Area Type" to "Circle", "Square", or "Custom".
    1. If you select "Custom", you can use the "Custom Area Type" field to change the border radius for each corner of the magnification loupe.
  3. Set the size of the magnification area loupe by adding a CSS value to the "Magnification Area Width" field.
    1. If desired, you can also choose a height for the magnification area loupe, otherwise it will default to the same as the width.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Style the Magnification Loupe Colors

  1. Open the element's settings
  2. Under the "Design" tab, you can change the "Magnification Base Color".
  3. You can set the border color in the "Border Color" field.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Adding a Shadow to the Magnification Loupe or Image Container

  1. Open the element's settings
  2. Under the "Design" tab, you can change the "Magnification Area Shadow" or "Image Container Shadow" styles.
  3. You can also set the color of each respective shadow style.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Set the Magnification Area Loupe Starting Position

  1. Open the element's settings
  2. Under the "General" tab, enter the top and left starting position of the magnification area loupe in the "Magnification Area Position" field.
  3. You can let the element automatically move the magnification area loupe back to the starting position by setting "Reset Position" to "Yes".
    1. If you want the position to reset, you can also choose whether to reset on mobile and choose a time (in seconds) before the magnification area loupe will reset.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Responsive behavior

Sizing note: the QR element is responsive, and will scale to fit the width of its container on smaller screen sizes.  This includes the logo and center text if they are applied to the element.