Javascript Fancybox标题位置_Javascript_Fancybox 3

Javascript Fancybox标题位置

javascript

Javascript Fancybox标题位置,javascript,fancybox-3,Javascript,Fancybox 3,我在理解Fancybox时遇到了一些严重的问题。我想我的第一个问题是，我正在使用Fancybox 3，并假设它具有以前版本的所有功能我试图实现的是简单地将标题位置更改为“内部”，而不是默认位置。我尝试了这么多不同的JS选项来获得标题位置：“inside”，但它完全没有改变任何东西 <!DOCTYPE HTML> <head> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet"

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

我试图实现的是简单地将标题位置更改为“内部”，而不是默认位置。我尝试了这么多不同的JS选项来获得标题位置：“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>

我正在使用默认设置，这可能会对您有所帮助

这也许能帮助你

我的解决方案：

CSS:

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

我的解决方案：

CSS:

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

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

说明：复制标题并将其放入.fancybox内容元素中。和原始设置显示：无。使用transform:translateY100%定位图片的标题底部。初始化幻灯片时，fancybox框将获取隐藏标题的高度，并将填充底部设置为.fancybox幻灯片元素。因此，标题不会与图像重叠或超出窗口边框

JS jquery： CSS: 当然，为时已晚，但也许可以帮助别人

JS jquery： CSS:

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

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

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

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

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