Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Description issue #123

Open
AitorRodriguex opened this issue Jan 26, 2021 · 2 comments
Open

Description issue #123

AitorRodriguex opened this issue Jan 26, 2021 · 2 comments

Comments

@AitorRodriguex
Copy link

AitorRodriguex commented Jan 26, 2021

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.

@nicolas-t
Copy link
Owner

nicolas-t commented Jan 30, 2021

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()
})

@AitorRodriguex
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants