Magnifying Glass Effect

Display your gorgeous images in high resolution with no constraints. Your users will be able to magnify over the areas they are most interested in. You can define the image path (image of any size), the display area size as well as the lens size in XML or HTML.

The image is automatically resized to fit the entire display area, and this is the minimum zoom of the image. The large image is the maximum zoom of the image. Through the lenses the user can see the image at the highest resolution, without the need to wait for a different image to load.

This effect is called the magnifying glass effect, and we hope you enjoy it and will use it in creative ways!

Features:
1. Scalable lenses.
2. Scalable display area.
3. Scalable image.

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Magnifying Glass Effect - change log

Update 10 June 2010

- we modified the component to the new Flabell structure, replacing Main.as with Sample.as
- we also moved the image path in the Flash Vars, so you can pass the same XML but different images to different instances of the component, in your pages.

Magnifying Glass Effect - tips and tricks

Introduction: 

     This is a fully customizable Magnifying Glass Effect, with support for any image size (jpg, gif, png or swf). You can define the image path (image/swf of any size), the display area size as well as the lens size in the XML or HTML files (depending if you want to use the product in a flash file or html file).

     It is easy to use this product in your Flash projects or as an independent Flash Component in your html based website.

     If you want to use the component in a Flash file, importing it is as easy as moving some actionscript files around and dragging the movieclip containing the Magnifying Glass Effect in your Flash file.

     To edit the file you don't need any Flash experience, because all the settings are loaded from an external XML file, which you can edit with any text editor.

     The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Magnifying Glass Effect such as the PSD source file, the fla source file and the code.

Features:

1. Scalable lenses.
2. Scalable display area
3. Scalable image.

 

Folder structure:

     Please navigate to the deploy folder, inside the project folder. This folder contains all the files you need to upload to your server to have the Magnifying Glass Effect work.

     magnify/xml/settings.xml

     XML configuration file - This is where you make all changes to the look and feel of your Magnifying Glass Effect.

     js/swfobject.js

     Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.

     js/expressInstall.swf

     SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.

     preview.swf

     This is the component swf file which is embedded in your website.

     index.html

     HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file, using any text editor such as Notepad or Textedit.

 settings.xml structure: 

     Below you can see what each of the attributes in the XML file means:

<settings width="560"
height="420"
lensSize="200">

     Here you can define the component width, height, as well as the lens size.

<item image="images/image.jpg"/>

     Define the path to the preview image/swf file.

Flashvars:

     In the html file you can set some variables for the magnifying effect like dimensions (width and height), the path to the files if you choose to put them in another location rather than the same folder of course, and the path to the settings xml file.                        
     

flashvars.componentWidth = 560;
flashvars.componentHeight = 354;
			
flashvars.pathToFiles = "magnify/";
flashvars.settingsPath = "xml/settings.xml";  

Support:

     If you need any help using the product, please contact us at support@flabell.com.