Question

我正在使用Materialize CSS，并具有“材料盒”，它是一个灯箱插件。我希望所有缩略图的大小均相同。单击后，我希望加载完整的照片。

我正在使用onclick来更改src。当大照片关闭时（如何通过单击或退出键将其更改回缩略图）？

<div class="col s6 m3">
    <img class="materialboxed responsive-img" src="images/thumb1.jpg" onclick='this.src="images/photo1"'>              
</div>

材质盒Javascript

      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.materialboxed');
        var options = {}
        var instances = M.Materialbox.init(elems, options);
      });

      // Or with jQuery

      $(document).ready(function(){
        $('.materialboxed').materialbox();
      });

Materializecss.com-https://materializecss.com/media.html

我还没有找到一种通过裁剪后的方形缩略图来实现灯箱效果的简便方法。任何建议将不胜感激！

Answer 1

这是您想要的一种实现，可以跟踪图像单击状态。

$(document).ready(function(){
    $('.materialboxed').materialbox();

    // Image sources
    const srcThumb = '/images/thumb1.jpg'
    const srcPhoto = '/images/photo1.jpg'

    // Click state
    var clicked = false

    // Get image element and bind click event
    const img = $('.materialboxed')
    img.on('click', function() {
        img.attr('src', clicked ? srcPhoto : srcThumb)
        clicked = !clicked
    })

});

Answer 2

在这种情况下无需依赖 onclick。 Materialize 已经为这些图像绑定了 onclick。它提供了以下原生方法，我们可以使用纯 JS（无 jQuery）来做你想做的事情：

<块引用>

onOpenStart Function null 打开 materialbox 前调用的回调函数。

<块引用>

onCloseEnd Function null materialbox关闭后调用的回调函数。

在下面的这个例子中，我们假设有一个包含名为 thumb_whatever.jpg 的缩略图的普通材料盒照片库，例如。但我们也在同一目录中提供名为 whatever.jpg 的原始尺寸照片。

然后我们正在更改 src 属性，动态删除 thumb_ 前缀以获得原始图像，在这种情况下，该图像将被 materialize 立即进行灯箱处理。

并且在关闭灯箱后，src 属性被重新设置，没有 thumb_ 前缀。

我们在初始化 Materialbox 时这样做：

// Initializing Materialbox
const mb = document.querySelectorAll('.materialboxed')
M.Materialbox.init(mb, {
  onOpenStart: (el) => {
    var src = el.getAttribute('src') // get the src
    var path = src.substring(0,src.lastIndexOf('/')) // get the path from the src
    var fileName = src.substring(src.lastIndexOf('/')).replace('thumb_','') // get the filename and removes 'thumb_' prefix
    var newSrc = path+fileName // re-assemble without the 'thumb_' prefix

    el.setAttribute('src', newSrc)
  },
  onCloseEnd: (el) => {
    var src = el.getAttribute('src') // get the src
    var path = src.substring(0,src.lastIndexOf('/')) // get the path from the src
    var fileName = src.substring(src.lastIndexOf('/')).replace('/', '/thumb_') // get the filename and adds 'thumb_' prefix
    var newSrc = path+fileName // re-assemble with the 'thumb_' prefix
    
    el.setAttribute('src', newSrc)
  }
})

这个解决方案对我来说也是一种魅力，跨平台。

灯箱onclick更改src，然后更改回

2 个答案: