A Responsive Lightbox Solution – Chocolat

A Responsive Lightbox Solution - Chocolat
Project: Chocolat
Author: nicolas-t
Fork: Fork on GitHub
License: MIT

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 is available hereThe demo page can be found here

Image of Chocolat

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.4

    Documentation 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.4

    Documentation 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.4

    Documentation 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/chocolat

    Upgrade 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

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Scroll to Top