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.

 

azharmalik

on 13/6/11

 

i want to control zooming level.
Anybody who know must reply.

 

Corneliu Chitanu

on 13/6/11

If you want to zoom more into the picture, you'll just need to set a higher resolution picture for the component.

If you want to adjust the zoom level on the fly, in the component, you'll need to add the feature to the component.

 

azharmalik

on 13/6/11

what type of feature i need?
and
how i get this feature?

 

Corneliu Chitanu

on 14/6/11

Well, it would be a new feature built into the component. I don't know exactly what you need, but If you want to zoom in and zoom out into the picture, you'd need some kind of +/- buttons that would do that.

We can write the code for it, if you're interested in custom work. Just send more details about what you need to accomplish at [email protected]

 

K Liddy

on 24/6/11

 

Hi there,
First off love your products. I have a product brochure up using your Fade in Fade out slideshow with navigation. However some of the writing on product codes etc. is a bit small and would love to be able to integrate this magnifying glass into it. Can this be done? or has it already perhaps been done?
Thanks for the assist.
Karen

 

Corneliu Chitanu

on 24/6/11

Hello Karen,

Glad that you like what you see on Flabell.

We didn't do anything similar, but, sure, this can be done. It will just need some additional ActionScript coding.

If you need our help with this, please send us an email at [email protected] Just give us more details about what you need to accomplish and we'll help you.

 

DACAIO

on 31/10/11

 

Hello - I'm french ...Please forgive my bad english ...I need your help ... I succeed in creating my effect but i would like to post it on my blog (overblog) ... What code I have to integrate ??
Thank you for your help

 

Corneliu Chitanu

on 1/11/11

Hello,

We're sorry, but we're not familiar with Overblog. We don't know if you have a hosting server. If you don't you'll need to host the files on a server. The instructions we have for the WordPress platform should work for any website:

http://www.flabell.com/topics/view/492

Please follow them. It should do the job.

321

Post a comment

Please login to join the discussions. Don't have an account? Register (it takes 30 seconds)

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 [email protected].