如何在手机分辨率下改变图片下的标题位置 - Fancybox 3

Question

默认情况下，Fancybox 3的标题是在平板电脑上的图片下方，但是在手机上（350x800）标题并不在图片下方，而是在页面的底部。

我怎么能让标题在移动设备上的图片下呢？

在找了一个小时后，我没有找到做它的方法。

下面以图片为例，只需打开手机（350x800）即可。Fancybox 3 图片

我试着用beforeShow函数来获取fancybox-content的宽度和高度，然后设置标题的位置，但是beforeShow只在你滑动下一张上一张图片的时候工作，而不是在第一次打开的时候。

        $('[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');
              }
            },