Allow captions of arbitrary length and content

[PeterSweetAndSour]

I thought I created an issue for this in early April but I must not have saved it. My site has a short caption under each thumbnail that essentially serves as clickbait to encourage users to view the large image with the extended caption when it opens a new fake window. I wanted to use a modern image slider but couldn't find any that supported long captions but I did like many of the features of PhotoSwipe.

I was hoping to replicate the experience on the Google Photos app on a phone where you scroll to see the caption under the photo and the caption can be of arbitrary length. I couldn't get that to work but I did the next best thing where the caption overlays the photo and you can scroll within that. Here is my test page: https://codepen.io/TMFPeterV/pen/XWmqyQX and my branch https://github.com/PeterSweetAndSour/PhotoSwipe/tree/allow_long_captions

I have tested in IE11 but don't have access to a Mac or iDevice and no longer have access to BrowserStack.

I hope to submit a pull request shortly after I figure out why Firefox is ignoring the mousewheel to expand and collapse the caption and hopefully add animation and sort out keyboard only use.

[acwolff]

See here my implementation of long captions with standard PhotoSwipe.

[PeterSweetAndSour]

@acwolff Thank you! I wish I had found that earlier. I looked for any image slider that supported long captions and came up blank which is how I came to do it myself. Oh well.

I have now fixed the keyboard control and added aria attributes; I just needed to dump the cache in Firefox for it to work. In addition to the https://codepen.io/TMFPeterV/pen/XWmqyQX test page, I made a standalone one at https://sweetandsour.org/photoswipe_demo.html and am now using it on my own web site. Here for example: http://localhost:8080/sweetandsour/photos/portland2009.

I couldn't get vertical swiping to expand and collapse the caption on mobile devices. More explanation on the opening slide of the test page but if anyone who understands what is going on in gestures.js wants to take a look I'd be grateful.

[andi34]

@PeterSweetAndSour any idea what I am overseeing?
andi34#2

[andi34]

@acwolff as soon as I click on "more info" the caption gets hidden.

[PeterSweetAndSour]

Hello @acwolff. Let me have a quick look. You've caught me at a bad time as I'll be leaving for the airport shortly and won't be back for 10 days.

[PeterSweetAndSour]

andi34#2, Sorry, I should have tagged you instead.

[andi34]

@PeterSweetAndSour don't worry, take your time :)
It'll be enough if you take a look at it once you're back and have time for it.
We can continue talking on the mentioned PR too if you like.

[PeterSweetAndSour]

@andi34 I can't replicate the behavior seen in the gif but I suspect the problem is the allowLongCaptions configuration option I created which perhaps should be renamed to allowClickBaitCaptions or allowTwoPartCaptions perhaps. If you look at my demo page sweetandsour.org/photoswipe_demo.html, I have that new option set to 'true' and so the captions displayed with the thumbnails are just a few words. If you click on the ^ button then you see that short caption plus the extended caption which can be very long as you can see on https://sweetandsour.org/photoswipe_demo.html#&gid=1&pid=1 where I discuss what I did.

I think the disappearing caption issue is related to having only the extended caption but not the click-bait caption so that nothing is displayed when it is collapsed.

(My flight is an hour later than I thought so I had a little time to look. Back on the 15th.)

Peter

[andi34]

@PeterSweetAndSour the issue in the gif is on the implementation from @acwolff, nothing to do with yours.

About your implementation I added some notes on the linked PR.

[PeterSweetAndSour]

Ok, thanks for letting me know. I apologize for not getting around to submitting a proper pull request - I knew the readme file needed to he updated and I was frustrated that I could not get the gestures to work - swipe up to expand, down to collapse. Sent from ProtonMail mobile

…

-------- Original Message --------

On Sep 5, 2020, 13:16, Andreas Blaesius wrote: ***@***.***(https://github.com/PeterSweetAndSour) the issue in the gif is on the implementation from ***@***.***(https://github.com/acwolff), nothing to do with yours. About your implementation I added some notes on the linked PR. — You are receiving this because you were mentioned. Reply to this email directly, [view it on GitHub](#1692 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/ABPUROCZYZAXCW4XLMQ3ZXDSEITYZANCNFSM4M6ZDIZA).

[acwolff]

@PeterSweetAndSour the issue in the gif is on the implementation from @acwolff, nothing to do with yours.
Please explain, because I am not aware that I am using GIFs

[acwolff]

@acwolff as soon as I click on "more info" the caption gets hidden.
Yes I see. I don’t know yet what has been changed, but it did work in the past. Over 10 days I will investigate this.

[andi34]

@acwolff it's hiding the ui controls on tap, guess you should set tapToToggleControls: false or prevent touch gestures from hiding the controls if long captions are used.

You've your addition (source) for long captions on PhotoSwipe somewhere to take a look at?

[acwolff]

@acwolff it's hiding the ui controls on tap, guess you should set tapToToggleControls: false or prevent touch gestures from hiding the controls if long captions are used.
You are correct, I did solve that problem now, see https://andrewolff.jalbum.net/ExtendedComment_PS/
You've your addition (source) for long captions on PhotoSwipe somewhere to take a look at?
You can view the code now via View source
See also at the end of https://andrewolff.jalbum.net/ExtendedComment_PS/slidePage.js