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标签查看,不知是什么原因,怎么解决,知道的朋友麻烦告知一下!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在问题重现的项目里,将
amazeui.gallery
代码放到最后加载,发现效果就正常了,可查看项目代码;猜测原因:图片的数据由js或html模板(如rails erb, laravel blade)渲染的话,需要保证等到数据渲染完毕后,再运行gallery的代码,这样其事件才正常绑定;
由于gallery执行时不需要执行某一句js代码,没有办法通过调整该代码何时执行来达到目标,不知道有没有能不能将查看大图这个功能给暴露出来,需要时再执行。