Chocolat is an innovative solution designed to enhance the user experience when displaying images on webpages. This project offers a responsive lightbox feature, ensuring that images adapt seamlessly to various screen sizes and devices.
Developed with simplicity and functionality in mind, Chocolat provides developers with an easy-to-use tool to create visually appealing image galleries and showcases. By integrating Chocolat into their projects, developers can deliver a smooth and intuitive image viewing experience for website visitors.
With comprehensive documentation readily available, getting started with Chocolat is straightforward. Whether you’re a seasoned developer looking to upgrade your image display capabilities or a newcomer seeking an elegant solution, Chocolat offers the features and support necessary to elevate your web design projects.
Documentation
You can access the full documentation here
Upgrading
A few breaking changes have been made between v0.4 and v1: Upgrading
Contributing
If you have trouble using Chocolat or want to report a bug, please open an issue here
- .gitignore
- .prettierrc.js
- .travis.yml
- LICENSE
- babel.config.js
- demo
- dist
- package-lock.json
- package.json
- readme.md
- rollup.config.js
- src
- test
Changelog
- Version: v1.1.2
Release Date: 2023-12-18T11:27:54Z
Changes:Custom image source attribute : https://github.com/nicolas-t/Chocolat/pull/140 (thanks to @OleVik)
- Version: v1.1.0
Release Date: 2022-07-11T19:35:45Z
Changes:SVG Icons : #137 (thanks to @thomasfranz94)
Drop support for IE, use `v1.0.5-beta.2` if you need IE support - Version: 1.0.4
Release Date: 2021-02-26T21:21:59Z
Changes:Fix #125
- Version: 1.0.3
Release Date: 2020-07-18T08:53:58Z
Changes:Fix #118
- Version: 1.0.2
Release Date: 2020-06-12T08:17:51Z
Changes:`afterClose` hook : #116 (thanks to @sylvainjule)
Documented here : https://chocolat.gitbook.io/chocolat/options#afterclose - Version: 1.0.1
Release Date: 2020-04-29T08:43:44Z
Changes:Fix `linkimages: false` and keyboard navigation: https://github.com/nicolas-t/Chocolat/issues/115
- Version: 1.0.0
Release Date: 2020-04-08T09:44:52Z
Changes:Yay !!
First major release.Upgrade guide here :
https://chocolat.gitbook.io/chocolat/upgrading-from-v0.4Documentation here :
https://chocolat.gitbook.io/chocolat - Version: 1.0.0-beta.4
Release Date: 2020-01-22T15:58:50Z
Changes:Added support for srcset and sizes attributes: https://github.com/nicolas-t/Chocolat/pull/111 (thanks to @dscafati )
Upgrade guide here :
https://chocolat.gitbook.io/chocolat/upgrading-from-v0.4Documentation here :
https://chocolat.gitbook.io/chocolat - Version: 1.0.0-beta.3
Release Date: 2019-11-14T16:43:55Z
Changes:Upgrade guide here :
https://chocolat.gitbook.io/chocolat/upgrading-from-v0.4Documentation here :
https://chocolat.gitbook.io/chocolat - Version: 1.0.0-beta.1
Release Date: 2019-11-10T20:41:50Z
Changes:We are getting closer to the jquery-free release.
Documentation here :
https://chocolat.gitbook.io/chocolatUpgrade guide here :
https://chocolat.gitbook.io/chocolat/upgrading-from-v0.4 - Version: 1.0.0-beta.0
Release Date: 2019-01-16T08:50:41Z
Changes:Pre-release of Chocolat v1.0.0-beta.0
## What's new
#### Dependencies
Chocolat is not relying on jQuery anymore#### Build
Modern build generating :
- iife module is meant to be imported via script tags.
```html
<script src="dist/js/chocolat.iife.js"></script>
```
- esm module is meant to be imported via import thank to bundlers like webpack.
```js
import Chocolat from 'chocolat'
```css import stays the same.
## Breaking changes
#### Instanciation
```javascript// old
$('#example1').Chocolat({});// new
Chocolat(document.querySelectorAll('#example1 .chocolat-image'), {});
```
`imageSelector` option has now been removed#### Options
`imageSelector` has been removed
`separator2` has been removed
`setTitle` is a function returning a string (the title of the set)
`pagination` is a function returning a string (the pagination)
`description` is a function returning a string (the description) - Version: 0.4.21
Release Date: 2018-11-21T19:33:39Z
Changes:Can be imported as a module :
```js
import $ from 'jquery'
import Chocolat from 'chocolat'$.fn.Chocolat = Chocolat
```Also removed coffeescript, and added prettier.
- Version: 0.4.20
Release Date: 2018-07-25T09:10:19Z
Changes:use jquery 3
- Version: 0.4.19
Release Date: 2017-09-27T08:25:04Z
Changes:Fix #70 & fix #73 (small js error)
Fix #72 (Closing fullscreen on IE11 thanks @SilatPerisaiDiri ) - Version: 0.4.18
Release Date: 2017-03-28T11:24:45Z
Changes:**Transition when opening for the first time:**
Fix for issue #59 (Thanks to @willpaige) - Version: 0.4.17
Release Date: 2017-03-22T23:34:47Z
Changes:**One wrapper per instance :**
Fix for issue #58 (Thanks to @willpaige) - Version: 0.4.16
Release Date: 2017-02-21T09:47:37Z
Changes:**Updated jquery dependency :**
Use latest version of jquery 1 : see https://github.com/nicolas-t/Chocolat/issues/57 - Version: 0.4.15
Release Date: 2016-12-22T17:26:47Z
Changes:**New hooks :**
Added a new hooks :
- `afterInitialize` called after chocolat is initialized
- `afterImageLoad` called each time an image is loaded (see https://github.com/nicolas-t/Chocolat/issues/47)``` javascript
$('#example').Chocolat({
afterInitialize : function () {
// your code here
},
afterImageLoad : function () {
// your code here
}
});
```**Fixed missing `var` declarations :**
Missing `var` declarations made minifying and concatenating failing on some setups.
Thanks to @nicolasbinet (see https://github.com/nicolas-t/Chocolat/pull/52)
Related issue : https://github.com/nicolas-t/Chocolat/issues/49 - Version: 0.4.14
Release Date: 2016-06-14T18:33:40Z
Changes:**afterMarkup:**
Added a new setting `afterMarkup` used to manipulate the layout just after it's created.
This will move the caption to the top of the image for example``` javascript
$('#example').Chocolat({
afterMarkup: function () {
this.elems.description.appendTo(this.elems.top)
}
});
```**imageSource:**
Added the setting `imageSource`. It specifies which attribute contains the image source.
So you can use chocolat on other tags like a `div` tag (doesn't support the `href` attribute) too.
Thanks to @Airfighter76 see https://github.com/nicolas-t/Chocolat/pull/41 - Version: 0.4.13
Release Date: 2016-04-06T19:45:30Z
Changes:Can now disable zoom thanks to @benbyford (see https://github.com/nicolas-t/Chocolat/pull/31)
Removed unused css thanks to @ptrckvzn (see https://github.com/nicolas-t/Chocolat/pull/33) - Version: 0.4.12
Release Date: 2016-03-15T20:54:52Z
Changes:Chocolat as a node package, `npm install chocolat` :peach:
- Version: 0.4.11
Release Date: 2016-03-04T19:27:44Z
Changes:Fix fullscreen https://github.com/nicolas-t/Chocolat/issues/29
- Version: 0.4.10
Release Date: 2015-09-15T18:50:19Z
Changes:Few bugfixes, and added destroy method to API
- Version: 0.4.9
Release Date: 2015-07-20T21:53:07Z
Changes:property name : imagesSize instead of fullWindow
jsHint - Version: 0.4.8
Release Date: 2015-07-19T11:56:14Z
Changes:new folder structure src/dist/test
minified js
improved demo - Version: 0.4.7
Release Date: 2015-07-15T21:15:48Z
Changes:minor updates, gulp-bump
- Version: 0.4.6
Release Date: 2015-07-12T20:59:04Z
Changes:New skin, improved demo.
- Version: 0.4.5
Release Date: 2015-07-05T00:04:08Z
Changes:Travis CI
Unit testing
Zoombale/Zoomed - Version: 0.4.4
Release Date: 2014-04-16T22:13:21Z
Changes:improved package
added demo - Version: 0.4.3
Release Date: 2014-04-16T18:31:27Z
Changes:New version started from scratch.
Globally improved code.
Added API.
Added Fullscreen.
Added Fullwindow.
Responsive mode.
...
Leave a Reply