Forum | Appery.io

hi Kateryna, Yurii

I just find this in your blog:

http://blog.appery.io/2014/10/process...

I created an App from this plugin (SIRV Dynamic imaging API) and started to play with it...

I also read the documentation :

https://www.sirv.com/resources/docume...

I want to make the image zoomable but not with a slide bar (as in the example App), but by tapping/pinch on it

Can you help me to add this funcionallity to the existing app?

Regards

Hi Alex,

Please open javascript asset in the app and you will find js code that makes this logic.

pre

var resultURL = Apperyio.storage.photoLink.get() + '&scale.width=' + Apperyio('width_slider').val() + '%&quality=' + Apperyio('quality_slider').val();

/pre

You can change or use other code to change "Apperyio('width_slider').val()" with your goal value.

Regards.

Hi Yuri,

Maybe I didnt explain well,

I want to change the image width without the sliding bar, but by touching the image (pinch/zoom)

Your suggestion only sets the scale/width to a given value..

Is what I want possible?

Regards

Hi Yurii
I also tried the plugin adviced by Kateryna,

https://github.com/e-smartdev/smartJQ...

I created a custon JS with this file:

e-smart-zoom-jquery.js

and then on page show event added this:

$(document).ready(function() {
$("#elementToZoomOn").smartZoom(); // start plugin behaviour
});

but nothing happens to the image I cant zoom it,

In my screen I only have an image and the code. And I set elementToZoomOn to image class...

What Im doing wrong ? Any suggestions?

Regards

Hi Alex,

In this case you don't need "SIRV" powerful functionality.

Follow these steps to get smartZoom work:

1 Delete all code done before for this goal.

2 Create new JS asset call it "smartZoom". Insert inside code from this file:

pre

https://raw.githubusercontent.com/e-smartdev/smartJQueryZoom/master/src/e-smart-zoom-jquery.js

/pre

3 Add "page show" event handler with action "Run Javascript" and populate it with following js code:

pre

//note: "mobileimage_2" should be replaced with your image component name.
Appery("mobileimage_2").smartZoom();

/pre

That's all.

Regard.

Yurii,

Thanks for your quick support!

I followed your instructions and just got this error code on console:

SO, I comment line 663 and the error gone, and everything worked fine...

Do you think that commenting line 663 can have any harm on the implementation?

Regards

Hi Alex,

Glad it works..

I'm sorry i can not tell you exactly but it seems that line is something related to cssAnimation..

FYI i did not have this problem in my app.

Regards.

Hi Yurii,

The zoom option works great with a static image, but I have another problem..

My app is a business locator, so I have one image inside a grid, that is populated by list service from DB.

if I add this code on page show:

Appery("image").smartZoom();

only the first image of the list is zoomable,

Then I followed another aproach, I put this code on the link from the array (loop) to the grid:

zoom(element);

and created a custom JS with this:

function zoom(context) {

    $("[name=image]",context).smartZoom(); 
    //$("[dsid=image]", context).smartZoom(); 
    }     

}

neither worked, zoom is not working...(no errors in console)

any thoughts?

Regards

Hi Alex,

The problem you have paced out is - Apperyio() function returns only one component per function invoke. But you can use jQuery() analog for this goal.

You should run following code on success event handler for your "list/query" service that populates your grid.

pre

//Note: you should replace "imageName" with your image name.
jQuery('[name="imageName"]').smartZoom();

/pre

Regards.

Hi Yurii,

I followed your instructions...but that caused an issue:

all the images are in the (same) first grid component, as you can see in the SS..

I moved the code to complete event, and also to page show..but in this case images are in the correct place, but not zoom aplied...

any ideas?

Regards