Chocolat is a responsive lightbox
What you are looking for is in the /dist/ folder.
Demo page is here
You can install chocolat as a node module
(css from node_modules has to be linked in your html file anyway)
yarn add chocolat
or
npm install chocolat
If you want to use chocolat as a module you'll have to import it like this :
import $ from 'jquery'
import Chocolat from 'chocolat'
$.fn.Chocolat = Chocolat Or the old school way by linking dist/js/jquery.chocolat.js and dist/css/chocolat.css to your html file
<div id="example1" data-chocolat-title="Set title">
<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>$(document).ready(function(){
$('#example1').Chocolat();
});| Name | Default | Description |
|---|---|---|
| container | window |
Sets whether viewer will open and fill the whole page (default), or whether it should open in a particular block of the page. For example #container2, in this case the height and width of the block must be defined.values can be : window, selector, jQuery element, or a node |
| imageSelector | '.chocolat-image' |
Selector to find images in the parent element (on which chocolat is called) |
| linkImages | true |
Sets whether we can switch from one image to another, within the same call, without closing the viewer (true) , or if the images remain independent (false). Warning: if LinkImage: is false then displayAsALink must be worth false too. Otherwise we can only view the first image in the set. |
| setTitle | '' |
Title of the set. Can also be defined from the html, with the data-chocolat-title attribute |
| className | '' |
Add a custom css class to the parent of the lightbox |
| imageSize | 'default' | Can be 'default', 'contain', 'native', or 'cover'. default : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions. 'contain' : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window. 'cover' : the image cover the window, no white space are displayed. More informations & exemple about contain/cover here. 'native' : the image is never streched nor shrinked, always displayed at native dimensions |
| fullScreen | false |
Allow fullscreen browsing (hides the browser window) |
| loop | false |
Last image + 1 leads to first image & first image - 1 leads to last image. |
| duration | 300 |
Animations duration |
| firstImage | 0 |
Index of the image that you want to start the series. |
| lastImage | 0 |
Index of the image that you want to end the series. |
| separator2 | '/' |
Text between the number of the image and the number of images in the set, does not matter. |
| images | [] |
Array of object representing the set images [{src:'img1.jpg'}, {src:'img1.jpg'}, ...] You can also specify image title [{src:'img1.jpg', title: 'title'}, ..] |
| enableZoom | true |
Disable or enable the zooming feature |
| setIndex | 0 |
Set index. yes. |
| afterInitialize | null |
Function (hook) called just after chocolat gets initialized |
| afterMarkup | null |
Function (hook) called just after markup is created. You can use it to alter the default markup: to move the caption at the top of the image for example. $('#example').Chocolat({ afterMarkup: function () { this.elems.description.appendTo(this.elems.top) }}); |
| afterImageLoad | null |
Function (hook) called just after the image is loaded. |
| zoomedPaddingX | 0 |
Function returning the horizontal padding to add around the image when it's zoomed. It takes 2 arguments canvasWidth and imgWidth $('#example').Chocolat({ zoomedPaddingX: function (canvasWidth, imgWidth) { return canvasWidth / 2 }}); |
| zoomedPaddingY | 0 |
Function returning the vertical padding to add around the image when it's zoomed. It takes 2 arguments canvasHeight and imgHeight $('#example').Chocolat({ zoomedPaddingY: function (canvasHeight, imgHeight) { return canvasHeight / 2 }}); |
Call chocolat like this :
$(document).ready(function(){
var instance = $('#example1').Chocolat().data('chocolat');
});Then API calls can be made like this (open for exemple):
instance.api().open();open : param (optionnal) : i
Open the lightbox on the image whose index is i.
By default on the first image (i=0).
Returns a $.Deferred object.
close : Close the lightbox. Returns a $.Deferred object.
prev : Change image backward. Returns a $.Deferred object.
next : Change image forward. Returns a $.Deferred object.
goto : param : i
(Alias of open) go to image whose index is i on an already opened ligthbox.
Returns a $.Deferred object.
place : Center the image in its parent. Returns a $.Deferred object.
destroy : Destroy the current instance. Remove elements, unbind events, clear data.
set : params : property, value
Classic setter
get : param : property
Classic getter
getElem : param : name
Returns a jQuery object composing the lightbox.
Ex: for the next arrow : instance.api().getElem('right')
current : Returns the index of the current image.
.chocolat-open : Set to the container when the lightbox is open.
.chocolat-in-container :
Set to the container when chocolat is open in a block (container != window)
.chocolat-cover :
Set to the container when chocolat imageSize is set to 'cover'
.chocolat-zoomable : Set to the container when chocolat is zoomable
.chocolat-zoomed : Set to the container when chocolat is zoomed
If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.
Feel free to contribute by forking then making a pull request.
Edit files in the /src/ folder, run gulp to copy/minify into the /dist/ folder and to watch for changes.
Before creating a pull request please run the test suite : yarn test or npm run test
And yarn prettier or npm run prettier to correct code style errors.
To test, run gulp test, open the file test/index.html to write new tests
The main test file is : test/src/test.chocolat.js
To run the tests in command line use : yarn test or npm run test
To run prettier use : yarn prettier or npm run prettier
An angular directive of Chocolat.js exists thanks to @beuted: https://github.com/beuted/ng-chocolat