Hello,
first, thanks for this great plugin!

I am using npm to install Chocolat and webpack to build my assets and I get an error of missing images from the images folder when I "compile" the css. Those files seems to be missing from the images folder: left-compact.png, right-compact.png, close-compact.png. I am wondering if those lines shouldn't be removed?

https://github.com/nicolas-t/Chocolat/blob/master/src/css/chocolat.css#L161

https://github.com/nicolas-t/Chocolat/blob/master/src/css/chocolat.css#L165

https://github.com/nicolas-t/Chocolat/blob/master/src/css/chocolat.css#L174

In your example you add an explicit caption in the title attribute:

<a class="chocolat-image" href="img/a.jpg" title="image caption a">

Is it possible to display it as a caption somewhere or it is just nothing :)

Would love to have a .scss file included so I can import into my projects. Currently I copy the .css file out and change the extension to .scss. Having the .scss included in the distribution ensures that I'm using the latest version.

Thanks!

Hello

Is Video supported or only images? Looking to build a lightbox like this, for video:
https://d13yacurqjgara.cloudfront.net/users/211180/screenshots/2503142/57.gif

Thanks!

chocolat is really great! :)

but i would have two suggestions:

.chocolat-bottom should use some user customizable template. i find the behaviour of the floated elements really weird in a responsive website. of course the css can be changed but non-floated the order is wrong and this only can be fixed by changing the script.

and other lightbox scripts offer various useful callbacks. like after the lightbox got constructed, after a new image gets displayed,... and such things. that would be very useful too!

I love this plugin. The only issue I've noticed so far is that if there are a two images at different sizes next to each other, the transition between them hiccups quite a bit. It would be awesome if this could be solved. I can post a screencast if necessary. Thanks!

Hi Nicolas, it´s possible to display the "chocolat-description" in the "chocolat-top" section? Thanks.

I recently started using Chocolat and had some troubles getting started. After looking into the example file on github and the documentation, I saw that it always uses an id as selector for the gallery.

After changing from a class selector to id selector, it worked. So the example on the website is wrong or there is probably a bug which prevents from using it with a class selector e.g. for initializing multiple galleries.

Hi,

I was hoping you could help me?

I am using the API mode to call Chocolat so it is open on page load. This is working fine but the problem I am having is when you click the screen off the image then the viewer disappears, is there anyway to disable this? I notice it works like this on the website demo but I am not knowledgeable enough to understand how it does it.

Any help would be much appreciated.

When you try installing Chocolat via npm you get this error:

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/Cellar/node/5.6.0/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.6.0
npm ERR! npm  v3.6.0

npm ERR! Path must be a string. Received [ 'css/chocolat.css', 'js/jquery.chocolat.js' ]

The npm documentation for the main field says:

The main field is a module ID that is the primary entry point to your program.

The value should be changed to js/jquery.chocolat.js.

Yes ... no? Looks promising ...

Can you provide an example of how to handle the Parameters? I've tried variations of this and have failed:

$(document).ready(function(){
$('#example1').Chocolat(
duration : 1200,
imageSize : 'native'
);
});

Thank you, great plugin.

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,
});
});

Great plugin!!.
In the dist folder on chocolat-0.4.10.zip to run the index.html, pressing on the button fullscreen on any of the containers, the maximized image is not centered. As I do?
Thank you.

Hi,

I have this problem http://stackoverflow.com/questions/43068122/prevent-click-for-chocolat-js-while-dragging-using-slick-js

And I thought i'll bind the events myself,

I want to pass the images option, but I don't know how to use it
http://chocolat.insipi.de/#settings
I cant find any example here...

It's allways called
$('.element').Chocolat
Shall I use it like so?
$.Chocolat({images: []}) ??

Or could I change the event that Chocolat listens?

Thanks!

I want to control the margin around imageSize:'contain' sliders. My slider is also in a container and uses the zoom feature. I attached a screenshot and some CSS I added after a discussion on twitter.
The CSS didn't resolve the issue.

.chocolat-right { margin-left : 0px !important; } .chocolat-left { margin-right :0px !important; } .chocolat-bottom { margin-top: 0px !important; } .chocolat-top { margin-bottom: 0px !important; }

Hi,

Just been playing around with your plugin again and have noticed that; the first time you open the light box it appends chocolat-wrapper which prevents the image from fading in. If you then close the light box and click an image again it fades in as it should.

Possible solution would be to append the chocolat-wrapper on first load?

Hope this makes sense?.

Will

Please upgrade https://www.npmjs.com/package/chocolat to the latest release (currently 0.4.15).

Hello!

