01.
either for noobs
or veterans
Chocolat comes with an API and multiples CSS classes which make it very handy to use for advanced users, and very easy to use for noobs.
download
chocolat.js
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
Open
Source
Easy
Free
either for noobs
02.
crossbrowser
Chocolat works well with all major browser. It has been tested on : IE9+, firefox, chrome, opera, safari.
03.
light
Chocolat.js is only 23 kb and reaches 10 kb once minified.
04.
responsive
Chocolat works on desktop, tablet & mobile, you can also define your own breakpoints.
Block,
Fullscreen,
FullWindow
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.
With recent browser you can also navigate through the images fullscreen.
Cover,
Contain,
Native
Contain,
Native
imageSize :
'scale-down', contain', 'cover' or 'native'
'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
Navigation
You can navigate through the images using your keyboard and assign keys.
lol
lol
lol
CONTAINER LIMITS
2 files
needed
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.
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
Page is ready !
If you do not understand the subtleties of the installation,
try using the sample page provided in the archive.