This is not Lightbox with Photoswipe. It looks like the sites uses WP Featherlight.
Photoswipe will reduce the image size if needed for longer captions as you can see on my demo site – see the last image here (“Image with a very long text as caption”):
https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/
However scrolling captions are not possible with Photoswipe itself for a couple of reasons, also see https://github.com/dimsemenov/PhotoSwipe/issues/657 about this.
If you want to have a wider caption are, you can style pswp__caption__center as described in the FAQ – see “How to style the caption below the images”. Just add a custom CSS like this to get it 800px wide instead of 420px:
.pswp__caption__center {
max-width: 800px !important;
}
True, I changed lightbox plugins, in my search.
I will try your CSS suggestion – thanks!
That worked really well. Mobile works well too. Thank you!
Any way to raise the image rather than shrink it if there is a long caption / description?
The image will already be raised if possible. However if this is not enough there is no other way than making it smaller. Photoswipe tries to display the image as big as possible.
I think also ready found out, that with the option “Full picture size in desktop view” (in the “Desktop” tab) caption will be displayed above the full sized image with a transparent background. This will hide automatically after the idle time (which can be set as well in the same tab).
In Addition: you should also disable “Hide scrollbars when opening the lightbox” in the General options since your theme does not work well with – instead of hiding the scrollbar only the content jumps horizontally when opening the lightbox.
BTW: Donations are welcome… 😉
Thanks,
As far as I can see, the images are never higher then normally centered vertically.
On http://www.christophersproat.com/wp/installations/#&gid=1&pid=31
is there some way to prevent overlap of the text and image or adding a “more” option to the text area?
The “overlap” happens, because you have enabled “Full picture size in desktop view” in the Desktop options. In this case the images will never be moved at all but displayed in their full size and the caption will overlap with a transparent background.
If you don’t want this, disable that option.
About a “more” option for the caption: sorry, no, this is not available. The caption display was never designed with very long text in mind but only for brief captions to describe the image. However it is possible to put HTML content to the caption so you might add a link to a separate page where the description is presented separately along with a smaller version of the image.
Maybe I’ll add some functionality for this in the future, but as there are already many other features which await to be done, don’t expect anything very soon.
Long text solved by HTML links (More…) thanks!
However I noticed that in two separate Foo Galleries we have the same image, and caption and text, so when I make a link in HTML to the next page in one gallery, the other gallery has the link as well but the link takes the user to the image in the first gallery.
Is there a way to HTML code a “next” link with the same functionality as the next (or previous) arrow?
Nevermind, i just should not have hardcoded the full URL…
Thank you for the donation 🙂
Most welcome.
Any thoughts on turning the arrows and controls red?
I think I asked on a different thread, but perhaps i missed the answer.
I tried the code you supplied, and indeed it changes the background color of the lb and the background of the controls.
i also tried changing the png files…
No luck.
The arrows and controls are graphics (either SVG or PNG depending on what the browser supports). So you either have to provide your own version of these or you apply a color filter using the filter: attribute in CSS.
Maybe not exactly the kind of “red” you want, but just to get the idea:
.pswp__button {
filter: invert(10%) sepia(100%) hue-rotate(-60deg) saturate(120);
}
Play with the values to see the difference.
Oooo perfect, last thing would be to reduce the box size around each element so the glow emanates from the control, not the outer box.
http://www.christophersproat.com/wp/installations/#&gid=1&pid=30
Preferably a glowing circle, not a square…
[not a feature request]
Not sue if you noticed how the new MS edge browser detects mouse movement near controls and begins to light them up, but that is kinda cool.
-Daniel
In mobile view, touching the text makes it disapear, can we have an icon to indicate (somehow) that touching the screen area again brings back the text?
How do i change the color of the “entering full screen mode” message?
