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.
<
div
>
<
a
class
=
"
chocolat-image
"
href
=
"
img/a.jpg
"
title
=
"
image caption a
"
>
A
<!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> -->
</
a
>
<
a
class
=
"
chocolat-image
"
href
=
"
img/b.jpg
"
title
=
"
image caption b
"
>
B
<!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> -->
</
a
>
</
div
>
Chocolat
(
document
.
querySelectorAll
(
'.chocolat-image'
),
{
// options here
})
You can also use
srcset
and
size
attributes :
<
div
>
<
a
class
=
"
chocolat-image
"
href
=
"
demo-images/320x180.png
"
title
=
"
image caption a
"
data-srcset
=
"
demo-images/320x180.png 320w,
demo-images/1280x720.png 1280w,
demo-images/1920x1080.png 1920w
"
data-sizes
=
"
100vw
"
>
A
</
a
>
</
div
>
Instanciating using javascript objects
Sometimes you want more control over your images choosing how and when the lightbox will open.
const
images
=
[
{
src
:
'img/a.jpg'
,
title
:
'image caption a'
},
{
src
:
'img/b.jpg'
,
title
:
'image caption b'
},
// ...
]
const
{
api
}
=
Chocolat
(
images
,
{
// options here
})
// open directly...
api
.
open
()
// ...or when a specific element is clicked.
document
.
querySelector
(
'#open-chocolat-link'
).
addEventListener
(
'click'
,
()
=>
{
api
.
open
()
})
You can also use
srcset
and
size
attributes :
const
images
=
[
{
src
:
'img/a/320x180.png'
,
title
:
'image caption a'
,
sizes
:
'100vw'
,
srcset
:
'img/a/320x180.png 320w, img/a/1280x720.png 1280w'
},
{
src
:
'img/b/320x180.png'
,
title
:
'image caption b'
,
sizes
:
'100vw'
,
srcset
:
'img/b/320x180.png 320w, img/b/1280x720.png 1280w'
},
// ...
]
// ...
You can find a more complete example in the
./demo/
folder:
here
Previous
Installation
Next
Options
Last modified
2yr ago
Copy link
Outline
Instanciating using HTML elements
Instanciating using javascript objects