Zoom Step changes when Img src changes

[Pran54]

Again, great plugin! I am using the guillotine plugin on an img tag with an src that changes (the src is based on an ajax request that is dynamically changed by a user). After changing the src multiple times, the zoomStep changes significantly. I tried hardcoding in the zoomStep when initializing the plugin, but this still didn't fix the issue.

Another thing that could be related is that I only set up the plugin once, on the original img tag, and never again even after the src changes. I could post some code if that helps.

[matiasgali]

Thanks, I'm glad you found it useful.

The zoomStep isn't changing, the problem is that each time the buttons are clicked the zoom method gets called several times. Try this to see the problem in action:

$('#theImg').on('guillotinechange', function(ev, data, action) { 
  console.log(action); 
});

Check the console and see how many times each method gets called whenever you press a button after changing the image's src a few times.

You're instantiating the plugin and binding button clicks inside a handler for the image's 'onload' event, so each time you change the image's src a new image gets loaded, the onload event gets triggered and you are in fact creating a new instance and binding all the methods again to the same buttons. If you change src four times, when you click the zoom-in button the zoomIn method gets called four times, because there are four event listeners.

If you really want to keep an ongoing instance you should use .one() instead of .on(), so the handler is executed at most once, but I'd recommend against an ongoing instance. Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviours.

The best you can do is to let Guillotine handle dimension, on each successful Ajax request remove the old instance, change the src and get a new Guillotine instance.

Happy coding!

[Pran54]

Thanks for the advice! Works fine now.

[huynhgiatien]

hi all, i am having same problem with events get executed many times. Could you please help to let me know how exactly did you fix it?
"on each successful Ajax request remove the old instance, change the src and get a new Guillotine instance." => this is a solution, right? If so please help to let me know the detail steps. Thanks very much guys!

[huynhgiatien]

hi all, i am having same problem with events get executed many times. Could you please help to let me know how exactly did you fix it?
"on each successful Ajax request remove the old instance, change the src and get a new Guillotine instance." => this is a solution, right? If so please help to let me know the detail steps. Thanks very much guys!

[YuriGor]

Hi, try to call

image.guillotine('remove');

and than init plugin again.

[huynhgiatien]

hi YuriGor, thanks very much for your quick response!
Unfortunately it seems does not work. My situation is: i open a picture, zoom it, drag it a bit then after that every events from zoom, rotate.... will be duplicated. Note that even zoom then if i do not drag the plugin still works fine.
Somehow zoom + drag causes my problem.
Could you please help! Thanks man.

var picture = $('#image_review');
picture.guillotine({width:300, height:300, eventOnChange: 'guillotinechange'});
$('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
$('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
........

[YuriGor]

My current code looks like this:

                $('#image_review').load(function () {//each time when image is loaded
                    $(this).guillotine('remove');//clear previous instance, if it does exists
                    $(this).guillotine({width: 300, height: 300,//setup new plugin instance
                        onChange: function(data, action){
                            alert('!');//this alert pops up only once on each change, even after image reload
                        }});
                });

And it works fine.

[matiasgali]

@huynhgiatien please read the CONTRIBUTING file before posting.

The issue tracker is meant to be a record of bugs and problems of the repo itself. If it's polluted with questions, answers and comments it makes it harder to track the real issues and fix them.

So, as stated in CONTRIBUTING, don't post questions here. If you need help use on of the alternatives listed there for such purpose.

[huynhgiatien]

hi YuriGor, it works!! Thanks very much man. You save my day!
Sorry for adding comments the wrong way.
Again, such a great plugin and thanks all you guys for your help!