CODEWITHSUNDEEP
jqueryzooming
AmitV
AmitV

Reputation: 260

Assign shortcut key for zoom In/ zoom Out buttons for fs.zoomer.js

Please visit to check http://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/

I want to add shortcut keys for zoom In and zoom Out buttons. I tried but not getting proper event listener to start work.

Thanks in advance.

And you will get plugin from here

http://www.jqueryscript.net/zoom/Smooth-Image-Enlargement-Plugin-Zoomer.html

Upvotes: 0

Views: 618

Answers (1)

Imran Saleem
Imran Saleem

Reputation: 370

Now i have testing in my local machine it's working perfect.

Add Script in header

<script>
    $(document).ready(function () {
            $(".demo .zoomer_basic").zoomer();

            $(".zoominn").click(function () {
                $(".demo .zoomer_basic").zoomer('zoomInn');
            });

            $(".zoomoutt").click(function () {
                $(".demo .zoomer_basic").zoomer('zoomOutt');
            });

            $(window).on("resize", function (e) {
                $(".demo .zoomer_wrapper").zoomer("resize");
            });

            $(window).one("pronto.load", function () {
                $(".demo .zoomer_basic").zoomer("destroy");
                $(".demo .zoomer_custom").zoomer("destroy");
                $(".demo .zoomer_tiled").zoomer("destroy");
                $(".demo .load_zoomer_tiled").off("click");
            });
        });
</script>

That's code include in the pub object under the destroy method

/**
     * @method
     * @name zoomInn
     * @example $(".target").zoomer("zoomInn");
     */
    zoomInn: function() {
        var $targets = $(this).each(function(i, target) {
            var data = $(target).data("zoomer");

            if (data) {
                data = _setZoomPosition(data);
                data.keyDownTime = 1;
                data.action = "zoom_in";

                data = _clearZoomPosition(data);
            }

        });

        return $targets;
    },

    /**
     * @method
     * @name zoomOutt
     * @example $(".target").zoomer("zoomOutt");
     */
    zoomOutt: function() {
        var $targets = $(this).each(function(i, target) {
            var data = $(target).data("zoomer");

            if (data) {
                data = _setZoomPosition(data);
                data.keyDownTime = 1;
                data.action = "zoom_out";

                data = _clearZoomPosition(data);
            }

        });

        return $targets;
    },

Upvotes: 1

Related Questions