The image loupe widget is an interactive way to zoom in on the details of an image on your Adobe Muse website. Simply hover over the image to see a magnified section of the area beneath the cursor.
This is great for applying to your photography and design portfolios, ecommerce sites and more!
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
The Image Loupe widget has two parts: start by adding the Image Loupe Base widget by dragging it from the Library panel onto the page canvas. This can be either a master page, which will allow us to use the loupe on any page based on that master, or to individual pages where the loupe will be used,
There is no setup needed for this part.
Once the base widget is installed, we can add the Image Loupe widget to the design.
Drag the Image Loupe widget from the Library onto the page. An empty frame appears to begin with, as there isn't an image to display yet.
The text shown in the widget frame is the image description, this won't appear once the image is selected,
The option is for selecting the image. For the loupe to work properly, the image needs to be significantly larger than the size it will be displayed on the page.
In this example, the page item is 430px x 290px, the source image is 3000px x 2000px. Anything from twice the size upward should be sufficient. Bear in mind that it will take longer to download and display the image when viewed on the page.
Once the image has loaded, we can scale the frame to fit the design. The image will scale to fit the frame proportionally. Any excess at the bottom of the frame can be tightened up.
Next, we'll give the image a title and description, as we would with normal image in Muse. This is good for search engine optimisation and also for screen readers and will display if the image fails to load.
The loupe can be set to be round or square. We've set it to round here, as that's the classic style.
We can also set the loupe's width and height. For smaller images, like the one in the example, a width and height of 150-300 is a good size. The dimensions of the loupe don't affect the amount of magnification.
The width and height can be different sizes, of course. The loupe will be a lozenge shape, if it's set to round, and a rectangle if it's square.
The magnified portion of the image may be too large to be practical if a really high resolution source image is used (see inset). This can be adjusted using the Loupe scaling option.
The default value is 0. This displays the image at its original size in the loupe. Setting a value of 1 scales the loupe image right down, in the example this would be roughly 1:1 with the displayed image. Increasing the value starts to make the loupe image smaller. We found a value of 8 works well .
It is possible to scale the image larger than its original size but doing so will degrade the quality.
The final options determine how the space outside of the image frame will appear inside the loupe.
Here's the image used in the example with the Image Loupe widget applied.
The widget can be placed onto the page in the same way as any other design element in Muse, including composition widgets and inline with text wrap.