如何在移动分辨率下更改图像正下方的标题位置 - Fancybox 3

Question

默认情况下，fancybox 3 标题在 pc/tablet 设备上的图像下方，但在移动设备 (350x800) 上，标题不在图像下方，它位于页面底部。

如何在移动设备上的图片下方添加标题？

找了一个小时没找到方法

这里是刚刚打开手机的图片示例 (350x800) Fancybox 3 Image

我正在尝试使用 beforeShow 函数获取 width/height 的 fancybox-content 然后设置标题的位置但是 beforeShow 仅在您滑动 next/prev 图像时才工作，而不是在第一次打开时

        $('[data-fancybox]').fancybox({

          beforeShow: function() {
            console.log($('.fancybox-content').width());
          },

        });

日志

null

Answer 1

这是为我完成的

            afterLoad: function(instance, current) {
              var width = $('#fancybox-content').context.activeElement.clientWidth;
              var height = $(window).height();
              var calHeight = (height - width ) / 3

              if (img < 600) {
                $('.fancybox-caption.fancybox-caption--separate').css('bottom', ''+calHeight+'px');
              }
            },

如何在移动分辨率下更改图像正下方的标题位置 - Fancybox 3

How to change caption position right under image on mobile resolution - Fancybox 3

javascript

jquery

fancybox