Расположение подписи Fancybox

Question

Расположение подписи Fancybox

1

У меня возникли серьезные проблемы с пониманием Fancybox. Я предполагаю, что мой первоначальный вопрос заключается в том, что я использую Fancybox 3 и предполагаю, что он имеет все функции предыдущих версий?

То, что я пытаюсь достичь, - это просто изменить положение заголовка на внутреннее, а не по умолчанию. Я пробовал так много разных вариантов JS, чтобы получить название: "внутри", и он абсолютно ничего не меняет...

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

Я использую настройки по умолчанию

Kevin P. 08 дек. 2017, в 15:37

Источник

0

Извините, это не реализовано в v3. Хотя вы можете использовать обратный вызов, чтобы добавить заголовок внутри области изображения, попробуйте представить, как оно будет выглядеть, когда пользователь нажимает на изображение, чтобы увеличить его до полного размера. Это было бы странно.
Janis 08 дек. 2017, в 15:00
0

Ну, это немного расстраивает, но я полагаю, это очень незначительная деталь.
Kevin P. 08 дек. 2017, в 15:23

Теги:

javascript

fancybox-3

2 ответа

Ещё вопросы

Извините, это не реализовано в v3. Хотя вы можете использовать обратный вызов, чтобы добавить заголовок внутри области изображения, попробуйте представить, как оно будет выглядеть, когда пользователь нажимает на изображение, чтобы увеличить его до полного размера. Это было бы странно.
Ну, это немного расстраивает, но я полагаю, это очень незначительная деталь.

Artem · Answer 1 · 2018-08-26T13-13-00.000Z

Мое решение:

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

Erik P. · Answer 2 · 2018-02-05T12-50-00.000Z

Возможно, это может вам помочь.

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