Description issue
AitorRodriguex opened this issue · 2 comments
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.