[英]Magento2 gallery afterLoad callback
I need to move the product gallery navigation thumbnails on horizontal position if the screen is less than 768px wide. 如果屏幕宽度小于768px,我需要将产品图库导航缩略图移动到水平位置。
For this I need to hook up on a callback that is triggered after the gallery is completely loaded. 为此,我需要连接一个在完全加载库后触发的回调。
How to do this when the gallery widget is initialized via the x-magento-init
method: 如何通过
x-magento-init
方法初始化gallery小部件时执行此操作:
<script type="text/x-magento-init">
{
"[data-gallery-role=gallery-placeholder]": {
"mage/gallery/gallery": {
...
}
}
}
</script>
I tried adding: 我尝试添加:
<script type="text/javascript">
require(['jquery', 'mage/gallery/gallery'], function($, gallery){
console.log($('[data-gallery-role=gallery-placeholder]').data('gallery'));
});
</script>
And it outputs undefined
. 它输出
undefined
。 But when I call the same thing from the console (after the gallery was loaded) it contains the gallery object where I can call the fotorama API methods. 但是当我从控制台调用相同的东西时(在加载库之后)它包含了我可以调用fotorama API方法的库对象。
So how can I get the .data('gallery')
object after the gallery is initialized ? 那么如何在图库初始化后获取
.data('gallery')
对象?
Many thanks! 非常感谢!
I found the solution by using the gallery:loaded
event that is triggered after the fotorama api object is added. 我通过使用在添加fotorama api对象后触发的
gallery:loaded
事件找到了解决方案。
<script type="text/javascript">
require(['jquery', 'mage/gallery/gallery'], function($, gallery){
$('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
if($(window).width() < 768){
$(this).on('fotorama:ready', function(){
var api = $(this).data('gallery');
if(api.fotorama.options.navdir == 'vertical'){
api.fotorama.options.navdir = 'horizontal';
api.fotorama.resize();
}
});
}
});
});
</script>
Updating options with api.updateOptions()
on gallery:loaded
event does nothing because the options are reset after that step. 使用
api.updateOptions()
上的api.updateOptions()
更新选项gallery:loaded
事件不执行任何操作,因为在该步骤之后重置了选项。 So I had to hook to fotorama:ready
event. 所以我不得不挂钩到
fotorama:ready
事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.