Lightbox (popup) for slideshow layout

Resolved amramorov
(@amramorov)

3 years, 1 month ago

Hello,

First of all, this is a wonderful outstanding plugin!

Now my problem, is there any way to add some lightbox (popup) to a slideshow layout?

And as a suggestion

I’m using a slideshow (with autoplay) without a strip as the site header. With the help of css styles, I brought the pictures to the same size (because the “Fixed height…” option doesn’t work for me for some reason).

.splide__slide__container img {
height: 400px;
object-fit: cover;
}

I also wrote styles to display a different number of visible images (columns) depending on the screen width. For example, the value is 3 columns (from the plugin settings) for laptops, 4 columns for Full HD and 5 columns for higher screen resolution.

I think it would be nice to implement the same through the admin panel.

Viewing 7 replies - 1 through 7 (of 7 total)

Thread Starter amramorov
(@amramorov)

3 years, 1 month ago

In general, it would be cool to implement the following logic. In a Full-Width Row (Container), display as many images as they fit with a given image size (possibly with some scaling to completely fill the Full-Width Row with an integer number of images). Then, when the screen is enlarged, scale them a little until the screen width reaches a value where one more image can be added. In this case, the sizes of all images are reset to their original value, and then everything repeats.
🙂

Plugin Author Sayontan Sinha
(@sayontan)

3 years, 1 month ago

Thank you for the feedback.

Adding a lightbox to slideshows is not planned. This comes up once in a while, and my reasoning for this is that the “main image” feature of the slideshow is meant to be a surrogate for a lightbox.

I think you might be misunderstanding the intent of the fixed height feature. That will not get you images of fixed heights. Rather, you will get a row of fixed height, and images will show up with white space above and below them. The intent of the feature is to prevent the rest of your content from moving up or down as the slide images change in size.

The dynamic layout feature that you are asking about is implemented in the justified grid layout. Specifically if you use the JavaScript layout for the justified grid, it will give you a perfect grid that will adjust images according to the size of your screen.

Plugin Author Sayontan Sinha
(@sayontan)

3 years, 1 month ago

Let me offer another piece of clarification that will help you understand why a fixed height is not what you expect: a slideshow and a carousel are two slightly different concepts. In a slideshow, you will always see a whole number of slides on a screen (i.e. all images on screen will be fully visible). But, in a carousel, will see at least one full image and maybe some partial images. So it is possible to make all images fixed height in a carousel, and not show some of them fully. But when you are trying to show all images fully, it is possible to show the current images with the same height, but not all images in the slideshow.

Photonic’s display is that of a slideshow and not a carousel, which is why the behaviour of the “fixed height” shows you a row of constant height across screens, ensuring that the rest of your content doesn’t move around.
Thread Starter amramorov
(@amramorov)

3 years, 1 month ago
Thanks a lot for the quick and detailed answer.

Regarding the slideshow lightbox, I think you are right. I don’t like this idea either, it’s just that sometimes clients want just such an implementation so that they can enlarge the image a little more in popup. But it doesn’t matter, no means no.

About the slideshow. The grid could solve the problem, but it is static, and I would like the images in the header to move.
I managed to create a test page by implementing the desired functionality using css.

https://web.web-sd.com/svadebnyj-fotograf/

In the shortcode parameters, I set the number of columns to three, and then I added styles.
```
.splide__slide__container img {
    height: 400px;
    object-fit: cover;
}
@media (min-width: 1921px) {
    ul#photonic-slideshow-google-1-list li {
         width: 20%!important; 
    }
}
@media (min-width: 1537px) and (max-width: 1920px) {
    ul#photonic-slideshow-google-1-list li {
         width: 25%!important; 
    }
}
```
That’s just scrolling is still going on three pictures at any screen resolution. It’s not really important, and in principle I’m fine with this, it’s just that you might be interested in providing such functionality out of the box? And in this case, of course, to do it by more correct methods 🙂
- This reply was modified 3 years, 1 month ago by amramorov.
Plugin Author Sayontan Sinha
(@sayontan)

3 years, 1 month ago

Splide actually accepts a parameter called “breakpoints”, which I use in a limited fashion. I believe I have it set to switch to a single photo if the width drops below 480. I may consider adding something customizable later.

NR SHAOWN
(@nrshaown)

3 years ago

@sayontan I also need the popup in the current slide image that is showing from a google photos album.

Plugin Author Sayontan Sinha
(@sayontan)

3 years ago

@nrshaown – As written above and at other places on this forum, that is not something that will ever be done, because it is considered poor aesthetics to add a lightbox to a slideshow, and it doesn’t align with the design philosophy of the plugin. It is like asking a car manufacturer to replace their car wheels with truck wheels; they will not do it.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Lightbox (popup) for slideshow layout’ is closed to new replies.