nicolas-t/Chocolat

One image on a page but several in gallery ...

joopvos opened this issue · 9 comments

joopvos commented

Is that possible?

If the answer is "yes" then the next question is "how?". I'm no dev ... :|

nicolas-t commented

yes it's possible.
I'll show you code examples in a few hours when I have more time.

  • 👍1
nicolas-t commented

First download the last version here :
https://github.com/nicolas-t/Chocolat/releases

Then you could try something along those lines (not tested)

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="path/to/dist/css/chocolat.css" />
        <!-- ... -->
    </head>
    <body>
        <!-- Click this image to open the viewer -->
        <img src="img/my-single-image-on-page.jpg" id="open-chocolat-link"> 

        <!-- Import chocolat.js -->
        <script src="path/to/dist/js/chocolat.js"></script>

        <script type="text/javascript"> 
            // List the images you want to display in the gallery
            const images = [
                { src: 'img/my-other-image-1.jpg' },
                { src: 'img/my-other-image-2.jpg' },
                // ...
            ]

            const { api } = Chocolat(images, {
                // Pass eventual options here
            })

            document.querySelector('#open-chocolat-link').addEventListener('click', () => {
                api.open()
            })
        </script>       
    </body>
</html>
joopvos commented

Thanks Nicolas. The next question is how to do this directly in HTML ... to thrown in the images for the gallery I mean.

nicolas-t commented

What does your HTML look like ?

joopvos commented

This is the code for the slide at the top of > www.marijevijselaar.nl/new

I guess you'll understand most of this soup ... ;-)

<!-- Chocolat (lightbox) -->
<div class="chocolat-parent" data-chocolat-title="">
<div class="slide-container">
<txp:images id='<txp:yield name="id" />'>
<figure class="slide" role="figure" aria-label="caption">
<txp:adi_if_not_mobile><a class="chocolat-image" href='<txp:smd_thumbnail type="1600"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' title='<txp:image_info type="alt" />'></txp:adi_if_not_mobile>
<img src="<txp:smd_thumbnail type="400"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>" alt='<txp:smd_thumbnail_info item="alt" />' srcset="<txp:smd_thumbnail type="400"><txp:smd_thumbnail_info item="url" /> 400w</txp:smd_thumbnail>, <txp:smd_thumbnail type="800"><txp:smd_thumbnail_info item="url" /> 800w</txp:smd_thumbnail>, <txp:smd_thumbnail type="1200"><txp:smd_thumbnail_info item="url" /> 1200w</txp:smd_thumbnail>" sizes="400px" loading="lazy" /><txp:adi_if_not_mobile></a></txp:adi_if_not_mobile>
</figure>
</txp:images>
</div>
</div>
nicolas-t commented

Hello,

I don't know this soup either, it's a server templating syntax, not html.
The idea it's to add style="display:none" on the image you want to hide from the page.
The generated html should look like this:

<!-- Chocolat (lightbox) -->
<div class="chocolat-parent" data-chocolat-title="">
	<div class="slide-container">
		<figure class="slide" role="figure" aria-label="caption">
			<a class="chocolat-image" href='http://marijevijselaar.nl/new/images/1600/1.jpg' title='Portret van Maria Vijselaar'>
				<img src="http://marijevijselaar.nl/new/images/400/1.jpg" alt='Portret van Maria Vijselaar' srcset="http://marijevijselaar.nl/new/images/400/1.jpg 400w, http://marijevijselaar.nl/new/images/800/1.jpg 800w, http://marijevijselaar.nl/new/images/1200/1.jpg 1200w" sizes="400px" loading="lazy" />
			</a>
		</figure>
		<br />
		<!-- the important part is : style="display:none"  -->
		<figure style="display:none" class="slide" role="figure" aria-label="caption">
			<a class="chocolat-image" href='http://marijevijselaar.nl/new/images/1600/3.jpg' title=''>
				<img src="http://marijevijselaar.nl/new/images/400/3.jpg" alt='' srcset="http://marijevijselaar.nl/new/images/400/3.jpg 400w, http://marijevijselaar.nl/new/images/800/3.jpg 800w, http://marijevijselaar.nl/new/images/1200/3.jpg 1200w" sizes="400px" loading="lazy" />
			</a>
		</figure>
		<br />
		<!-- the important part is : style="display:none"  -->
		<figure style="display:none" class="slide" role="figure" aria-label="caption">
			<a class="chocolat-image" href='http://marijevijselaar.nl/new/images/1600/2.jpg' title=''>
				<img src="http://marijevijselaar.nl/new/images/400/2.jpg" alt='' srcset="http://marijevijselaar.nl/new/images/400/2.jpg 400w, http://marijevijselaar.nl/new/images/800/2.jpg 800w, http://marijevijselaar.nl/new/images/1200/2.jpg 1200w" sizes="400px" loading="lazy" />
			</a>
		</figure>
	</div>
