Question

我使用的是非常酷的Fancybox 3，只有一件让我的客户感到烦恼的事情就是盒子的响应版本中没有可视指示，你可以滑动以转到下一张图片。

现在我在fancybox doc页面上看到你可以通过以下方式加载和添加内容：

afterLoad : function( instance, current ) {
    if ( instance.group.length > 1 && current.$content ) {
      current.$content.append('<div class="swipeto">Swipe to change pictures</div>');
    }

但是我不能通过javascript使用初始化的fancybox，而是直接通过html属性。如何确保在fancybox中添加内容？

Answer 1

例如，您可以编辑默认设置：

$.fancybox.defaults.afterLoad = function( instance, current ) {
    if ( instance.group.length > 1 && current.$content ) {
      current.$content.append('<div class="swipeto">Swipe to change pictures</div>');
    };
};

Answer 2

我这样解决了，我对fancybox的CSS文件进行了一些更改，以便在响应时显示控件：

@media (max-width: 800px){

.fancybox-button--left, .fancybox-button--right, .fancybox-buttons button:not(.fancybox-button--close) {
    display: inline-block!important;
}

响应数据属性初始化的fancybox，将箭头添加到fancybox

2 个答案: