Introduction
This Stack enables you to place an image within a page. When a user hovers their mouse cursor over the image, the image is magnified and can be panned around on. This is an excellent Stack to use in various projects, such as photo albums, product information pages and educational websites. Setup is easy, no code is required and the image magnifier works across all major web browsers as far back as Internet Explorer 6.
System Requirements
To use the Image Magnifier Stack, you should have licensed versions of both RapidWeaver 4.4 or later and Stacks 1.3. This Image Magnifier Stack is not compatible with earlier versions of Stacks. Stacks 1.3 is a free update for all existing license holders.
To use the Image Magnifier Stack, you should have licensed versions of both RapidWeaver 4.4 or later and Stacks 1.3. This Image Magnifier Stack is not compatible with earlier versions of Stacks. Stacks 1.3 is a free update for all existing license holders.
60 Second Setup
Install the Image Magnifier Stack by double-clicking the downloaded image-magnifier.Stack file. Restart RapidWeaver for the Stack to become available in your Stacks library. Drag an Image Magnifier Stack from the library and drop it into your Stacks page. You will have something which looks like this:
Install the Image Magnifier Stack by double-clicking the downloaded image-magnifier.Stack file. Restart RapidWeaver for the Stack to become available in your Stacks library. Drag an Image Magnifier Stack from the library and drop it into your Stacks page. You will have something which looks like this:
Start by dragging and dropping an image into the first placeholder. This image should already be saved in a web safe format like JPG or PNG. You may wish to scale the image to size in an image editor like Photoshop, Gimp or Pixelmator beforehand (which scales images with better image quality). Or you can scale the image by double-clicking it in Stacks, clicking the cog icon to open the Stacks image inspector, and use the scale slider (pictured right).
Into the second placeholder goes your full size image. This is the image displayed when a user hovers their cursor over the Image Magnifier Stack. You can either use a different image to the first. Alternatively you can drag in the same image and set the scale differently using the Stacks image inspector (pictured above). With both images added, you should have something that looks like this in edit mode:
Preview your page in RapidWeaver to see the completed Image Magnifier in action.
Configuring the Image Magnifier
On its own, the Image Magnifier is a simple Stack and delivers great results. But there are some more advanced settings which can be accessed under the Image Magnifier HUD (inspector). You may wish to change some of these settings to improve the styling.
The HUD is accessed in edit mode, by clicking the small ‘i’ icon. The HUD contains several settings, pictured below:
On its own, the Image Magnifier is a simple Stack and delivers great results. But there are some more advanced settings which can be accessed under the Image Magnifier HUD (inspector). You may wish to change some of these settings to improve the styling.
The HUD is accessed in edit mode, by clicking the small ‘i’ icon. The HUD contains several settings, pictured below:
In the top panel, you can use any of the normal Stack settings to change aspects of styling like backgrounds, padding, margins, borders and alignment. In the lower panel is a setting unique to the Image Magnifier Stack, which enables you to change the smoothness of the pan effect.
Usage Notes
Usage Notes
- The Image Magnifier Stack has been tested for compatibility against a variety of themes supplied with RapidWeaver and a selection of popular third-party themes. However, compatibility with certain third-party themes may vary somewhat - those which are poorly coded, have not been updated for sometime or are pulling in an older version of MooTools may cause problems.
- For best results, use images which are optimised for the internet. These images offer an excellent balance between image quality and file size. The smaller an image file size, the quicker a page will load. Image editing software like Photoshop and Pixelmator are able to save optimised images via the web export function.
- There is no limit to the number of Image Magnifier Stacks you can have running on the same page.