为 fs.zoomer.js 分配放大/缩小按钮的快捷键答案

【问题标题】：Assign shortcut key for zoom In/ zoom Out buttons for fs.zoomer.js为 fs.zoomer.js 分配放大/缩小按钮的快捷键
【发布时间】：2017-01-04 06:39:30
【问题描述】：

请访问查看http://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/

我想为放大和缩小按钮添加快捷键。我试过但没有得到适当的事件监听器来开始工作。

提前致谢。

你会从这里得到插件

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

【问题讨论】：

你如何尝试？你能分享你的代码吗
好的，为了找到主要的缩放功能，我添加了额外的放大/缩小按钮。我在 jquery.fs.zoomer.js 中找到了 _zoomIn() 函数，并将这个函数称为 $(document).on("click",".zoominn",function({console.log("zoom In"); _zoomIn( ); }); 我猜，这段代码是不够的。

标签： jquery zooming

【解决方案1】：

现在我在本地机器上进行了测试，它运行良好。

在标题中添加脚本

<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>

那是包含在 destroy 方法下的 pub 对象 中的代码

/**
     * @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;
    },

【讨论】：

Imran，我只想使用带有放大和缩小按钮的基本版本的缩放器。第一个演示对我来说工作正常。唯一的问题是我想使用快捷键调用这两个选项。这是我正在开发的应用程序所必需的。
感谢您的努力 Imran，现在您可以查看此 jsfiddle 链接 jsfiddle.net/amitv1093/dLw9knqu。我照你说的做了，然后打电话进了 zoomInn，你可以看到警报来了。但是单击按钮没有任何变化。如果您在我的小提琴上添加您的更改并分享工作示例，这对我有好处。
如果您的要求满足，请立即接受我的回答
当然兄弟会做 :-) 请帮我解决这个问题。
它工作正常，兄弟。问题是 zoomIn 和 zoomOut 没有间隔地发生，这意味着在 zoomIn 单击时，图像缩放到最大和缩小时的原始大小。拖动也不起作用。你能修好它吗？我必须尽快部署这个。再次感谢兄弟。