Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to force a recalculation of caption size and positioning? #2

Open
acwolff opened this issue Aug 25, 2021 · 2 comments
Open

How to force a recalculation of caption size and positioning? #2

acwolff opened this issue Aug 25, 2021 · 2 comments

Comments

@acwolff
Copy link

acwolff commented Aug 25, 2021

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.

@dimsemenov
Copy link
Owner

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.

@acwolff
Copy link
Author

acwolff commented Aug 27, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants