a
free
lightbox
plugin ______

light,
responsive,
powerful.

Chocolat.js enables you to display one or several images staying on the same page.

The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.

The viewer may appears full-page or in a block.

$ yarn add chocolat
mec

Open
Source
Easy
Free

Block,
Fullscreen,
FullWindow
container : DOM element
allowFullScreen : bool
Chocolat can be opened fullwindow (as many other lightboxes) but it can also be opened in a container (a block element in the page).
With recent browser you can also navigate through the images fullscreen.
Cover,
Contain,
Native
imageSize :
'scale-down', contain', 'cover' or 'native'
You can choose either to crop the image or to make it perfectly fit its parent (be it any kind of block) but it’s still quite unclear.
Loop
loop : bool
Choose to restart at the beginning once you reached the last image.
Keyboard
Navigation
You can navigate through the images using your keyboard and assign keys.
lol
lol
lol
CONTAINER LIMITS
Between head tags
view file on github
Building a set
Create links to your full-sized images.

You can put images thumbnails within those links.

Image captions are adressed to the title atribute.
Links must have the css class chocolat-image.

Between body tags (example with thumbnails)
view file on github
Calling the script

Finally, we call the script that will enable navigation

The call is as follows:
Chocolat(document.querySelectorAll('selector'))

If you want to embrace the full power of chocolat check the documentation

Between script tags
view file on github
Page is ready !

If you do not understand the subtleties of the installation,

try using the sample page provided in the archive.