Search…

X3 Photo Gallery Support Forums

Search…
 
AlexKalopsia
Topic Author
Posts: 13
Joined: 20 Apr 2022, 06:05

Before and after?

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


Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Before and after?

05 Feb 2023, 09:43

There is already a comparison-slider plugin:
https://demo.photo.gallery/examples/plu ... on-slider/
 
AlexKalopsia
Topic Author
Posts: 13
Joined: 20 Apr 2022, 06:05

Re: Before and after?

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?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Before and after?

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.
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Before and after?

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:
Code
<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.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography