{"id":14973441,"url":"https://github.com/beuted/ng-chocolat","last_synced_at":"2025-10-27T01:30:35.086Z","repository":{"id":57157641,"uuid":"42402439","full_name":"beuted/ng-chocolat","owner":"beuted","description":"Angular integration of the famous lightbox jQuery plugin chocolat.js","archived":false,"fork":false,"pushed_at":"2017-06-01T10:56:59.000Z","size":2984,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T01:25:00.818Z","etag":null,"topics":["angular-directives","angular1","lightbox"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beuted.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-13T16:03:02.000Z","updated_at":"2017-05-26T15:37:38.000Z","dependencies_parsed_at":"2022-08-28T06:11:21.443Z","dependency_job_id":null,"html_url":"https://github.com/beuted/ng-chocolat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beuted%2Fng-chocolat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beuted%2Fng-chocolat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beuted%2Fng-chocolat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beuted%2Fng-chocolat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beuted","download_url":"https://codeload.github.com/beuted/ng-chocolat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238418217,"owners_count":19468865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-directives","angular1","lightbox"],"created_at":"2024-09-24T13:48:43.266Z","updated_at":"2025-10-27T01:30:34.522Z","avatar_url":"https://github.com/beuted.png","language":"JavaScript","readme":"# ng-chocolat\n\n**ng-chocolat** is the angular integration in a directive of the famous lightbox jQuery plugin [chocolat.js](https://github.com/nicolas-t/Chocolat)\n\n-----------\n\n#### Dependencies\n\nTo work it expects :\n- chocolat.js (tested with 0.4.18): https://github.com/nicolas-t/Chocolat\n- jQuery (required by chocolat either 1.x or 2.x): https://github.com/jquery/jquery\n- angularjs (tested with 1.6.4): https://github.com/angular/angular\n\n#### Compatibility\nrecent browsers such as :\nIE 7+, Safari, Firefox \u0026 Chrome.\n\n## Installing\n```\n\u003e npm install ng-chocolat --save\n```\n\nor\n\n```\n\u003e bower install ng-chocolat --save\n```\n\n## Markup\n-----------\n```html\n\u003cdiv chocolat set-title=\"Set title\"\u003e\n    \u003ca class=\"chocolat-image\" href=\"img/a.jpg\" title=\"image caption a\"\u003e\n        A \u003c!-- you can display a thumbnail here : \u003cimg src=\"thumb/a.jpg\" /\u003e --\u003e\n    \u003c/a\u003e\n    \u003ca class=\"chocolat-image\" href=\"img/b.jpg\" title=\"image caption b\"\u003e\n        B \u003c!-- you can display a thumbnail here : \u003cimg src=\"thumb/b.jpg\" /\u003e --\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n\n## Documentation\n-----------\n\n### Directive parameters\n\n**config: '\u0026'**  `default : {}`\n*What the \u0026@*£$ are all these parameters doing in my scope I want the old chocolat config back!*\nYou can use the `config` parameter and bind it to a nice chocolat-looking config from your scope.\nIf you do so all the other paramters will be ignored!\n\n**container : '@'** `default:window`\nSets 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.\nvalues can be : window, selector, jQuery element, or a node\n\n**image-selector: '@'** `default : '.chocolat-image'`\nSelector to find images in the parent element (on which chocolat is called)\n\n**link-images: '@'**   `default : true `\nSets 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`).\nWarning: if `LinkImage`: is `false` then `displayAsALink` must be worth `false` too. Otherwise we can only view the first image in the set.\n\n**set-title: '@'**  `default : ''`\nTitle of the set. Can also be defined from the html, with the `data-chocolat-title` attribute\n\n**class-name: '@'**  `default : ''`\nAdd a custom css class to the parent of the lightbox\n\n**image-size: '@'**  `default : 'default'`\nCan be `'default'`, `'contain'`,  `'native'`, or `'cover'`.\n`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\n`'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\n`'cover'` :  the image cover the window, no white space are displayed.\nmore informations \u0026 exemple about contain/cover : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images\n`'native'` :  the image is never streched nor shrinked, always displayed at native dimensions\n\n**full-screen: '@'**  `default : false`\nHTML5 new feature. Hides the browser.\n\n**loop: '@'**  `default : false`\nLast image + 1 leads to first image \u0026 first image - 1 leads to last image.\n\n**duration: '@'**  `default : 300`\nAnimations duration\n\n**first-image : '@'**  `default : 0`\nIndex of the image that you want to start the series.\n\n**last-image : '@'**  `default : 0`\nIndex of the image that you want to end the series.\n\n**separator2: '@'**  `default : '/'`\nText between the number of the image and the number of images in the set, does not matter.\n\n**set-index: '@'**  `default : 0`\nSet index. yes.\n\n**images: '\u0026'**  `default : []`\nArray of object representing the set images `[{src:'img1.jpg'}, {src:'img1.jpg'}, ...]`\nYou can also specify image title `[{src:'img1.jpg', title: 'title'}, ..]`\n\n**instance: '=?'**  `default : []`\nInstance of the object returned by chocolat. You will be able to call the chocolat `api()` on it. (See next)\n\n\n### API\n\n###### Syntax\nCall chocolat like this :\n```html\n\u003cdiv chocolat container=\"#container3\" instance=\"instance\"\u003e\u003c/div\u003e\n```\n\nThen API calls can be made like this on your controller (open for exemple):\n```js\n$scope.instance.api().open();\n```\n\n###### Methods\n**open :**  `param (optionnal) : i`\nOpen the lightbox on the image whose index is `i`.\nBy default on the first image (i=0).\nReturns a $.Deferred object.\n\n**close:**\nClose the lightbox.\nReturns a $.Deferred object.\n\n**prev:**\nChange image backward.\nReturns a $.Deferred object.\n\n**next:**\nChange image forward.\nReturns a $.Deferred object.\n\n**goto:**  `param : i`\n(Alias of open)  go to image whose index is `i` on an already opened ligthbox.\nReturns a $.Deferred object.\n\n**place:**\nCenter the image in its parent.\nReturns a $.Deferred object.\n\n**set:**   `params : property, value`\nClassic setter\n\n**get:**   `param : property`\nClassic getter\n\n**getElem:**   `param : name`\nReturns a jQuery object composing the lightbox.\nEx: for the next arrow  : `instance.api().getElem('right')`\n\n**current:**\nReturns the index of the current image.\n\n### CSS Classes\n\n**.chocolat-open:**\nSet to the container when the lightbox is open.\n\n**.chocolat-mobile:**\nSet to the container when its width is inferior to `480px` (or `mobileBreakpoint`)\n\n**.chocolat-in-container:**\nSet to the container when chocolat is open in a block (`container != window`)\n\n**.chocolat-cover:**\nSet to the container when chocolat `imageSize` is set to `'cover'`\n\n**.chocolat-zoomable:**\nSet to the container when chocolat is zoomable\n\n**.chocolat-zoomed:**\nSet to the container when chocolat is zoomed\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeuted%2Fng-chocolat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeuted%2Fng-chocolat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeuted%2Fng-chocolat/lists"}