amaze-ui - amazeui gallery预览大图交互效果(pureview)失效

问题描述

问 题

使用amazeui gallery实现图片缩略图及大图预览，
问题： 有的情况下（如：rails项目erb模板渲染），查看大图时是通过备用的a标签，而不是amazeui gallery的效果

问题重现： 项目代码

示例中下面一排图片，查看大图一直是通过a标签的方式，而不是amazeui写的purview的效果，而审查元素可以看到其html代码是生成了的；我把代码搬到CodePen上，结果是都能正常使用预览大图的交互，不知原因是什么，怎么解决？
CodePen Demo代码
CodePen Demo效果: Debug Mode

按照amazeui官网的介绍，应该是在没有Javascript的情况下，才会用a标签的方式查看大图，上面所列示例，代码是一样的，然而一个效果正常，一个则一直是通过a标签查看，不知是什么原因，怎么解决，知道的朋友麻烦告知一下！

原问题链接

解决方案

在问题重现的项目里，将amazeui.gallery代码放到最后加载，发现效果就正常了，可查看项目代码；
猜测原因：图片的数据由js或html模板(如rails erb, laravel blade)渲染的话，需要保证等到数据渲染完毕后，再运行gallery的代码，这样其事件才正常绑定；
由于gallery执行时不需要执行某一句js代码，没有办法通过调整该代码何时执行来达到目标，不知道有没有能不能将查看大图这个功能给暴露出来，需要时再执行。

这篇关于amaze-ui - amazeui gallery预览大图交互效果(pureview)失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！