Question

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

我想要实现的只是将标题位置更改为内部而不是默认值。我已经尝试了很多不同的JS选项来获得 titleposition：＆＃39; inside＆＃39; 并且它绝对没有变化......

<!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>

我使用的是默认值

Answer 1

我的解决方案：

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);
    }
});

Answer 2

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

说明：复制标题并将其放在.fancybox-content元素中。并设置为原始集display: none。使用transform: translateY(100%)将图片的标题放在底部。初始化幻灯片时，fancybox框将使用隐藏标题的高度，并将填充底部设置为.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;
}

Answer 3

这可能对你有帮助。

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

Fancybox标题位置

3 个答案:

JS（jquery）：

CSS：