Usage

Chocolat

Search…

Chocolat

1.0.2

Usage

Instanciating using HTML elements
You can directly bind Chocolat to <a> links, when clicked the lightbox will open.
1
<div>
2
    <a class="chocolat-image" href="img/a.jpg" title="image caption a">
3
        A <!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> -->
4
    </a>
5
    <a class="chocolat-image" href="img/b.jpg" title="image caption b">
6
        B <!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> -->
7
    </a>
8
</div>
Copied!
1
Chocolat(document.querySelectorAll('.chocolat-image'), {
2
    // options here
3
})
Copied!
You can also use srcset and size  attributes :
1
<div>
2
    <a class="chocolat-image" 
3
        href="demo-images/320x180.png" 
4
        title="image caption a"
5
        data-srcset="demo-images/320x180.png 320w,
6
            demo-images/1280x720.png 1280w,
7
            demo-images/1920x1080.png 1920w"
8
        data-sizes="100vw">
9
        A 
10
    </a>
11
</div>
Copied!
Instanciating using javascript objects
Sometimes you want more control over your images choosing how and when the lightbox will open.
1
const images = [
2
    { src: 'img/a.jpg', title: 'image caption a' },
3
    { src: 'img/b.jpg', title: 'image caption b' },
4
    // ...
5
]
6
​
7
const { api } = Chocolat(images, {
8
    // options here
9
})
10
​
11
// open directly...
12
api.open()
13
​
14
// ...or when a specific element is clicked.
15
document.querySelector('#open-chocolat-link').addEventListener('click', () => {
16
    api.open()
17
})
Copied!
You can also use srcset and size  attributes :
1
const images = [
2
    { 
3
        src: 'img/a/320x180.png', 
4
        title: 'image caption a', 
5
        sizes: '100vw', 
6
        srcset: 'img/a/320x180.png 320w, img/a/1280x720.png 1280w' 
7
    },
8
    { 
9
        src: 'img/b/320x180.png', 
10
        title: 'image caption b', 
11
        sizes: '100vw', 
12
        srcset: 'img/b/320x180.png 320w, img/b/1280x720.png 1280w' 
13
    },
14
    // ...
15
]
16
​
17
// ...
Copied!
You can find a more complete example in the ./demo/ folder: here​

Installation

Options

Last modified 1yr ago

Copy link

Contents

Instanciating using HTML elements

Instanciating using javascript objects