All CSS options are described in the FAQ, see “How to style the caption below the images”:
If you want to style the caption below the images, you need to create custom styles for the following CSS classes:
pswp__caption – this class is used for the whole caption area.
pswp__caption__center – this class is used for the caption itself.
pswp__caption__title and pswp__caption__desc – these classes are used, if the caption is divided into a title an description (based on the data-caption-title and data-caption-desc attributes in the image link).
pswp__description – this class is used for the description if this is displayed in addition to the regular caption.
pswp__caption__exif – this class is used for the EXIF data DIV element.
pswp__caption__exif_focal, pswp__caption__exif_fstop, pswp__caption__exif_shutter, pswp__caption__exif_iso, pswp__caption__exif_datetime – these classes are used for the individual properties in the EXIF data.
Thanks again, I shall read the FAQ again.
Oh that works!
I just set the media query at 767 with this .pswp__description{ display: none;} and so the long text is gone. All the description is hidden on phones.
But.
I still need a way to show the hidden text on a phone without the image or to be able to scroll the text. I see you have photo swipe setup so that when the user touches the title – the text goes away. Can I do the opposite? So when a user touches the title the image goes away and the description is then visible?
Could somethng like this work?
https://stackoverflow.com/questions/44688024/is-it-possible-to-modify-href-in-a-stylesheet
Or perhaps you have a better idea?
Or… Perhaps there is a way to add “more…” to any text over a specific length (in mobile view only).
just like there is an option in the foo gallery for the thumbnails. The more… would link to a page with full text.
thanks again.
Yon can create link as part of the description which is normally invisible but only displayed on mobile devices. Something like this:
<span class="desc_desktop">A long description goes hier</span><span class="desc_mobile"><a href="https://example.com/somepage">More...</a></span>
And the CSS for that:
.desc_mobile { display:none; }
@media only screen and (max-width: 767px) {
.desc_desktop { display:hidden; }
.desc_mobile { display:inline; }
}
That almost works perfectly. Except; The mobile seems to require
@media only screen and (max-width: 767px) {
.desc_desktop { display:none; }
.desc_mobile { display:inline; }
}
However as nice as this is
i cannot ask my client to enter the span code when he is editing his site, for each item. Just showing him how to add items and edit them will be a choir.
Is there a way to fix the image vertically, but make the text slide out of the way, so it is “text swipe” down to view … image swipe across to change images?
So far that is all I can do for your for free.
If you want a specific solution for your client you have to pay for the service to get this implemented.
OK thanks for all your suggestions – I created external pages with links back in. I think we are good for now.
