Photo Gallery Forums

Posted: **05 Feb 2023, 09:14**

Hi there,

thanks for X3, it's really amazing and I love it <3

I am here to ask whether it is currently possible to have some form of "before -> after" interactive slider. I assume the answer is no, and perhaps this would have to be a separate plugin, but I just thought I'd still ask.

This is very useful for stuff like showing post-production and/or restoration process

Posted: **05 Feb 2023, 09:43**

There is already a comparison-slider plugin:
https://demo.photo.gallery/examples/plu ... on-slider/

Posted: **05 Feb 2023, 12:30**

Oh nice, this is awesome, not exactly what I had in mind, but it's definitely something I can use!

What I actually was hoping for was a way to do before/after within a gallery (so you have the usual Gallery grid, you click on an image, it becomes full screen, and here you can check the before after). I assume that is not doable?

Posted: **05 Feb 2023, 21:43**

AlexKalopsia wrote:What I actually was hoping for was a way to do before/after within a gallery (so you have the usual Gallery grid, you click on an image, it becomes full screen, and here you can check the before after). I assume that is not doable?

No, because there is no logic for X3 to understand that "these two images are one" ... That would require some specific naming logic, and of course a special plugin to load images in pairs into some comparison slider.

It could currently be doable by using the popup or carousel plugins in your "content". That would require preparing the images and html yourself. It's not an automated feature from the gallery, although it could perhaps be.

Posted: **06 Feb 2023, 05:04**

AlexKalopsia wrote: What I actually was hoping for was a way to do before/after within a gallery (so you have the usual Gallery grid, you click on an image, it becomes full screen, and here you can check the before after). I assume that is not doable?

If you want to do this yourself, I can give you a starting point for the grid:

<div class="row">
    <div class="columns large-8">
        <div data-popup-container data-popup-caption="false">
            <ul class='small-block-grid-1 medium-block-grid-2 large-block-grid-3'>
                <li>
                    <a href="{{path}}Hochzeitsfotograf-Schwarzwald-001.webp" data-popup><img src="{{path}}Hochzeitsfotograf-Schwarzwald-001.webp" alt=""/></a>
                </li>
                <li>
                    <a href="{{path}}Hochzeitsfotograf-Schwarzwald-002.webp" data-popup><img src="{{path}}Hochzeitsfotograf-Schwarzwald-002.webp" alt="" /></a>
                </li>
                <li>
                    <a href="{{path}}Hochzeitsfotograf-Schwarzwald-003.webp" data-popup><img src="{{path}}Hochzeitsfotograf-Schwarzwald-003.webp" alt=""/></a>
                </li>
                <li>
                    <a href="{{path}}Hochzeitsfotograf-Schwarzwald-004.webp" data-popup><img src="{{path}}Hochzeitsfotograf-Schwarzwald-004.webp" alt=""/></a>
                </li>
                <li>
                    <a href="{{path}}Hochzeitsfotograf-Schwarzwald-005.webp" data-popup><img src="{{path}}Hochzeitsfotograf-Schwarzwald-005.webp" alt=""/></a>
                </li>
                <li>
                    <a href="{{path}}Hochzeitsfotograf-Schwarzwald-006.webp" data-popup><img src="{{path}}Hochzeitsfotograf-Schwarzwald-006.webp" alt=""/></a>
                </li>
            </ul>
        </div>
    </div>
 
</div>

See this in action: https://hochzeiten.danielbollinger.de/

I think you would only need to swap the content of the <li>-elements for the comparison slider.

Photo Gallery Forums

Before and after?

Before and after?

Re: Before and after?

Re: Before and after?

Re: Before and after?

Re: Before and after?