How to use Magiczoom Callbacks

Question

The magiczoom documentation describes callbacks that will execute at given times, but it's unclear how to use or assign those callbacks.

For example, how would I print a console message onZoomReady?

The closest I've found is a MagicZoom.defaults.onready property, but it's unclear how to set it via javascript (my attempts aren't working as expected).

Can you post some of your attempts – Donald Jansen Dec 12 '15 at 17:19 — Donald Jansen, Dec 12 '15 at 17:19

Dan Roberts · Accepted Answer · 2015-12-21T04:25:20.087

5

The callbacks are configured via mzOptions, for example:

var mzOptions = {
    onZoomReady: function() { … } }
;

Or:

var mzOptions = {};
mzOptions.onZoomReady = function() { … };

edited Dec 21 '15 at 04:25

answered Dec 14 '15 at 13:25

Dan Roberts

517
7
13

Such callbacks as described above cannot be configured to change data-options. Instead, a separate callback can be set via the mzOptions, for example: `` – Dan Roberts Jun 03 '16 at 12:32

score 0 · Answer 2 · answered Aug 30 '22 at 07:05

You can do something like this:

MagicZoom.registerCallback('onUpdate', 
    function() {
        console.log('onUpdated', arguments[0], arguments[1], arguments[2]);
    });

That will log stuff in the console like this:

onUpdated (id-of-mz-wraper) (html of old element) (html of new element)

Other options that you can use are as per the documentation:

MagicZoom.registerCallback('onZoomReady', function() {
  console.log('onReady', arguments[0]);
  });

MagicZoom.registerCallback('onZoomIn', function() {
  console.log('onZoomIn', arguments[0]);
  });

MagicZoom.registerCallback('onZoomOut', function() {
  console.log('onZoomOut', arguments[0]);
  });

How to use Magiczoom Callbacks

2 Answers2