CODEWITHSUNDEEP
javascriptfancybox-3
Kevin P.
Kevin P.

Reputation: 1053

Fancybox caption location

I am having some serious trouble understanding Fancybox. I suppose my initial question is that I am using Fancybox 3 and assume that it has all features of previous versions?

What I am trying to achieve is simply change the caption position to inside rather than the default. I have tried so many different JS options to get a titleposition: 'inside' and it changes absolutely nothing...

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

I am using the defaults

Upvotes: 1

Views: 5909

Answers (3)

Andrew Novikov
Andrew Novikov

Reputation: 109

Of course, it is too late but maybe help someone.

Explanation: copy the caption and put it in the .fancybox-content element. And to the original set display: none. Position the caption bottom of picture using transform: translateY(100%). When initializing the slide, the fancybox box takes the height of the hidden title and sets the padding-bottom to the .fancybox-slide element. Thus, the title will not overlap the image or go beyond window borders.

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

Upvotes: 4

Artem
Artem

Reputation: 11

My solution:

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

Upvotes: 1

Erik P_yan
Erik P_yan

Reputation: 798

This maybe can help you.

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

Upvotes: -1

Related Questions