I'm playing with the library and trying to reproduce the same example as in homepage when we have an starting picture inside container with contain imageSize and no close button. What is the best practice to hide the chocolat-top bar with close button inside?

Great lightbox!

However: in Webkit browsers (tested in Chrome 29.0.1547.76 and Safari 6.0.5 (7536.30.1), both with MacOS X 10.7.5), the first image in a gallery doesn't show the left/right/close buttons or the description when the CSS contains * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Select the next/previous image (e.g. with an arrow key) and there they are…

I tried all sorts of CSS solutions, including

Choco_content * {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}

but can't find a solution.

How can I animate in such way that when I open an image to open like on https://unsplash.com/, from bottom to top. Can this be customize or something?

Please help guys!

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!

An afterLoad hook similar to the afterMarkup hook would be useful to trigger things after Chocolat is opened and initialized.

Images don't appear at first.
they only appear after you click, scroll, resize, or try to debug...

very weird bug, maybe linked with fadeIn/fadeOut/fadeTo, stop() & css overflow.
Maybe I will start from scratch, with a new markup, new css, and a for more better js

Hello,
How can we display a legend for each image in the field "chocolat-description" at the bottom? I can encapsulate the description in the field "longdesc" of the images for example, but I do not know how to display it then. Thank you for your help!

It would be nice if chocolat.js would support iframes to display youtube/vimeo videos.

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!

Click on an image -> Close the image -> press right or left arrow key on the keyboard.
The overlay will now open.
The script should only be catching the keyboard input while the lightbox is open.

The UI icons should support HiDPI screens.
I would recommend using SVGs in addition to the PNG icons.

Is there any chance of adding a reinitialization api call, as an alternative to destroy?

Each time the lightbox is opened a new instance is created?. Seems a little overkill?

Whenever i click the working thumbnail links, I get forwarded to the images URL instead of the lightbox picking up the call.

As in: root/index.html --> root/demo-images/5.jpg

My defaults look like this right now:

var defaults = {
        container         : '#container2',
        imageSelector     : '.chocolat-image',
        className         : '',
        imageSize         : 'contain',

And my html:

<div id="lightbox">
    <a class="chocolat-image" href="demo-images/5.jpg" title="HO">
        <img src="demo-images/5.jpg" alt="1" width="96" height="54">
    </a>
    <a class="chocolat-image" href="demo-images/6.jpg" title="HAI">
        <img src="demo-images/6.jpg" alt="1" width="96" height="54">
    </a>
    <a class="chocolat-image" href="demo-images/3.jpg" title="IO">
        <img src="demo-images/3.jpg" alt="1" width="96" height="54">
    </a>
 </div>
 <div id="container2" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>

Do you see anything out of the ordinary here?
Is the fullpage.js I'm using maybe interfering?

Using jQuery v1.8.3

I sent you a PM with a link to my online developing website in question.
Thank you for looking this over!

I loved the concept of this lightbox, but it is only in jquery. You do not have in mind to do a version for angularjs? I can help

Is there an easy way to play FLV-Videos in chocolat-Popup?

Hey Nicolas, it's me again. :)

http://afonsogonsalves.com/skannwas/
On this page, when you open the chocolat "slideshow", the thumbnails on the div below move when you scroll. Is there a way to stop this from happening, locking the scroll somehow?

Thanks!! 👍

I am loading some stuff asynchronously and arranging it with Masonry.

Here's the code I am using:

First I call and set up Chocolat like so:

// Chocolat

      var chocolatAttach = function(){
        if (Modernizr.mq('(min-width: 768px)')) {
          $(function () {
            $('.wall').Chocolat({
              imageSize: 'contain',
              imageSelector: '.brick-image-link'
            });
          });
        }
      }

      $(function() {
        $(window).resize(chocolatAttach);
        chocolatAttach();
      });

// Infinite scrolling

      $('.wall').infinitescroll({
        navSelector  : '.nav-pagination',    // selector for the paged navigation
        nextSelector : '.nav-next-page',  // selector for the NEXT link (to page 2)
        itemSelector : '.brick',     // selector for all items you'll retrieve
        loading: {
          finishedMsg: 'No more images to load.'
        }
      },
      // trigger Masonry as a callback
      function(newElements) {
        // hide new items while they are loading
        var $newElems = $(newElements).addClass("hide");
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.addClass("in");
          $('.wall').masonry('appended', $newElems, true);
        });
      });

However, the new elements never get the lightbox effect. Any help on this is appreciated. Thanks!

Hi!

