Question

我正在尝试在放大和缩小图像时调用回调，但是未调用该函数，请帮助

$('.materialboxed').materialbox({
            onOpenStart: function(){
                imgZoomIn()
            },
            onOpenEnd: function(){
                imgZoomOut()
            }
        });

Answer 1

您想要这样的东西吗？

$('.materialboxed').materialbox();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />

<img class="materialboxed" width="650" src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg">

运行代码片段进行检查。

Answer 2

以下内容不适用于我，因此我不得不更新对此的物化引用，实际上我只是添加了本地的materizalize.min文件链接：

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

然后，仅像这样（对于jquery）进行初始化：

$('.materialboxed').materialbox({
    inDuration:275,
    outDuration:200,
    onOpenStart: function() {console.log("onOpenStart");},
    onOpenEnd: function() {console.log("onOpenEnd");},
    onCloseStart: function() {console.log("onCloseStart");},
    onCloseEnd: function() {console.log("onCloseEnd");}
});

如何在实现CSS Materialbox中使用用户选项

2 个答案: