Forum | Appery.io

Can I/HOW can I make an image zoomable?

As of now I'm opening a popup when clicking on a image. the popup contains only a image with size h 100% / w 100%. I want user to be able to zoom on this image.

V

I've read some posts on the same topic and it seems I have to downoad a zoom plugin, right? this one for example http://www.elevateweb.co.uk/image-zoo...
Say I download this plugin from their webpage, how do I get the downloaded files into Appery project?
Looking at photoswipe tutorial, provided by you, I can add http://www.photoswipe.com/latest/code... and http://www.photoswipe.com/latest/lib/... as external resourses to project. Is this the way i should add my plugin as well, in that case, which url should be used?

I feel really confused right now, please enlighten me

Hi Victor,

For example, for elevateZoom download a file jquery.elevatezoom.js and add it as custom JS. Then on page Load event run:preAppery("myimage").attr("data-zoom-image", path);
Appery("myimage").elevateZoom();/preWhere 'myimage' is name of Image component,
'path' is a path to an enlarged image.

Amazing, once again, blown away by this service.

Hello, I did exactly what was said to do here and I still get:

TypeError: Appery(...).elevateZoom is not a function

"For example, for elevateZoom download a file jquery.elevatezoom.js and add it as custom JS."

Hello, I did exactly what was said to do here and I still get:

TypeError: Appery(...).elevateZoom is not a function

"For example, for elevateZoom download a file jquery.elevatezoom.js and add it as custom JS."

Dear Katya

My Zooming image not work!, i just follow the code above and use jquery.elevatezoom.js.

path not define?

Here my load event js

Here my jquery.elevatezoom.js. as a custom JS

Plz help me...

regards
Romo

Dear Appery.

Any update!

Hello Romo,

Change variable path to path to an enlarged image.
ie instead of

codeAppery("mobileimage_mapHSC").attr("data-zoom-image", path);/code

Should be something like this

codeAppery("mobileimage_mapHSC").attr("data-zoom-image", Appery.getImagePath('mybigimage.jpg'));/code

If you loaded enlarged image in app via pictures assets.
Or like this

codeAppery("mobileimage_mapHSC").attr("data-zoom-image", 'http://my.site/some/path/to/image/mybigimage.jpg');/code

If enlarged image is somwhere in internet

victor, could you describe how you got this to work for you?

i'm having a lot of trouble with getting elevatezoom to work.