Everything is fine except when there are more images on a page ... !?

[joopvos]

I don't want to use the script as a gallery or slider but like Chocolat to open (and close) one image at a time. It does open (and close) the first image but it doesn't open the second (etc) one. I'm a noob (front-front-developer) and don't know if it a) is possible at all and 2) how to make it happen. Any help is welcome ... :)

[nicolas-t]

hello,

I don't understand what you are trying to achieve, can you be more specific please.
can you share your html and javascript ?

thanks

[joopvos]

HTML

<figure id="zoom">
<a class="chocolat-image" href='<txp:smd_thumbnail id="{img_id}" type="1560"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>'>
<img class="{width}" src='<txp:smd_thumbnail id="{img_id}" type="780"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' alt="Painting with egg tempera or acrylics on linen or paper" srcset='<txp:smd_thumbnail id="{img_id}" type="640"><txp:smd_thumbnail_info item="url" /> 640w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="780"><txp:smd_thumbnail_info item="url" /> 780w</txp:smd_thumbnail>,
<txp:smd_thumbnail id="{img_id}" type="1280"><txp:smd_thumbnail_info item="url" /> 1280w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="1560"><txp:smd_thumbnail_info item="url" /> 1560w</txp:smd_thumbnail>'
sizes="(max-width: 640px) calc(100vw - 30px), 780px" /></a>
<figcaption><txp:rah_replace from="<p>,</p>" to=","><txp:upm_textile lite="1">{caption}</txp:upm_textile></txp:rah_replace></figcaption>
</figure>

JS call with some try-out's ... :|

<!-- Chocolat > http://chocolat.insipi.de/ -->
<!-- JS -->
<script src="<txp:site_url />chocolat/dist/js/jquery.chocolat.min.js"></script>
<script>
$(document).ready(function(){
    $('#zoom').Chocolat({
       //enableZoom: false
       //imageSelector: '.chocolat-image',
       //linkImages: true
    });
});
</script>

[joopvos]

I've put everything online > https://stock.joopvos.nl/ ... script is only running on desktops and laptops.

[nicolas-t]

I get it,

you're calling chocolat on #zoom, so it only works on the first #zoom element.
like this it will work on all images (because all your images are inside the first body) :

$(document).ready(function(){
    $('body').Chocolat({
       //enableZoom: false
       //imageSelector: '.chocolat-image',
       //linkImages: true
    });
});

Of course it's better if you use a more specific selector than body, article for example.

Best,

[joopvos]

Thanks for helping me Nicolas ... and it does work ... :)

But ... is it possible to call each image individually? Instead of a gallery of all the images on the page? Something like this (but then in validated JS) >

$(document).ready(function(){
    $('.chocolat-image')({
       //enableZoom: false
       //imageSelector: '.chocolat-image',
       //linkImages: true
    });
});

[nicolas-t]

This is what linkImages is for :

$(document).ready(function(){
    $('body').Chocolat({
       linkImages: false
    });
});

[joopvos]

Ah ... sorry, I didn't read the specs thoroughly enough. Thanks for your time, Nicolas.

[nicolas-t]

you're welcome, enjoy !