Stacks Image 6

Loupe

Take a closer look with monster magnification.

Loupe

This lovable little monster offers a way for your visitors to inspect the finest detail in your images.

Overview.

There are two modes to choose from.

Primary mode : Gives a retina style Loupe when the image is hovered over.
Secondary mode: Makes the entire image zoom and slide when hovered over.

The stack only requires you drop one image into it. It takes that image and reduces it by 50% to present in the page.
When hovered, all the original detail is restored in the zoomed area (Loupe/ Content Box).

The stack really shines on mobile devices, allowing dragging the loupe around with the touch of your finger. The icing on the cake is the fact that the image remains responsive at all times

Instant download.

Version : 1.0.9

Responsive : Yes

First released : 11/4/2013

Last Updated : 24/7/2016

Stacks V 2.0 or greater.

Live demo.

You can see a few live examples of the stack in action below.

The retina loupe.

Stacks Image 697

Sliding content.

Stacks Image 702

Sliding content.

Stacks Image 709

The retina loupe.

Stacks Image 714

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Zoom type

There are two types of zoom effect to choose from.

  • Retina loupe.
  • Sliding content
Examples of each are shown in the demo above.

Disable mobile

When selected, you are given a further option to enter a screen size, below which the zoom effect will be disable on the image.

Mobile size

This size relates to the setting above. This is the width of the screen. On screen sizes below this width the zoom effect will be disabled.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Loupe needs no fancy user interface for ease of use. It could not be easier. It looks and behaves like a regular default image stack, with one notable exception.

When you drop in your image, Loupe will display it at half it's real size. The full size version is only seen when hovering the image to zoom in the previewed or published page.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

The image I see is smaller than the image I added?

When you drop an image to Loupe drop zone, it will display at half it's real size at most. A copy has been made to become what is seen in the zoom effect when hovered at full size.

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589