Chocolat : the lightbox so cool horses use it :horse:

First of all, thank you very much for creating and maintaining chocolat!

I had some problems importing the chocolat css file in my webpack environment. It would try follow the relative path from my entrypoint.

I had a look at the icons and decided to try and improve the project whilst possibly fixing my issue.

• swap out per css variable
• more crisp
• lower footprint

I hope this is a fitting improvement, please let me know any thoughts you have on this.

I don't want to use the script as a gallery or slider but like Chocolat to open (and close) one image at a time. It does open (and close) the first image but it doesn't open the second (etc) one. I'm a noob (front-front-developer) and don't know if it a) is possible at all and 2) how to make it happen. Any help is welcome ... :)

Hey nicolas, great plugin, thanks :)

I'm having a tiny issue: a white border, the exact dimensions of the image, shows up briefly before the image is rendered. For what it's worth, I've attached a screenshot.

Total noob here, so no idea what this is or how to tackle it... If you could show a way around it, would be awesome, cheers!

Hey,

I've been using Chocolat and enjoying it so far. Recently I encountered an issue with IE11 throwing a syntax error in the chocolat.js: Line 13, Column 35 as shown below:

I believe this is because IE11 does not support direct arrow function (as per ES6). Can you investigate this?

Cheers

Hi,

I'm in the need to dynamically create and place the container used by chocolate.

1. user clicks chocolat__image
2. container is created based on header and viewport height
3. chocolat gallery is drawn into the container

Is there some hook I can use to do something after an image has been clicked?

As alternative would it work to change the height of the fullWindow container to abstract the height of a navbar?

Is this supposed to work with jQuery 3? I get no errors and no action :) Looking at the demo, there's "slightly" more going on than just a HTML / JS lightbox, so I'm sure I've done something wrong :)

Came across your chocolat and gave it a try.

I am adding it in Drupal as a plugin and I tried to have a class per thumbnail so it would open lightbox with images (on node page) as similar to your demo. But when tried to click thumbnail, it only shows the full node page, not lightbox.

Is there something else that I might be overlooking?

Example: <a href="node/12" class="thumbnail"><img src="/path/to/image.png"/></a>

jQuery(document).ready(function($){ $('.thumbnail').Chocolat({ container: window, fullWindow: 'contain', fullScreen: false, loop: true, duration: 300, }); });

Hi, how can I use Chocolat on a div that contains dynamically created (jQuery / .html() function) images? After calling the .Chocolat() function on the div with dynamic content and clicking on a link, the page redirects to the image instead of opening it in the Chocolat lightbox. Thanks!

thank you for all this work. Chocolat is fantastic.

but something wrong on my layout

after i clicked seems like undefined class

my javascript

latest version of npm

Chocolat(document.querySelectorAll('.chocolat-image'), {
    container: document.querySelector('body'),
    fullscreen: true,
    imageSize: 'contain'
  })

Running a Mac with Codekit. With minification on and trying to zoom, getting this error:

Uncaught ReferenceError: fitting is not defined
zoomIn @ jquery.chocolat.min.js:1(anonymous function) 
@ jquery.chocolat.min.js:1dispatch 
@ jquery.js:4737m.handle 
@ jquery.js:4549

Works fine if I don't minify, but obviously need to minify.

Hi, I'm going to host this project on cdnjs. Can you update this project in npm? Because I saw the version of this project in npm is still 0.4.12

Thank you for your help.

I currently have my images in a gallery. On Safari iOS, when I tap to open an image after previously closing the image viewer, nothing happens. Below is an example.

1. I tap on an image
2. It opens
3. I close the view
4. I tap on another image
5. Nothing happens
6. I tap again
7. The viewer opens up but the image is zoomed in

It's not a very big problem but it would by nice if it didn't keep happening.

Playing with the demo, Chocolat doesn't appear to be keyboard accessible at all. Is that the case, or is there an issue with the specific demo?

Try tabbing through the demo – you can't as it just skips over to the next available link in the page.

:eyes: Some source code analysis tools can help to find opportunities for improving software components. :thought_balloon: I propose to increase the usage of compound operators accordingly.

diff --git a/dist/js/chocolat.cjs.js b/dist/js/chocolat.cjs.js
index a873b22..7958c66 100644
--- a/dist/js/chocolat.cjs.js
+++ b/dist/js/chocolat.cjs.js
@@ -23,7 +23,7 @@ function _classCallCheck(instance, Constructor) {
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
     var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.enumerable ||= false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
     Object.defineProperty(target, descriptor.key, descriptor);
diff --git a/dist/js/chocolat.esm.js b/dist/js/chocolat.esm.js
index 997b43c..653887d 100644
--- a/dist/js/chocolat.esm.js
+++ b/dist/js/chocolat.esm.js
@@ -21,7 +21,7 @@ function _classCallCheck(instance, Constructor) {
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
     var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.enumerable ||= false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
     Object.defineProperty(target, descriptor.key, descriptor);
diff --git a/dist/js/chocolat.js b/dist/js/chocolat.js
index 474490e..43847f1 100644
--- a/dist/js/chocolat.js
+++ b/dist/js/chocolat.js
@@ -759,7 +759,7 @@
 	function _defineProperties(target, props) {
 	  for (var i = 0; i < props.length; i++) {
 	    var descriptor = props[i];
-	    descriptor.enumerable = descriptor.enumerable || false;
+	    descriptor.enumerable ||= false;
 	    descriptor.configurable = true;
 	    if ("value" in descriptor) descriptor.writable = true;
 	    Object.defineProperty(target, descriptor.key, descriptor);

Hello, first of all, thank you for all this work. Chocolat is fantastic.

I have one doubt.

I am using the chocolat.js for an image gallery. I use it inside a div with the option: container: document.querySelector

I would like the description of the image to be extracted from the accompanying text instead of the 'title' attribute.

Ex:

<div class = "image">

<a class="chocolat-image" href="https://images.pexels.com/photos/4558481/pexels-photo-4558481.jpeg" title="Lore ipsum.">
<img src = "https://images.pexels.com/photos/4558481/pexels-photo-4558481.jpeg" />
</a>

<span class = "caption">
In non ultricies magna, nec vulputate pain. Aenean sollicitudin ex id lectus fermentum, a tempus lacus cursus.
<span>

</div>

Many thanks.

Found this after looking around for a while and I must say well done!! Well thought out structure with options and API and without jQuery dependency (which is really hard to find). Not too opinionated but still looks good from the get go. Keep up the good work!

👏 👏 👏 👏