Eagle Owl

Overview

The Eagle Owl add-on is a modern, easy to use viewer that allows you to see not only the main image but also the icons of the following images, zoom images and view them in the full screen mode on the product details page. The icons could be clicked to switch the main image via the mouse and also via the keyboard that increases the UX of your site. The image counter shows the number of the current image as well as the total images number of the product.

Desktop version:

The The Eagle Owl add-on is fully responsive.

Mobile version:

Tip

If you use Eagle Owl add-on with YouTube Gallery, YouTube videos will be shown right in the previewer pop-up.

Learn how to install the add-on, configure settings, and more by following quick and easy steps below.

Features

  • Ability to switch images via the mouse and the keyboard
  • Ability to zoom images (including touch screen devices)
  • Full screen mode for viewing images
  • Ability to change the previewer pop-up size
  • Displaying of the current image number and the total images number
  • Ability to see icons of the following images
  • Adaptability for RTL languages
  • Ability to change icons and thumbnails size

Compatibility

The add-on is compatible with CS-Cart and Multi-Vendor 4.10 and above, but only versions 4.12.x and above are supported. Minimum required PHP version is 7.1.

See more information about compatibility of our add-ons here.

Support

You are guaranteed a quality add-on supported by the future versions. If you need help, please contact us via our help desk system.

Demo

Check out the Eagle Owl add-on in our demo store.

Note

Every half an hour the demo store is reset to the default state.

Managing in the admin panel

Installing the add-on

Install the Eagle Owl add-on on the add-ons list page (Add-ons → Manage add-ons). Click the + button in the top right corner, select an archive and click Upload & install. You can now find the installed add-on in the list of installed add-ons, just make sure it is set to Active.

Important

The add-on is not compatible with AlexBranding Advanced image previewers add-on

Setting up the add-on

Here are available settings of the Eagle Owl add-on.

  • License key—Enter the license key to activate the add-on. You will receive this key in the order confirmation email. You can also see license keys for all your purchased add-ons in your HelpDesk account.
  • Color for active element—Choose the color for active image and image in focus in the previewer. The color is set in RGB color system with transparency supporting.
  • Icons size—Set the size of the icons in the viewer pop-up (could be chosen in the range 24 - 72 px).
  • Thumbnails size—Set the size of mini images in the viewer pop-up (could be chosen in the range 30 - 150 px).
  • Modal box size—Set the size of the previewer pop-up. The available variants are: Stretch to window size, Large, Small.
  • Apply transition animation—If selected, animation for image switching is applied.
  • Animation—Choose the effect for transition animation. The available variants are: Fade, Back Slide, Go Down, Scale Up.
  • Apply image zoom—If selected, zoom for images is available.
  • Use full screen mode—If selected, full screen mode for viewing images is available.

Note

For IOS devices full screen mode is unavailable.

Important

To change the default previewer to Eagle Owl, choose Eagle Owl in the setting: Settings → Appearance → Default image previewer and press Save in the upper right corner.

Hot keys for Eagle Owl pop-up

  • [Esc] - Close pop-up
  • [→] [↓] - View the next image
  • [←] [↑] - View the previous image
  • [Tab] - Switch focus to the next image
  • [Shift + Tab] - Switch focus to the previous image
  • [Enter] [Space] - View the element in focus
  • [F] - View the image in full screen mode.