Set caption width to be the exact same width as each rendered image?

Hi,

I’d like to be able to align the captions that display under each image to the bottom left edge of each image when you are in fullscreen photoSwipe mode. The gallery i’m working on has varying heights and widths of images. So when the caption is centered in the viewport the caption alignment can sometimes look wrong, especially for landscape images .

I thought of a workaround, which would be to update the width of the caption block each time an image changes or an arrow is clicked within photoSwipe to match the width of the image currently being shown. If this was set to the same width of the image itself the text inside the caption could be left aligned as usual and the caption block would sit flush to the left of each image.

I’m having problems getting this to work though.

I’m trying to get the width of the current image being shown by using this code:

$('.pswp__img').innerWidth();  

I’m putting this within either the listen(‘imageLoadComplete’) function or the AfterChanged function. both seem to work for some images, but not all.

I’m targeting this element to set the width inline using jQuery

 $('.pswp__caption__center').css("max-width", nextImgWidth);

Does anyone know where i’m going wrong here?

photoswipeInstance.listen('imageLoadComplete', function(index, item) {
              var currentImageWidth = $('.pswp__img').innerWidth();   // the current width of the image in the lightbox
              $('.pswp__caption__center').css("max-width", currentImageWidth);  // set the caption block to the same width as the current image being shown
           });

[dimsemenov]

Try option addCaptionHTMLFn:

addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
    if(!item.title) {
        captionEl.children[0].innerHTML = '';
        return false;
    }
    captionEl.children[0].innerHTML = item.title;
    captionEl.children[0].style.width = (item.w * item.fitRatio) + 'px';
    return true;
}

And also don’t forget to override default max-width:

.pswp__caption__center {
    max-width: 100%;
}

http://photoswipe.com/documentation/options.html

You’ll also need to set size on PhotoSwipe resize event (if you want it to change during page resize).

[Madeon08]

Hi guys, thanks a lot for the tips!

I personally just added a SetTimeout function because it was working randomly without it.

window.onresize = function(event) {
    setTimeout(function(){
        var imgwidth = $(".pswp__img:not(.pswp__img--placeholder)").width();
        $(".pswp__caption__center").css('width',imgwidth,'important');
    },25);
};