I don't know if this is an issue or just an incomplete function, but when i tap the image on an android tablet, with chrome browser, it seem it gets zoomed in where i tapped the image, but after that i can't move around, i can only unzoom.

Thanks.

Howdy, thank you for the Chocolat.

How would it be best to require Chocolat to show a starting image when using a container (DIV)?
Would like to have it show the first image in the set when the document loads.

Also, how can one easily move the title banner to the top of the images instead of bottom in chocolat.css?

Merci!

Hi @nicolas-t! Great work on the polish of the plugin!

I was wondering if you plan to support the following anytime soon -

1. Non- JQuery version: I am coming from the land of React and unfortunately, React and JQuery aren't the best of friends. Any possibility of stripping out the JQuery dependency anytime?
2. Non-image elements: It seems like this pattern (container/cover/etc) would be useful for showing articles, videos etc. Is it possible today or would be easy to allow this plugin to support any HTML element as an input, not just images?

Thanks so much!

Hello.

Think more parameters could be added for use of zoom or not, nav, etc...

When you cycle through the images and get to an image without a caption, rather than clearing the .chocolate-description span, the caption from the previous image persists.

Hi,

First, awesome product!

When double clicking on the next or previous btn, a minor js error appears in the firebug console;

TypeError: this.elems is undefined
$.proxy(this.elems.loader.fadeIn(), this);

It's working fine but i'd like to know how this can be avoided.

i'm using version 0.4.4

Thank you!

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.

Would be great to have zoom levels, similar to map tiling.

Love the plug-in but could really use some of the touch event capability similar to Photoswipe. Any thoughts on integrating something like this? Has it been done with any examples? Thank you!

I have been looking for a way to change the HTML 5 Full screen icon (to minimize) when the lightbox is in full screen (after clicking the fullscreen icon). I don't see a class for that, is there a way to do that in the current version?

I fixed it quick and dirty, but I'm wondering if I missed something. :-)

        openFullScreen : function() {
            var wrapper = this.elems.wrapper[0];
            $(wrapper).addClass('chocolat-isfullscreen')

            if (wrapper.requestFullscreen) {
                this.settings.fullscreenOpen = true;
                wrapper.requestFullscreen();
            }
            else if (wrapper.mozRequestFullScreen) {
                this.settings.fullscreenOpen = true;
                wrapper.mozRequestFullScreen();
            }
            else if (wrapper.webkitRequestFullscreen) {
                this.settings.fullscreenOpen = true;
                wrapper.webkitRequestFullscreen();
            }
            else if (wrapper.msRequestFullscreen) {
                wrapper.msRequestFullscreen();
                this.settings.fullscreenOpen = true;
            }
            else {
                this.settings.fullscreenOpen = false;
            }
        },

        exitFullScreen : function() {

            var wrapper = this.elems.wrapper[0];
            $(wrapper).removeClass('chocolat-isfullscreen')

            if (document.exitFullscreen) {
                document.exitFullscreen();
                this.settings.fullscreenOpen = false;
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
                this.settings.fullscreenOpen = false;
            }
            else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
                this.settings.fullscreenOpen = false;
            }
            else {
                this.settings.fullscreenOpen = true;
            }
        },

Thanks, Timo

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.

Hello Nicolas,

There is a way to have swipe effect for smartphone and tablett ???
Thanks for thsi amazing work you made ;)

Kodjoe

Dump of the error message:

05:44 $ npm install chocolat
npm WARN deprecated [email protected]: Versions of the jquery npm package older than 1.9.0 are patched versions that don't work in web browsers. Please upgrade to >=1.11.0.

> [email protected] install /var/www/html/drawcard/wp-content/themes/sage-drawcard/node_modules/contextify
> node-gyp rebuild

gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
make: Entering directory '/var/www/html/drawcard/wp-content/themes/sage-drawcard/node_modules/contextify/build'
  CXX(target) Release/obj.target/contextify/src/contextify.o
../src/contextify.cc: In static member function ‘static v8::Local<v8::Context> ContextWrap::createV8Context(v8::Local<v8::Object>)’:
../src/contextify.cc:131:68: warning: ‘v8::Local<v8::Object> v8::Function::NewInstance() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
         Local<Object> wrapper = Nan::New(constructor)->NewInstance();
                                                                    ^
In file included from /home/chris/.node-gyp/7.5.0/include/node/v8.h:26:0,
                 from /home/chris/.node-gyp/7.5.0/include/node/node.h:42,
                 from ../src/contextify.cc:1:
/home/chris/.node-gyp/7.5.0/include/node/v8.h:3292:52: note: declared here
   V8_DEPRECATED("Use maybe version", Local<Object> NewInstance() const);
                                                    ^
