使用数据属性初始化的 fancybox 向 fancybox 添加箭头响应

Question

我使用了非常酷的 Fancybox 3，唯一让我的客户感到困扰的是，在响应版本的盒子中没有视觉指示，您可以滑动以转到下一张图片。

现在我在 fancybox 文档页面上看到您可以通过这种方式后加载和添加内容：

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 添加箭头响应

Add arrows to fancybox in responsive with data-attributed initialized fancybox

javascript

jquery

fancybox-3