Fancybox caption location

Question

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

Sorry, this is not implemented in v3. While you could use some callback to add caption inside image area, try to image how it would look when user clicks on the image to scale it to full size. It would be weird. — Janis, Dec 08 '17 at 15:00
Well that's a little upsetting but I suppose it's a very minor detail. — Kevin P., Dec 08 '17 at 15:23

score 4 · Answer 1 · answered Oct 03 '19 at 15:10

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

score 1 · Answer 2 · answered Aug 26 '18 at 15:44

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

score -1 · Answer 3 · answered Feb 05 '18 at 15:24

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

Fancybox caption location

3 Answers3

JS (jquery):

CSS: