dimsemenov / photoswipe-dynamic-caption-plugin

A dynamic caption plugin for PhotoSwipe v5. Automatically positions the caption aside or below the image.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to force a recalculation of caption size and positioning?

acwolff opened this issue · comments

In this album I use the captionPlugin with option tyoe 'below' and this css:

.pswp__dynamic-caption--below {
  padding: 5px 14px;
  max-height: 40vh;
  overflow-y: auto;
  max-width: 100%;
}

If you click the 3th thumbnail, you ghet a slide with caption :
Library More info

The More info text is blue, because it is a link. If you click on this link the caption text is enlarged and not all text is readable.

If you click the link, a recalculation of the caption positioning should be done.

Is that possible?
If so how can I force a recalculation in the click code?

In this slide and in the other slides, the text is also expanded if the EXIF data are displayed, by clicking on the camera icon in the upper right corner..
In that case is also a recalculation required.

You can either do captionPlugin.updateCurrentCaptionPosition() or update size of PhotoSwipe itself pswp.updateSize(). But very long captions is not something that this plugin is designed for, so you might wanna consider just having a static sidebar.

Thanks for your reply, unfortunately

captionPlugin.updateCurrentCaptionPosition(); gives error:
Uncaught ReferenceError: captionPlugin is not defined

and

pswp.captionPlugin.updateCurrentCaptionPosition(); gives errorr:
Uncaught TypeError: Cannot read property 'updateCurrentCaptionPosition' of undefined

pswp.updateSize(true); is accepted, but I see no effect . May be that is because the caption of the 3th slide in my test album is this:

<div>Library <a href="javascript:toggleMore()"><div class="triggerMoreInfo" >More info</div></a><div id="c2" 
class="moreInfo">The architect has tried to counteract the rigorous design of the former Town Hall, which is oblique with this 
playful building. The building has two parts. The largest space of the building lies like a fish body along the Beacon. It is an 
elongated section that follows the curvature of the tail. A smaller space is like a fiery fish tail along the Touwbaan. The 
building's main façade is largely built of ultramarine blue glass just like the northern headland. The roofing is made of zinc. 
</div></div><div class="exifInfo" onClick="javascript:toggleExif()">Exp. date: 2017:08:14 13:34:57, Camera: OLYMPUS E- 
M10MarkII, Exposure: 1/320s f/5.6 ISO-200, Focal length: 14mm/28mm(35mm), Metering mode: Multi-segment, Exposure 
Program: Aperture priority, Flash: no, WB: Fine Weather, Resolution: 4608x3456, File size: 4,62  MB, Copyright ©  André Wolff, 
Author: André Wolff</div>

and the function toggleMore() shows / hide the triggerMoreInfo class:

function toggleMore() {
    if ($('.moreInfo').is(":visible")) {
        $('.moreInfo').hide();
        $('.triggerMoreInfo').text(strMoreInfo);
    } else {
        stopSlideShow();
        $('.moreInfo').show();
        $('.triggerMoreInfo').text(strLessInfo)
    }
    pswp.updateSize(true); // Accepted, but I see no effect
}

So it possible works only if you use the visible contents of the caption.