Chocolat

Chocolat copied to clipboard

Hello, first of all, thank you for all this work. Chocolat is fantastic.

I have one doubt.

I am using the chocolat.js for an image gallery. I use it inside a div with the option: container: document.querySelector

I would like the description of the image to be extracted from the accompanying text instead of the 'title' attribute.

Ex:

<div class = "image">

<a class="chocolat-image" href="https://images.pexels.com/photos/4558481/pexels-photo-4558481.jpeg" title="Lore ipsum.">
<img src = "https://images.pexels.com/photos/4558481/pexels-photo-4558481.jpeg" />
</a>

<span class = "caption">
In non ultricies magna, nec vulputate pain. Aenean sollicitudin ex id lectus fermentum, a tempus lacus cursus.
<span>

</div>

Many thanks.

Hello,

Why don't you duplicate/move the caption into the title attribute ? The other way is to pass an array as the first attribute of chocolat : https://chocolat.gitbook.io/chocolat/usage#instanciating-using-javascript-objects

In your case :

const images = [
    { 
        src: 'https://images.pexels.com/photos/4558481/pexels-photo-4558481.jpeg', 
        title: 'In non ultricies magna, nec vulputate pain. Aenean sollicitudin ex id lectus fermentum, a tempus lacus cursus.' 
    },
    // ...
]

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

document.querySelector('#chocolat-image').addEventListener('click', () => {
    api.open()
})

In the mobile version I disable chocolat and I want a 'span' or 'paragraph' to be seen as the caption. That is the reason. For SEO reasons I need it to be like this. So I need the text to be extracted instead of the 'title' attribute of the 'span' text. Is this possible?

Thank you very much.