Image Zoom

[jesse]

I posted this message on the Summer Academy forum but thought I might get more feedback on the main forum.

Does anyone know where I can find an example of how to create an image zoom similar to http://www.professorcloud.com/mainsite/cloud-zoom.htm. I would like when the user mouses over an image it show a hidden image zoom window on the card. Any advice on how to attempt this?

One suggestion was look at Smart's (http://www.sosmartsoftware.com/?r=revol ... ciels&l=en) how to magnify an
image but I can't make sense of this one. It just confuses me. Is it really this complicated? I was hoping that Smart's was an actual tutorial but its only an example stack and doesn't explain how and what was done so i'm lost

[townsend]

This might be what you are looking for:


It is a good example, of 2x, 4x and 8x magnification.
Download from RevOnline: Magnify an Image

[Magic Toolbox]

Version 4.0 of Magic Zoom has been built to provide full support for mobile devices.

It's not out yet, but if you contact us we will send you a copy of the release candidate.

[jesse]

Thanks townsend,

I can't figure out how the initial image on origImg was set. When you look at the source there is no value. Any idea?
The reason I ask is I'm trying to figure out how to use this idea in my own app but if i don't understand it i of course
cant use it

hope you can help.

[townsend]

It seems most of the code is in the Card Script.

Code: Select all

on showMagnify x,y
   put (x - the left of img "origImg")/the width of img "origImg" into tHRatio
   put (y - the top of img "origImg")/the height of img "origImg" into tYRatio
   set the hscroll of grp "magGrp" to \
          round(the formattedwidth of grp "magGrp" * tHRatio) - (the width of grp "magGrp" div 2)
   set the vscroll of grp "magGrp" to \
          round(the formattedheight of grp "magGrp" * tYRatio) - (the height of grp "magGrp" div 2)
end showMagnify 

on scalePreview pScale
   put img "origImg" into img "magImg"
   set the width of img "magImg" to the formattedwidth of img "magImg" * pScale
   set the height of img "magImg" to the formattedheight of img "magImg" * pScale
   set the hscroll of grp "magGrp" to 0
   set the vscroll of grp "magGrp" to 0
   set the topleft of img "magImg" to the topleft of grp "magGrp"
end scalePreview

The scaling takes place thanks to the formattedwidth and formattedheight properties.

From the Dictionary:

formattedheight: reports the height needed by an object to display its full contents without scrolling.
formattedwidth: reports the width needed by an object to display its full contents without scrolling.

[jesse]

Ok... I see that and understand but I dont have a clue how origimage is set. When I open the script it of course shows the image in OrigImage but the filename is blank so how in the world does the image become loaded in the origImage field in the first place?

You see my app sets the image filename itself using the filename field.

Code: Select all

set the filename of img "mainImage" to the filename of "http://www.domain.com/image1.jpg"

So for some reason it looks like the put img command does not actually put the image into z2 so I'm unable to use the same
logic as the example. the best I can do is set the filename of the magImg but that still doesn't work for some reason.

Code: Select all

 put img "mainImage" into img "magImg"

any ideas?

[townsend]

From the Menu bar, see Development, Image Library. There under, This Stack, you'll find the original image.

How did it get there? See Menu bar, File, Import Control.

[jesse]

Thanks townsend. I understand how it got there. What I don't understand is how to change the image being shown in origImage. Attached is what I have so far. Would you be able to advise whats wrong with this why its not working when i mouse over my image? I seem to be doing everything the original example is doing i thought.

[jesse]

Ok... Got it somewhat but my zoom image is well not quite right. It appears to not be scaling correctly and the zoom window just
ends up being a copy of the origImage. Anyone care to take a look and see what the problem might be?

[Regulae]

Hi Jesse,

After some reflection, I believe the solution is to open the property inspector of image "magImg", under "Size and Position" tick the "lockLoc" box, and the zooming should work. Apologies to anyone confused by an earlier post on my part- I recommend not tackling Forum problems at 4:00 in the morning!

Cheers,

Michael