Page (image) transition animation ...

[joopvos]

It would be nice if there was (also) a fading animation between page transitions ... if there is a gallery ... :)

[whatsnewsisyphus]

+1 Let me know if you need somebody to test it. Thinking of using chocolat on a major page instead of separate lightbox and sliders

[nicolas-t]

Hello,

You can try the beta version of V1 :
https://github.com/nicolas-t/Chocolat/releases/tag/v1.0.0-beta.0
(I can publish it to npm if you use a packet manager)

With this new version transitions are handled in css.

Thanks

[whatsnewsisyphus]

Thank you Nicolas! Quick question, is there anyway to use Chocolat as a lightbox on a grid of thumbnails so that the slider is not instantiated within the normal dom, rather only in a modal/popup?

[nicolas-t]

Yep,

If I understand correctly, you juste need to call Chocolat once your modal is open.
Something like this :

<!-- Modal code -->
<div id="my-modal ">
            <a class="chocolat-image" href="1.jpg">
                <img src="thumb1.jpg">
            </a>
            <a class="chocolat-image" href="2.jpg">
                <img src="thumb2.jpg">
            </a>
            <a class="chocolat-image" href="3.jpg">
                <img src="thumb3.jpg">
            </a>
</div>

// js code that opens the modal, and instanciate Chocolat
modal.open() //pseudo code
Chocolat(document.querySelectorAll('#my-modal .chocolat-image'))

[whatsnewsisyphus]

To clarify, I meant to ask, if you had the thumbnails visible on the page already, imagine an album page, can clicking a thumbnail directly launch chocolat in full screen mode without having the slider visible within the scrolling page? Best, d

…

On Tue, Feb 19, 2019 at 4:04 AM Nicolas Turlais ***@***.***> wrote: Yep, If I understand correctly, you juste need to call Chocolat once your modal is open. Something like this : <!-- Modal code --> <div id="my-modal "> <a class="chocolat-image" href="1.jpg"> <img src="thumb1.jpg"> </a> <a class="chocolat-image" href="2.jpg"> <img src="thumb2.jpg"> </a> <a class="chocolat-image" href="3.jpg"> <img src="thumb3.jpg"> </a> </div> // js code that opens the modal, and instaciante Chocolatmodal.open() //pseudo codeChocolat(document.querySelectorAll('#my-modal .chocolat-image')) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#81 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAbwdFAqt4ulPBtdn9jgRiFy17eI0yB6ks5vO747gaJpZM4R0nhm> .

[nicolas-t]

Yes, something like this should do the work :

<div id="thumbs">
    <a class="chocolat-image" href="demo-images/5.jpg">
        <img src="demo-images/5.jpg" style="width:75px; height:50px" alt="">
    </a>
    <a class="chocolat-image" href="demo-images/6.jpg">
        <img src="demo-images/6.jpg" style="width:75px; height:50px" alt="">
    </a>
    <a class="chocolat-image" href="demo-images/3.jpg">
        <img src="demo-images/3.jpg" style="width:75px; height:50px" alt="">
    </a>
</div>

Chocolat(document.querySelectorAll('#thumbs .chocolat-image'), {})

If you need more help, please open your own issue to avoid polluting this one.

Thanks,

[whatsnewsisyphus]

Wow, so sorry I was replying from email and totally forgot that this was under another issue. I usually am the one calling people to order on github! ducks out in shame