Chocolat
Search…
Chocolat
1.0.2
Installation
Usage
Options
Api
CSS classes
Image sizes
Upgrading from v0.4
Contributing
Powered By
GitBook
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
Previous
Installation
Next
Options
Last modified
2yr ago
Copy link
Contents
Instanciating using HTML elements
Instanciating using javascript objects