Fancybox 字幕位置答案

【问题标题】：Fancybox caption locationFancybox 字幕位置
【发布时间】：2017-12-08 14:33:15
【问题描述】：

我在理解 Fancybox 时遇到了一些严重的问题。我想我最初的问题是我正在使用 Fancybox 3 并假设它具有以前版本的所有功能？

我想要实现的只是将标题位置更改为内部而不是默认位置。我已经尝试了很多不同的 JS 选项来获得 titleposition: 'inside' 并且它完全没有改变......

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
</body>

<footer>
<section class="socialmedia">
        <a class="sm" href="images/snapcode.png" data-fancybox data-caption="Snapchat"><img src="images/snapchat.png"></a>
</footer>
</html>

我使用默认值

【问题讨论】：

对不起，这在 v3 中没有实现。虽然您可以使用一些回调在图像区域内添加标题，但请尝试想象当用户单击图像以将其缩放到全尺寸时它的外观。这会很奇怪。
嗯，这有点令人不安，但我想这是一个非常小的细节。

标签： javascript fancybox-3

【解决方案1】：

当然，为时已晚，但也许可以帮助某人。

说明：复制标题并将其放在.fancybox-content元素中。和原来的集合display: none。使用transform: translateY(100%) 定位图片底部的标题。初始化幻灯片时，fancybox 框采用隐藏标题的高度并将 padding-bottom 设置为.fancybox-slide 元素。因此，标题不会与图像重叠或超出窗口边界。

JS（jQuery）：

$('[data-fancybox="gallery"]').fancybox({
    beforeShow: function() {
        $('.caption--image').remove();
    },
    afterShow: function() {
        var caption = $(".fancybox-caption"),
            innerCaption = caption.clone().addClass('caption--image');

        $(".fancybox-slide--current .fancybox-content").append(innerCaption);
        caption.not('.caption--image').addClass('caption--bottom');
    }
});

CSS：

.fancybox-caption.caption--image {
   width: 100%;
   bottom: 0;
   padding: 10px;
   color: #fff;
   transform: translateY(100%);
}

.fancybox-inner > .fancybox-caption {
    display: none;
}

【讨论】：

【解决方案2】：

我的解决方案：

CSS：

.fancybox-caption {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    bottom: 13px;
    text-align: right;
}

.fancybox-caption:before {
    background: 0 0;
}

.fancybox-caption:after {
    border-bottom: 0;
}

.fancybox-caption.none {
    display: none;
}

.fancybox-caption>span {
    background-color: #343434;
    color: #B6B6B6;
    display: inline-block;
    padding: 5px 15px;
}

jquery：

$('[data-fancybox="images"]').fancybox({
    idleTime: false,
    infobar: false,
    beforeShow: function() {
        $(".fancybox-caption").addClass('none');
    },
    afterShow: function() {
        $(".fancybox-caption").wrapInner("<span/>");
        var imageWidth = $(".fancybox-slide--current .fancybox-content").width();
        $(".fancybox-caption").css("width", imageWidth);
        setTimeout($(".fancybox-caption").removeClass('none'), 200);
    }
});

【讨论】：

【解决方案3】：

这也许对你有帮助。

 $('[data-fancybox]').fancybox({
        protect: true,          
        afterShow: function() {
             var imageWidth = $(".fancybox-slide--current .fancybox-image-wrap").width();
             $(".fancybox-caption").css("width", imageWidth);
        }       
 });

【讨论】：