/home/chris/.node-gyp/7.5.0/include/node/v8config.h:329:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^
../src/contextify.cc:150:16: error: ‘class v8::ObjectTemplate’ has no member named ‘SetAccessCheckCallbacks’
         otmpl->SetAccessCheckCallbacks(GlobalPropertyNamedAccessCheck,
                ^
../src/contextify.cc: In static member function ‘static void ContextWrap::GlobalPropertyGetter(v8::Local<v8::String>, const Nan::PropertyCallbackInfo<v8::Value>&)’:
../src/contextify.cc:182:80: warning: ‘v8::Local<v8::Value> v8::Object::GetRealNamedProperty(v8::Local<v8::String>)’ is deprecated: Use maybe version [-Wdeprecated-declarations]
         Local<Value> rv = Nan::New(ctx->sandbox)->GetRealNamedProperty(property);
                                                                                ^
In file included from /home/chris/.node-gyp/7.5.0/include/node/v8.h:26:0,
                 from /home/chris/.node-gyp/7.5.0/include/node/node.h:42,
                 from ../src/contextify.cc:1:
/home/chris/.node-gyp/7.5.0/include/node/v8.h:2949:30: note: declared here
                 Local<Value> GetRealNamedProperty(Local<String> key));
                              ^
/home/chris/.node-gyp/7.5.0/include/node/v8config.h:329:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^
../src/contextify.cc: In static member function ‘static void ContextWrap::GlobalPropertyQuery(v8::Local<v8::String>, const Nan::PropertyCallbackInfo<v8::Integer>&)’:
../src/contextify.cc:209:67: warning: ‘v8::Local<v8::Value> v8::Object::GetRealNamedProperty(v8::Local<v8::String>)’ is deprecated: Use maybe version [-Wdeprecated-declarations]
         if (!Nan::New(ctx->sandbox)->GetRealNamedProperty(property).IsEmpty() ||
                                                                   ^
In file included from /home/chris/.node-gyp/7.5.0/include/node/v8.h:26:0,
                 from /home/chris/.node-gyp/7.5.0/include/node/node.h:42,
                 from ../src/contextify.cc:1:
/home/chris/.node-gyp/7.5.0/include/node/v8.h:2949:30: note: declared here
                 Local<Value> GetRealNamedProperty(Local<String> key));
                              ^
/home/chris/.node-gyp/7.5.0/include/node/v8config.h:329:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^
../src/contextify.cc:210:71: warning: ‘v8::Local<v8::Value> v8::Object::GetRealNamedProperty(v8::Local<v8::String>)’ is deprecated: Use maybe version [-Wdeprecated-declarations]
             !Nan::New(ctx->proxyGlobal)->GetRealNamedProperty(property).IsEmpty()) {
                                                                       ^
In file included from /home/chris/.node-gyp/7.5.0/include/node/v8.h:26:0,
                 from /home/chris/.node-gyp/7.5.0/include/node/node.h:42,
                 from ../src/contextify.cc:1:
/home/chris/.node-gyp/7.5.0/include/node/v8.h:2949:30: note: declared here
                 Local<Value> GetRealNamedProperty(Local<String> key));
                              ^
/home/chris/.node-gyp/7.5.0/include/node/v8config.h:329:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^
contextify.target.mk:94: recipe for target 'Release/obj.target/contextify/src/contextify.o' failed
make: *** [Release/obj.target/contextify/src/contextify.o] Error 1
make: Leaving directory '/var/www/html/drawcard/wp-content/themes/sage-drawcard/node_modules/contextify/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/chris/.nvm/versions/node/v7.5.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:192:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Linux 4.4.0-62-generic
gyp ERR! command "/home/chris/.nvm/versions/node/v7.5.0/bin/node" "/home/chris/.nvm/versions/node/v7.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /var/www/html/drawcard/wp-content/themes/sage-drawcard/node_modules/contextify
gyp ERR! node -v v7.5.0
gyp ERR! node-gyp -v v3.5.0
gyp ERR! not ok
[email protected] /var/www/html/drawcard/wp-content/themes/sage-drawcard
└─┬ [email protected]
  └─┬ [email protected]
    ├── [email protected]
    └── [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! Linux 4.4.0-62-generic
npm ERR! argv "/home/chris/.nvm/versions/node/v7.5.0/bin/node" "/home/chris/.nvm/versions/node/v7.5.0/bin/npm" "install" "chocolat"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs contextify
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls contextify
npm ERR! There is likely additional logging output above.

Does Chocolat support srcset ?