</div>

With your soup syntax it could look like this :

<!-- Chocolat (lightbox) -->
<div class="chocolat-parent" data-chocolat-title="">
	<div class="slide-container">
		<txp:images id='<txp:yield name="id" />'>
		    <txp:if_first_image>
			<figure class="slide" role="figure" aria-label="caption">
				<txp:adi_if_not_mobile>
					<a class="chocolat-image" href='<txp:smd_thumbnail type="1600"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' title='<txp:image_info type="alt" />'>
				</txp:adi_if_not_mobile>
					<img src="<txp:smd_thumbnail type="400"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>" alt='<txp:smd_thumbnail_info item="alt" />' srcset="<txp:smd_thumbnail type="400"><txp:smd_thumbnail_info item="url" /> 400w</txp:smd_thumbnail>, <txp:smd_thumbnail type="800"><txp:smd_thumbnail_info item="url" /> 800w</txp:smd_thumbnail>, <txp:smd_thumbnail type="1200"><txp:smd_thumbnail_info item="url" /> 1200w</txp:smd_thumbnail>" sizes="400px" loading="lazy" />
				<txp:adi_if_not_mobile>
					</a>
				</txp:adi_if_not_mobile>
				</figure>
		    <txp:else />
				<figure style="display:none" class="slide" role="figure" aria-label="caption">
				<txp:adi_if_not_mobile>
					<a class="chocolat-image" href='<txp:smd_thumbnail type="1600"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' title='<txp:image_info type="alt" />'>
				</txp:adi_if_not_mobile>
					<img src="<txp:smd_thumbnail type="400"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>" alt='<txp:smd_thumbnail_info item="alt" />' srcset="<txp:smd_thumbnail type="400"><txp:smd_thumbnail_info item="url" /> 400w</txp:smd_thumbnail>, <txp:smd_thumbnail type="800"><txp:smd_thumbnail_info item="url" /> 800w</txp:smd_thumbnail>, <txp:smd_thumbnail type="1200"><txp:smd_thumbnail_info item="url" /> 1200w</txp:smd_thumbnail>" sizes="400px" loading="lazy" />
				<txp:adi_if_not_mobile>
					</a>
				</txp:adi_if_not_mobile>
				</figure>
		    </txp:if_first_image>
		</txp:images>
	</div>
</div>

I don't think I can help you more with this.
You can try and ask for help here : https://github.com/textpattern/textpattern
But don't call their syntax 'soup' :D

joopvos commented
nicolas-t commented

way easier, with javascript,
In your page you have :

     $(function(){
        $('.chocolat-parent').Chocolat({
         //container: window,
         //fullScreen: false,
         //imageSize: 'contain',
         enableZoom: false,
         duration: 300,
         //linkImages: false,
         //displayAsALink: false
        });
     });

change it to :

     $(function(){
        $('.chocolat-parent').Chocolat({
         //container: window,
         //fullScreen: false,
         //imageSize: 'contain',
         enableZoom: false,
         duration: 300,
         //linkImages: false,
         //displayAsALink: false
        });
     });

    // hides second image
    $('.chocolat-parent figure:nth(1)').css({ display: 'none' })
    // hides third image
    $('.chocolat-parent figure:nth(2)').css({ display: 'none' })
joopvos commented

Nicolais,

Thanks for hinting me to this CSS solution (no JS):

figure.class { display: none;}
figure.class:first-of-type {display: block};

marijevijselaar.nl/new

:))