{"_id":"jsonlylightbox","_rev":"6-c5cf35d3c00cf5ebe91f40244fb0d1da","name":"jsonlylightbox","description":"Small responsive vanilla JS lightbox for displaying images.","dist-tags":{"latest":"0.5.5"},"versions":{"0.5.3":{"name":"jsonlylightbox","version":"0.5.3","description":"Small responsive vanilla JS lightbox for displaying images.","repository":{"type":"git","url":"https://github.com/felixhagspiel/jsOnlyLightbox.git"},"keywords":["lightbox","vanilla","ie8","responsive","gallery","small","lightweight","js only","no jquery","javascript"],"author":{"name":"Felix Hagspiel"},"license":{"type":"MIT","url":"https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/License.txt"},"bugs":{"url":"https://github.com/felixhagspiel/jsOnlyLightbox/issues"},"homepage":"http://jslightbox.felixhagspiel.de/","gitHead":"6de55a553fa5d9a8823341fe7b968fe26f9e5001","_id":"jsonlylightbox@0.5.3","scripts":{},"_shasum":"b9c0c7355da5e0202f6cae356a862d90c0825a5c","_from":".","_npmVersion":"2.1.5","_nodeVersion":"0.12.7","_npmUser":{"name":"felixhagspiel","email":"info@felixhagspiel.de"},"dist":{"shasum":"b9c0c7355da5e0202f6cae356a862d90c0825a5c","tarball":"https://registry.npmjs.org/jsonlylightbox/-/jsonlylightbox-0.5.3.tgz","integrity":"sha512-Zf9eeXn6xPJqDEG/FBa+Y2iGh24VVEQTNlEaMLYb9u5JHwV9cL64Hpdgqni+xu/Vn31hGIKduZXgVYQ9kC5m5Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB96/wzE4wL1XOTsfT01jviKEa7egRO7jH9+c1ukjJM5AiEAnM+DXMCXtVXrvWD9cvrAHmA+4i5eql40IyFeCw01xCw="}]},"maintainers":[{"name":"felixhagspiel","email":"info@felixhagspiel.de"}],"directories":{}},"0.5.5":{"name":"jsonlylightbox","version":"0.5.5","description":"Small responsive vanilla JS lightbox for displaying images.","repository":{"type":"git","url":"git+https://github.com/felixhagspiel/jsOnlyLightbox.git"},"keywords":["lightbox","vanilla","ie8","responsive","gallery","small","lightweight","js only","no jquery","javascript"],"author":{"name":"Felix Hagspiel"},"license":{"type":"MIT","url":"https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/License.txt"},"bugs":{"url":"https://github.com/felixhagspiel/jsOnlyLightbox/issues"},"homepage":"http://jslightbox.felixhagspiel.de/","gitHead":"95d075a4a629dc984bfd75c1034668b681479759","_id":"jsonlylightbox@0.5.5","scripts":{},"_shasum":"30b8aecc960dc14e21cc8d7bb6efd627b3cda1b3","_from":".","_npmVersion":"3.10.9","_nodeVersion":"7.2.1","_npmUser":{"name":"felixhagspiel","email":"info@felixhagspiel.de"},"dist":{"shasum":"30b8aecc960dc14e21cc8d7bb6efd627b3cda1b3","tarball":"https://registry.npmjs.org/jsonlylightbox/-/jsonlylightbox-0.5.5.tgz","integrity":"sha512-UiCzPJrrY190OzMjOIhyNtLwsWSyLRpaSo/vK/HRA+jAfqJK4YElHXHEKkvSS7yV4H5CgjVBwT22HFBJJuWD3A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFz6YFcFuZuwh8PJWnSiFXUh8gu1ClPpNxpjtDCowGPfAiEAykQSzLC8tg21DY5P5mS7tl+L+ok7Hh3z6Tmg4RKORqo="}]},"maintainers":[{"name":"felixhagspiel","email":"info@felixhagspiel.de"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/jsonlylightbox-0.5.5.tgz_1483969576367_0.397126252297312"},"directories":{}}},"readme":"# jsOnlyLightbox 0.5.4\r\n#### Responsive Lightbox written in plain JavaScript\r\n\r\n## Features\r\n\r\n- no jQuery needed, plain JavaScript\r\n- Fully responsive\r\n- Customizable Theme, SCSS-files included\r\n- You can push images loaded via ajax to the lightbox\r\n- Small in Size (< 10Kb, < 3Kb gzipped)\r\n- CSS3-Animations & controls, however, loading GIFs and arrow images can be used\r\n- Licensed under MIT, code is free for commercial & personal use. However, it would be great if you send me an link of your websites using my lightbox so I can see it live in action and post some real-word examples here. I am also happy about backlinks & github-stars :) **The pictures included are NOT free to use!** Please [contact me first](http://felixhagspiel.de/contact) if you want to use the them!\r\n- IE8+ support:\r\n- Visit me on [felixhagspiel.de](http://felixhagspiel.de)\r\n- Developing tools like this lightbox takes a lot of time. If you like my lightbox and want to support me, buy me a beer via the [paypal-donate button](http://jslightbox.felixhagspiel.de/) on my site :) Thanks!\r\n\r\nDo not forget to add those lines inside your `` if you want to support IE8:\r\n\r\n\t\t\r\n\r\n## Install\r\n\r\nThe lightbox is still in development mode, so please post any issues and bugs on github. You can also use bower or npm to install the lightbox:\r\n\r\n\tbower install jsonlylightbox --save-dev\r\n\r\n\tnpm install jsonlylightbox --save-dev\r\n\r\n## Demo\r\n\r\nYou can watch it live at [jslightbox.felixhagspiel.de](http://jslightbox.felixhagspiel.de/) or on [felixhagspiel.de](http://felixhagspiel.de/projects)\r\n\r\n## Usage\r\n\r\nAdd the CSS-File to the head of your html-file:\r\n\r\n\t\r\n\r\nAdd this before the closing body tag:\r\n\r\n\t\r\n\t\r\n\r\nYou just need to add the attribute `data-jslghtbx` to all the images or elements you want to show in the lightbox:\r\n\r\n\t\r\n Opens lightbox with a no-js fallback link\r\n\r\nNote: The CSS-class `jslghtbx-thmb` is optional. You can use your own styling if you want.\r\n\r\nYou can pass a link of a different image via the `data-jslghtbx` attribute, which then will be loaded on click. Use this if you want to use small sized pictures for the thumbnails to reduce traffic:\r\n\r\n\t\r\n\r\nYou can also dynamically push images to groups, this is usefull if you load images via ajax. See the [`lightbox.thumbnails`](#lightboxthumbnails) attribute for an example.\r\n\r\nIf you want to group images to structure your content, use the `data-jslghtbx-group` attribute. You can have multiple groups on one page. This is also helpful when you dont want to use thumbnails, just hide the thumbnails via CSS:\r\n\r\n\t\r\n\t\r\n\t\r\n\t\r\n\r\n\r\n\t\r\n\t\r\n\t\r\n\r\nThe default control-arrows will be loaded when using groups. You can also use your own control-buttons by providing an ID via the options. For more detail look into the options section below.\r\n\r\nIf you want to use captions add the `data-jslghtbx-caption` attribute. You can also pass HTML:\r\n\r\n\tcaption.\">\r\n\r\n## CSS Animations\r\n\r\nWhen the lightbox is opened first, the image inside gets the class `jslghtbx-animate-init`. This is useful if you want to animate opacity.\r\nIf you are showing multiple images inside the box via the group-param, the classes `jslghtbx-animating-next` and `jslghtbx-animating-prev` are added and removed, each for half of the durationtime given by the option `animation` (defaults to 400 milliseconds).\r\nThe box receives the class `jslghtbx-active` when opened, and the wrapper gets `jslghtbx-wrapper-active` when all calculations are done. Feel free to edit those styles.\r\n\r\n## Options\r\n\r\n###\t`{responsive: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the image will be resized according to the viewport on resize-events.\r\n\r\n###\t`{preload: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the previous and the next image of the currently shown image will be preloaded if not already in cache.\r\n\r\n###\t`{loadingAnimation: string || number || boolean}`\r\n_Default: 200_\r\n\r\nIf set to true, an animation will be rendered until the image is loaded. Alternatively you can pass milliseconds as number, which defines the interval the `span`-elements inside the `jslghtbx-loading-animation`-container get the class `jslghtbx-active` (the default interval is 200ms). You can use this to apply your own styling via CSS. The animation is using CSS3, so it will not work in IE8/9. You can also pass a link to an GIF-image, which then replaces the animation. This is disabled for IE8 due to bugs with transparent backgrounds and performance issues. If set to false, no animation is shown.\r\n\r\nNote: The animations get an 500ms delay until they start, so they won`t pop up on fast connections. Also, you should check for CSS3-support and set the animation-option accordingly.\r\n\r\n###\t`{animElCount: number}`\r\n_Default: 4_\r\n\r\nThis sets the number of animated `span` tags which are appended to the `jslghtbx-loading-animation` container. Must be higher than 1.\r\n\r\n###\t`{carousel: bool}`\r\n_Default: true_\r\n\r\nIf set to true, you can infinitely loop through all the images by clicking the next/prev button or calling the `next()` / `prev()`-functions.\r\n\r\n###\t`{captions: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the caption text inside the `data-jslghtbx-caption` attribute will be shown. Note that the text may not be visible completely if it is very long. Feel free to style the caption class `.jslghtbx-caption` to your needs.\r\n\r\n###\t`{closeOnClick: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the lightbox will close on click anywhere inside the viewport, not just by clicking on the close-button.\r\n\r\nNote: May not work in IE8.\r\n\r\n###\t`{nextOnClick: bool}`\r\n_Default: true_\r\n\r\nIf set to true, a click on the current image shows the next image.\r\n\r\n###\t`{hideOverflow: bool}`\r\n_Default: true_\r\n\r\nHides scrollbars when lightbox is opened.\r\n\r\n###\t`{hideCloseBtn: bool}`\r\n_Default: false_\r\n\r\nHides the closebutton inside the lightbox.\r\n\r\n###\t`{dimensions: bool}`\r\n_Default: true_\r\n\r\nImages will be resized to a maximum of the original dimensions. If set to false, images are always scaled to fullscreen.\r\n\r\n###\t`{controls: bool}`\r\n_Default: true_\r\n\r\nShow or hide the default next- & prev-buttons.\r\n\r\n###\t`{keyControls: bool}`\r\n_Default: true_\r\n\r\nUse right and left keys on keyboard to navigate through gallery and escape key to close the box.\r\n\r\n###\t`{nextImg: 'path/to/image'}`\r\nHere you can pass the path to an alternative next-button image. By default the arrows are rendered via CSS. If you want to use images make sure to apply custom styling for smaller viewports via the CSS-Class `jslghtbx-next`.\r\n\r\n###\t`{prevImg: 'path/to/image'}`\r\nHere you can pass the path to an alternative prev-button image. By default the arrows are rendered via CSS. If you want to use images make sure to apply custom styling for smaller viewports via the CSS-Class `jslghtbx-prev`.\r\n\r\n###\t`{boxId: 'elementId'}`\r\nHere you can pass an ID if you want to use your own box-element. Images will be appended to that element then. The element will receive a class \"jslghtbx-active\" when opened, so style this class properly (you need at least to remove visibility by default and add it on active). If you want it to look like the default-box, just add the class \"jslghtbx\" to the box-element.\r\n\r\n###\t`{animation: number | bool}`\r\n_Default: 400_\r\n\r\nThis options defines wether the next/prev-switch should be animated. If you pass an integer-value, it defines the milliseconds for the animation. Passing `false` disables the animation. Note that all animations are done via CSS3-transitions, so if you want to alter them you have to do it via the CSS-file.\r\n\r\n###\t`{maxImgSize: float}`\r\n_Default: 0.8_\r\n\r\nThis is the modifier which is used to reduce the images size when it's full size won't fit in the viewport. Maximum value is 1 for 100%.\r\n\r\n#### Callbacks\r\n\r\n###\t`{onopen: function(image)}`\r\nFunction that is executed when the lightbox is opened. Receives the image including original width and height which is currently displayed as param.\r\n\r\n###\t`{onclose: function(image)}`\r\nFunction that is executed when the lightbox is closed. Receives the last image including original width and height which was displayed as param.\r\n\r\n###\t`{onresize: function(image)}`\r\nFunction that is executed when the lightbox is resized. Receives the image including original width and height which is currently displayed as param.\r\n\r\n###\t`{onload: function(event)}`\r\nFunction that is executed once the current image is loaded. The callback receives an event which is `\"prev\"` if the prev button was clicked, `\"next\"` if the next button was clicked or `false` for all other ways of opening the lightbox.\r\n\r\n###\t`{onloaderror: function(event)}`\r\nFunction that is executed when the current image fails to load. You can add your handlers here to display a warning or call other functions. The callback receives an full image-error-event which has a property `_happenedWhile`. That property is `\"prev\"` if the prev button was clicked, `\"next\"` if the next button was clicked or `false` for all other ways of opening the lightbox. This allows you to handle errors. For example you can just show the next or previous picture if the current one is not available:\r\n\r\n\t\tonloaderror: function(event){\r\n\t\t\tif(event._happenedWhile === 'prev')\r\n\t\t\t\tlightbox.prev()\r\n\t\t\telse\r\n\t\t\t\tlightbox.next()\r\n\t\t}\r\n\r\n## Attributes\r\n\r\n### `lightbox.thumbnails`\r\nType: `Array`\r\n\r\nArray holding all thumbnail elements. If you want to dynamically load and push pictures to an existing group be sure to set a groupname on the element via the `data-jslghtbx-group` attribute. If you want to show just one dynamic loaded picture you should use the `open()` method. Don't forget to set the `data-jslghtbx-index` attribute as unique identifier!\r\nExample:\r\n\r\n var img = new Image()\r\n img.src = 'img/lightbox/9-small.jpg'\r\n img.setAttribute('data-jslghtbx-group','mygroup1')\r\n img.setAttribute('data-jslghtbx-index', lightbox.thumbnails.length)\r\n lightbox.thumbnails.push(img)\r\n\r\n## Methods\r\n\r\n### `lightbox.load(options)`\r\n\r\nThe init-function. Here you can pass your option-object. Has to be called once on the box-object. If you dont pass options, the defaults are loaded. A full call may look like this:\r\n\r\nExample:\r\n\r\n\t/* Default options */\r\n\tvar options = {\r\n\t\tboxId: \t\t\t\t'testID',\r\n\t\tdimensions: \t\ttrue,\r\n\t\tcaptions: \t\t\ttrue,\r\n\t\tprevImg: \t\t\tfalse,\r\n\t\tnextImg: \t\t\tfalse,\r\n\t\thideCloseBtn: \t\tfalse,\r\n\t\tcloseOnClick: \t\ttrue,\r\n\t\tloadingAnimation: \t200,\r\n\t\tanimElCount: \t\t4,\r\n\t\tpreload: \t\t\ttrue,\r\n\t\tcarousel: \t\t\ttrue,\r\n\t\tanimation: \t\t\t400,\r\n\t\tnextOnClick: \t\ttrue,\r\n\t\tresponsive: \t\ttrue,\r\n\t\tmaxImgSize:\t\t\t0.8,\r\n\t\tkeyControls: \t\ttrue,\r\n\t\t// callbacks\r\n\t\tonopen: function(){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonclose: function(){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonload: function(){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonresize: function(event){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonloaderror: function(event){\r\n\t\t\t// ...\r\n\t\t}\r\n\t};\r\n\tvar lightbox = new Lightbox();\r\n\tlightbox.load(options);\r\n\r\n### `lightbox.open(src-link || image, groupName)`\r\nYou can open the box manually via JS. There are multiple ways to tell the box which image to load.\r\n\r\n1. Via link:\r\n\r\n\t\tdocument.getElementById('open-lightbox').addEventListener('click',function(){\r\n\t\t\tlightbox.open('../img/lightbox/1.jpg');\r\n\t\t});\r\n\r\n2. Via image object:\r\n\r\n\t\tvar myImg = document.getElementById('myImg');\r\n\t\tdocument.getElementById('open-lightbox').addEventListener('click',function(){\r\n\t\t\tlightbox.open(myImg);\r\n\t\t});\r\n\r\n3. Via group name, which shows the first image of the group. The first parameter must be false:\r\n\r\n\t\tdocument.getElementById('open-lightbox').addEventListener('click',function(){\r\n\t\t\tlightbox.open(false,'myGroup');\r\n\t\t});\r\n\r\n### `lightbox.next()`\r\nShows the next image of current group\r\n\r\n### `lightbox.prev()`\r\nShows the previous image of current group\r\n\r\n### `lightbox.close()`\r\nCloses the lightbox.\r\n\r\n### `lightbox.resize()`\r\nRepositions the image in the lightbox. Is called on every resize-event unless you set the `responsive`-option to false.","maintainers":[{"name":"felixhagspiel","email":"info@felixhagspiel.de"}],"time":{"modified":"2022-06-19T06:40:09.133Z","created":"2015-11-03T10:00:43.282Z","0.5.3":"2015-11-03T10:00:43.282Z","0.5.5":"2017-01-09T13:46:17.100Z"},"homepage":"http://jslightbox.felixhagspiel.de/","keywords":["lightbox","vanilla","ie8","responsive","gallery","small","lightweight","js only","no jquery","javascript"],"repository":{"type":"git","url":"git+https://github.com/felixhagspiel/jsOnlyLightbox.git"},"author":{"name":"Felix Hagspiel"},"bugs":{"url":"https://github.com/felixhagspiel/jsOnlyLightbox/issues"},"license":{"type":"MIT","url":"https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/License.txt"},"readmeFilename":"README.md","users":{}}
![\"\"](\"img/lightbox/1.jpg\")
\r\n Opens lightbox with a no-js fallback link\r\n\r\nNote: The CSS-class `jslghtbx-thmb` is optional. You can use your own styling if you want.\r\n\r\nYou can pass a link of a different image via the `data-jslghtbx` attribute, which then will be loaded on click. Use this if you want to use small sized pictures for the thumbnails to reduce traffic:\r\n\r\n\t![\"\"](\"img/lightbox/3-small.jpg\")
\r\n\t![\"\"](\"img/lightbox/4-small.jpg\")
\r\n\t![\"\"](\"img/lightbox/6-small.jpg\")
\r\n\t![\"\"](\"img/lightbox/7-small.jpg\")
\r\n\r\n\r\n\t![\"\"](\"img/lightbox/8-small.jpg\")
\r\n\t![\"\"](\"img/lightbox/9-small.jpg\")
\r\n\t![\"\"](\"img/lightbox/10-small.jpg\")
\r\n\r\nThe default control-arrows will be loaded when using groups. You can also use your own control-buttons by providing an ID via the options. For more detail look into the options section below.\r\n\r\nIf you want to use captions add the `data-jslghtbx-caption` attribute. You can also pass HTML:\r\n\r\n\t![\"\"](\"img/lightbox/2.jpg\")
caption.\">\r\n\r\n## CSS Animations\r\n\r\nWhen the lightbox is opened first, the image inside gets the class `jslghtbx-animate-init`. This is useful if you want to animate opacity.\r\nIf you are showing multiple images inside the box via the group-param, the classes `jslghtbx-animating-next` and `jslghtbx-animating-prev` are added and removed, each for half of the durationtime given by the option `animation` (defaults to 400 milliseconds).\r\nThe box receives the class `jslghtbx-active` when opened, and the wrapper gets `jslghtbx-wrapper-active` when all calculations are done. Feel free to edit those styles.\r\n\r\n## Options\r\n\r\n###\t`{responsive: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the image will be resized according to the viewport on resize-events.\r\n\r\n###\t`{preload: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the previous and the next image of the currently shown image will be preloaded if not already in cache.\r\n\r\n###\t`{loadingAnimation: string || number || boolean}`\r\n_Default: 200_\r\n\r\nIf set to true, an animation will be rendered until the image is loaded. Alternatively you can pass milliseconds as number, which defines the interval the `span`-elements inside the `jslghtbx-loading-animation`-container get the class `jslghtbx-active` (the default interval is 200ms). You can use this to apply your own styling via CSS. The animation is using CSS3, so it will not work in IE8/9. You can also pass a link to an GIF-image, which then replaces the animation. This is disabled for IE8 due to bugs with transparent backgrounds and performance issues. If set to false, no animation is shown.\r\n\r\nNote: The animations get an 500ms delay until they start, so they won`t pop up on fast connections. Also, you should check for CSS3-support and set the animation-option accordingly.\r\n\r\n###\t`{animElCount: number}`\r\n_Default: 4_\r\n\r\nThis sets the number of animated `span` tags which are appended to the `jslghtbx-loading-animation` container. Must be higher than 1.\r\n\r\n###\t`{carousel: bool}`\r\n_Default: true_\r\n\r\nIf set to true, you can infinitely loop through all the images by clicking the next/prev button or calling the `next()` / `prev()`-functions.\r\n\r\n###\t`{captions: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the caption text inside the `data-jslghtbx-caption` attribute will be shown. Note that the text may not be visible completely if it is very long. Feel free to style the caption class `.jslghtbx-caption` to your needs.\r\n\r\n###\t`{closeOnClick: bool}`\r\n_Default: true_\r\n\r\nIf set to true, the lightbox will close on click anywhere inside the viewport, not just by clicking on the close-button.\r\n\r\nNote: May not work in IE8.\r\n\r\n###\t`{nextOnClick: bool}`\r\n_Default: true_\r\n\r\nIf set to true, a click on the current image shows the next image.\r\n\r\n###\t`{hideOverflow: bool}`\r\n_Default: true_\r\n\r\nHides scrollbars when lightbox is opened.\r\n\r\n###\t`{hideCloseBtn: bool}`\r\n_Default: false_\r\n\r\nHides the closebutton inside the lightbox.\r\n\r\n###\t`{dimensions: bool}`\r\n_Default: true_\r\n\r\nImages will be resized to a maximum of the original dimensions. If set to false, images are always scaled to fullscreen.\r\n\r\n###\t`{controls: bool}`\r\n_Default: true_\r\n\r\nShow or hide the default next- & prev-buttons.\r\n\r\n###\t`{keyControls: bool}`\r\n_Default: true_\r\n\r\nUse right and left keys on keyboard to navigate through gallery and escape key to close the box.\r\n\r\n###\t`{nextImg: 'path/to/image'}`\r\nHere you can pass the path to an alternative next-button image. By default the arrows are rendered via CSS. If you want to use images make sure to apply custom styling for smaller viewports via the CSS-Class `jslghtbx-next`.\r\n\r\n###\t`{prevImg: 'path/to/image'}`\r\nHere you can pass the path to an alternative prev-button image. By default the arrows are rendered via CSS. If you want to use images make sure to apply custom styling for smaller viewports via the CSS-Class `jslghtbx-prev`.\r\n\r\n###\t`{boxId: 'elementId'}`\r\nHere you can pass an ID if you want to use your own box-element. Images will be appended to that element then. The element will receive a class \"jslghtbx-active\" when opened, so style this class properly (you need at least to remove visibility by default and add it on active). If you want it to look like the default-box, just add the class \"jslghtbx\" to the box-element.\r\n\r\n###\t`{animation: number | bool}`\r\n_Default: 400_\r\n\r\nThis options defines wether the next/prev-switch should be animated. If you pass an integer-value, it defines the milliseconds for the animation. Passing `false` disables the animation. Note that all animations are done via CSS3-transitions, so if you want to alter them you have to do it via the CSS-file.\r\n\r\n###\t`{maxImgSize: float}`\r\n_Default: 0.8_\r\n\r\nThis is the modifier which is used to reduce the images size when it's full size won't fit in the viewport. Maximum value is 1 for 100%.\r\n\r\n#### Callbacks\r\n\r\n###\t`{onopen: function(image)}`\r\nFunction that is executed when the lightbox is opened. Receives the image including original width and height which is currently displayed as param.\r\n\r\n###\t`{onclose: function(image)}`\r\nFunction that is executed when the lightbox is closed. Receives the last image including original width and height which was displayed as param.\r\n\r\n###\t`{onresize: function(image)}`\r\nFunction that is executed when the lightbox is resized. Receives the image including original width and height which is currently displayed as param.\r\n\r\n###\t`{onload: function(event)}`\r\nFunction that is executed once the current image is loaded. The callback receives an event which is `\"prev\"` if the prev button was clicked, `\"next\"` if the next button was clicked or `false` for all other ways of opening the lightbox.\r\n\r\n###\t`{onloaderror: function(event)}`\r\nFunction that is executed when the current image fails to load. You can add your handlers here to display a warning or call other functions. The callback receives an full image-error-event which has a property `_happenedWhile`. That property is `\"prev\"` if the prev button was clicked, `\"next\"` if the next button was clicked or `false` for all other ways of opening the lightbox. This allows you to handle errors. For example you can just show the next or previous picture if the current one is not available:\r\n\r\n\t\tonloaderror: function(event){\r\n\t\t\tif(event._happenedWhile === 'prev')\r\n\t\t\t\tlightbox.prev()\r\n\t\t\telse\r\n\t\t\t\tlightbox.next()\r\n\t\t}\r\n\r\n## Attributes\r\n\r\n### `lightbox.thumbnails`\r\nType: `Array`\r\n\r\nArray holding all thumbnail elements. If you want to dynamically load and push pictures to an existing group be sure to set a groupname on the element via the `data-jslghtbx-group` attribute. If you want to show just one dynamic loaded picture you should use the `open()` method. Don't forget to set the `data-jslghtbx-index` attribute as unique identifier!\r\nExample:\r\n\r\n var img = new Image()\r\n img.src = 'img/lightbox/9-small.jpg'\r\n img.setAttribute('data-jslghtbx-group','mygroup1')\r\n img.setAttribute('data-jslghtbx-index', lightbox.thumbnails.length)\r\n lightbox.thumbnails.push(img)\r\n\r\n## Methods\r\n\r\n### `lightbox.load(options)`\r\n\r\nThe init-function. Here you can pass your option-object. Has to be called once on the box-object. If you dont pass options, the defaults are loaded. A full call may look like this:\r\n\r\nExample:\r\n\r\n\t/* Default options */\r\n\tvar options = {\r\n\t\tboxId: \t\t\t\t'testID',\r\n\t\tdimensions: \t\ttrue,\r\n\t\tcaptions: \t\t\ttrue,\r\n\t\tprevImg: \t\t\tfalse,\r\n\t\tnextImg: \t\t\tfalse,\r\n\t\thideCloseBtn: \t\tfalse,\r\n\t\tcloseOnClick: \t\ttrue,\r\n\t\tloadingAnimation: \t200,\r\n\t\tanimElCount: \t\t4,\r\n\t\tpreload: \t\t\ttrue,\r\n\t\tcarousel: \t\t\ttrue,\r\n\t\tanimation: \t\t\t400,\r\n\t\tnextOnClick: \t\ttrue,\r\n\t\tresponsive: \t\ttrue,\r\n\t\tmaxImgSize:\t\t\t0.8,\r\n\t\tkeyControls: \t\ttrue,\r\n\t\t// callbacks\r\n\t\tonopen: function(){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonclose: function(){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonload: function(){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonresize: function(event){\r\n\t\t\t// ...\r\n\t\t},\r\n\t\tonloaderror: function(event){\r\n\t\t\t// ...\r\n\t\t}\r\n\t};\r\n\tvar lightbox = new Lightbox();\r\n\tlightbox.load(options);\r\n\r\n### `lightbox.open(src-link || image, groupName)`\r\nYou can open the box manually via JS. There are multiple ways to tell the box which image to load.\r\n\r\n1. Via link:\r\n\r\n\t\tdocument.getElementById('open-lightbox').addEventListener('click',function(){\r\n\t\t\tlightbox.open('../img/lightbox/1.jpg');\r\n\t\t});\r\n\r\n2. Via image object:\r\n\r\n\t\tvar myImg = document.getElementById('myImg');\r\n\t\tdocument.getElementById('open-lightbox').addEventListener('click',function(){\r\n\t\t\tlightbox.open(myImg);\r\n\t\t});\r\n\r\n3. Via group name, which shows the first image of the group. The first parameter must be false:\r\n\r\n\t\tdocument.getElementById('open-lightbox').addEventListener('click',function(){\r\n\t\t\tlightbox.open(false,'myGroup');\r\n\t\t});\r\n\r\n### `lightbox.next()`\r\nShows the next image of current group\r\n\r\n### `lightbox.prev()`\r\nShows the previous image of current group\r\n\r\n### `lightbox.close()`\r\nCloses the lightbox.\r\n\r\n### `lightbox.resize()`\r\nRepositions the image in the lightbox. Is called on every resize-event unless you set the `responsive`-option to false.","maintainers":[{"name":"felixhagspiel","email":"info@felixhagspiel.de"}],"time":{"modified":"2022-06-19T06:40:09.133Z","created":"2015-11-03T10:00:43.282Z","0.5.3":"2015-11-03T10:00:43.282Z","0.5.5":"2017-01-09T13:46:17.100Z"},"homepage":"http://jslightbox.felixhagspiel.de/","keywords":["lightbox","vanilla","ie8","responsive","gallery","small","lightweight","js only","no jquery","javascript"],"repository":{"type":"git","url":"git+https://github.com/felixhagspiel/jsOnlyLightbox.git"},"author":{"name":"Felix Hagspiel"},"bugs":{"url":"https://github.com/felixhagspiel/jsOnlyLightbox/issues"},"license":{"type":"MIT","url":"https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/License.txt"},"readmeFilename":"README.md","users":{}}