{"id":13402727,"url":"https://github.com/nextapps-de/spotlight","last_synced_at":"2025-05-14T21:06:35.690Z","repository":{"id":44469298,"uuid":"191187480","full_name":"nextapps-de/spotlight","owner":"nextapps-de","description":"The most easy to integrate lightbox image gallery library for the Web.","archived":false,"fork":false,"pushed_at":"2023-09-18T14:10:36.000Z","size":13004,"stargazers_count":1672,"open_issues_count":39,"forks_count":127,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-05-12T10:41:14.064Z","etag":null,"topics":["gallery","gallery-extension","gallery-plugin","gallery-simple","gallery-template","gallery-viewer","gallery-widget","image-viewer","javascript-library","lightbox","lightbox-gallery","lightbox-gallery-plugin","lightbox-plugin","photo-gallery"],"latest_commit_sha":null,"homepage":"https://nextapps-de.github.io/spotlight/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextapps-de.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-06-10T14:48:47.000Z","updated_at":"2025-05-12T10:13:46.000Z","dependencies_parsed_at":"2022-07-16T16:17:08.694Z","dependency_job_id":"93ffa33e-48ff-43cf-a737-8373c554aad0","html_url":"https://github.com/nextapps-de/spotlight","commit_stats":{"total_commits":72,"total_committers":3,"mean_commits":24.0,"dds":0.02777777777777779,"last_synced_commit":"5160e7910f4cf27ac9300861ce795821059afba3"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fspotlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fspotlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fspotlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fspotlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextapps-de","download_url":"https://codeload.github.com/nextapps-de/spotlight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227612,"owners_count":22035669,"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":["gallery","gallery-extension","gallery-plugin","gallery-simple","gallery-template","gallery-viewer","gallery-widget","image-viewer","javascript-library","lightbox","lightbox-gallery","lightbox-gallery-plugin","lightbox-plugin","photo-gallery"],"created_at":"2024-07-30T19:01:20.055Z","updated_at":"2025-05-14T21:06:35.642Z","avatar_url":"https://github.com/nextapps-de.png","language":"JavaScript","readme":"\u003cp\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\u003cimg src=\"https://cdn.jsdelivr.net/gh/nextapps-de/spotlight@master/demo/spotlight.svg\" alt=\"Spotlight.js: Modern HTML5 Gallery for Images, Videos and Media\" width=\"500px\"\u003e\u003cp\u003e\u003c/p\u003e\u003c/h1\u003e\n\u003ch3\u003eWeb's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.\u003c/h3\u003e\n\n\u003ca target=\"_blank\" href=\"https://www.npmjs.com/package/spotlight.js\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/spotlight.js.svg\"\u003e\u003c/a\u003e\u003c!--\u003ca target=\"_blank\" href=\"https://github.com/nextapps-de/spotlight/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/nextapps-de/spotlight.svg\"\u003e\u003c/a\u003e--\u003e\n\u003ca target=\"_blank\" href=\"https://github.com/nextapps-de/spotlight/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/spotlight.js.svg\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://nextapps-de.github.io/spotlight/\"\u003eDemo\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#started\"\u003eGetting Started\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#groups\"\u003eGallery Groups\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#options\"\u003eOptions\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#styling\"\u003eStyling\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#api\"\u003eAPI\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"CHANGELOG.md\"\u003eChangelog\u003c/a\u003e\n\n## Whats new in 0.7.0?\n\nThe new version includes tons of fixes, new features and improvements which was collected over the last two years. Read the \u003ca href=\"CHANGELOG.md\"\u003eChangelog\u003c/a\u003e to get all new features.\n\n\u003ch3\u003eLive Demo:\u003cp\u003e\u003c/p\u003e\u003ca href=\"https://nextapps-de.github.io/spotlight/\"\u003ehttps://nextapps-de.github.io/spotlight/ \u003c/a\u003e\u003c/h3\u003e\n\nSpotlight runs out of the box:\n\n- No additional Javascript coding\n- No additional HTML snippets\n- No additional CSS resources\n- No additional icons/assets\n- No additional handling of dynamic content and event listener\n\n\u003ca name=\"features\" id=\"features\"\u003e\u003c/a\u003e\n## Features\n\n- Video Support\n- Mounting HTML node fragments as slides (you can add just everything as a slide!)\n- Gallery groups:\n  - group images to specific galleries\n  - group options inheritance\n- Toolbar \u0026 Gallery tools:\n  - Fullscreen\n  - Zoom in/out\n  - Toggle resize\n  - Switch theme\n  - Autoslide\n  - Download\n  - Progress Bar\n  - Page\n  - Title (also inherits from image \"alt\"-attribute)\n  - Description\n  - Customizable button\n- Adaptive responsive images (by viewport size, pixel ratio and available internet bandwidth)\n- Auto-fit images and videos (as \"contain\" or as \"cover\")\n- Custom Controls\n- Fully configurable via markup\n- Loading Spinner\n- Smart Preloading (prefetch next image including cancellation)\n- Customize via standard options\n- Simply customize via markup (data-attributes)\n- Built-in animations\n- Custom themes\n- Custom animations\n- Supported controls:\n  - Keyboard\n  - Touch\n  - Mouse (Move + Wheel)\n- Back-Button (Android)\n- Callbacks (onclick, onshow, onclose, onchange)\n- Global API for programmatic usage\n\n__Technical properties:__\n\n- Outstanding performance\n- Memory optimized, tiny footprint, fully cleans up\n- Event capturing (just one single global event listener)\n- Bind additional global event listener dynamically:\n  - install when gallery opens\n  - cleanup when gallery was closed\n- No dependencies, no jQuery\n- Fully Responsive\n- Touch-friendly mobile support\n- Super-lightweight, all in all just 9kb gzip (js + css + html + icons)\n- Support for ES6 module system\n\n#### Pending Feature Suggestions:\n\n- Inline Gallery\n- Pinch Zoom Support\n- 2-Panel-Paging Strategy\n- Swipe down to close\n\n\u003ca name=\"started\"\u003e\u003c/a\u003e\n## Getting Started\n\n__Get Latest Stable Build (Recommended):__\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd colspan=3\"\u003e\n            \u003cb\u003e\u003cu\u003eBundle:\u003c/u\u003e\u003c/b\u003e (all assets bundled into one single file: js + css + html + icons)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003espotlight.bundle.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/spotlight/raw/0.7.8/dist/spotlight.bundle.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/spotlight.bundle.js\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/spotlight.bundle.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd colspan=3\"\u003e\n            \u003cbr\u003e\u003cb\u003e\u003cu\u003eNon-Bundled:\u003c/u\u003e\u003c/b\u003e (js and css are separated, css includes icons as base64)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003espotlight.min.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/spotlight/raw/0.7.8/dist/js/spotlight.min.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/js/spotlight.min.js\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/js/spotlight.min.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003espotlight.min.css\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/spotlight/raw/0.7.8/dist/css/spotlight.min.css\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/css/spotlight.min.css\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/css/spotlight.min.css\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd colspan=3\"\u003e\n            \u003cbr\u003e\u003cb\u003e\u003cu\u003eSources:\u003c/u\u003e\u003c/b\u003e (not bundled at all, images as url to original resources)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eES6 Modules\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.8/src/js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003eThe \u003ci\u003e/src/js\u003c/i\u003e folder of this Github repository\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eLESS Files (source)\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.8/src/css\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003eThe \u003ci\u003e/src/css\u003c/i\u003e folder of this Github repository\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003espotlight.css (compiled)\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/spotlight/raw/0.7.8/src/css/spotlight.css\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/src/css/spotlight.css\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/src/css/spotlight.css\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003esrc.zip\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.8/dist\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003eDownload all source files including image original resources.\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n__Get Latest (NPM):__\n\n```cmd\nnpm install spotlight.js\n```\n\n__Get Latest Nightly (Do not use for production!):__\n\nJust exchange the version number from the URLs above with \"master\", e.g.: \"/spotlight/__0.7.8__/dist/\" into \"/spotlight/__master__/dist\".\n\n\u003e If you are using markup on anchor elements to inject the library, then it is recommended to load the lib inside your head section of the document. Because that will better prevent the original behavior of the anchor tag (e.g. when library wasn't fully loaded on page start).\n\n### Use Bundled Version\n\nThe bundled version includes all assets like js, css, html and icon images as base64.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cscript src=\"spotlight.bundle.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Use Non-Bundled Version\n\nThe non-bundled version needs to load js and css separately (css also includes icons as base64).\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"spotlight.min.css\"\u003e\n    \u003cscript src=\"spotlight.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Preload Library / Async Load\n\n\u003e If you are using markup on anchor elements to inject the library, then it is recommended to load the lib inside your head section of the document. Read example above.\n\nJust add a link tag to the header sections which indicated to preload the script. Right before the body is closing add your site scripts. Depending on your code you may need to load them in the right order.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003e\u003c/title\u003e\n    \u003clink rel=\"preload\" href=\"spotlight.bundle.js\" as=\"script\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!--\n    \n    HTML CONTENT\n    \n    --\u003e\n    \u003c!-- BOTTOM OF BODY --\u003e\n    \u003cscript src=\"spotlight.bundle.js\" defer\u003e\u003c/script\u003e\n    \u003c!-- YOUR SCRIPT --\u003e\n    \u003cscript src=\"my-script.js\" defer\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can also load the non-bundled version in the same way.\n\n\u003e In rare situations it might produce a short flashing/reflow after page load, depending on your stack. Moving the script tag into the head section will solve this issue. Also try to use the non-bundled version.\n\n### ES6 Modules\n\nThe ES6 modules are located in `src/js/`. You need to load the stylesheet file explicitly (includes icons as base64).\n\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"dist/css/spotlight.min.css\"\u003e\n\u003c/head\u003e\n```\n\n```html\n\u003cscript type=\"module\"\u003e\n  import Spotlight from \"./src/js/spotlight.js\";\n\u003c/script\u003e\n```\n\nYou can also load modules via CDN, e.g.:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import Spotlight from \"https://unpkg.com/spotlight@0.7.8/src/js/spotlight.js\";\n\u003c/script\u003e\n```\n\nThe ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.\n\n## Basic Usage (Markup)\n\n#### Anchor + Images\n\nThe most simple way is the combination of img tags as preview images (thumbs) wrapped in an anchor element which points to the fully sized image. The advantage of this workaround is it fully falls back to a classical behavior. It is the universal markup language which all web tools already understand. Therefore, it may have some advantages for SEO also.\n\nJust add the class ___spotlight___ to an anchor element accordingly, e.g.:\n\n```html\n\u003ca class=\"spotlight\" href=\"img1.jpg\"\u003e\n    \u003cimg src=\"thumb1.jpg\"\u003e\n\u003c/a\u003e\n\u003ca class=\"spotlight\" href=\"img2.jpg\"\u003e\n    \u003cimg src=\"thumb2.jpg\"\u003e\n\u003c/a\u003e\n\u003ca class=\"spotlight\" href=\"img3.jpg\"\u003e\n    \u003cimg src=\"thumb3.jpg\"\u003e\n\u003c/a\u003e\n```\n\nThis also works with dynamically loaded content. There is no need to inject listeners on new elements. Instead, Spotlight make use of global event capturing.\n\n\u003c!--Alternatively you can also use the \u003ca href=\"#api\"\u003eSpotlight API\u003c/a\u003e for programmatically use.--\u003e\n\n#### Non-Anchor Elements\n\nAlternatively you can use non-anchor elements also:\n\n```html\n\u003cdiv class=\"spotlight\" data-src=\"img1.jpg\"\u003e\n    \u003c!-- image or any other elements --\u003e\n\u003c/a\u003e\n```\n\nPretty much the same like anchors but uses ___data-src___ instead of ___href___.\n\n\u003ca name=\"groups\" id=\"groups\"\u003e\u003c/a\u003e\n### Gallery-Groups\n\nGrouping galleries is useful when you have multiple images on your page which should be separated into groups, instead of adding all images to one single gallery when opened.\n\nGive one of the outer wrapping element the class ___spotlight-group___, e.g.:\n\n```html\n\u003c!-- Group 1 --\u003e\n\u003cdiv class=\"spotlight-group\"\u003e\n    \u003ca class=\"spotlight\" href=\"dog1.jpg\"\u003e\n        \u003cimg src=\"dog1-thumb.jpg\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"dog2.jpg\"\u003e\n        \u003cimg src=\"dog2-thumb.jpg\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"dog3.jpg\"\u003e\n        \u003cimg src=\"dog3-thumb.jpg\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003c!-- Group 2 --\u003e\n\u003cdiv class=\"spotlight-group\"\u003e\n    \u003ca class=\"spotlight\" href=\"cat1.jpg\"\u003e\n        \u003cimg src=\"cat1-thumb.jpg\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"cat2.jpg\"\u003e\n        \u003cimg src=\"cat2-thumb.jpg\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"cat3.jpg\"\u003e\n        \u003cimg src=\"cat3-thumb.jpg\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n\nEach of these groups now opens in its own gallery.\n\nGallery-Groups are also useful to declare global configuration as markup just once (group options inheritance).\n\n## Basic Usage (API)\n\nAlso you can programmatically use Spotlight via the library API. This way does not require any dependant HTML elements (e.g. the classname \"spotlight\").\n\nDefine a gallery group as follows:\n\n```js\nvar gallery = [\n    { src: \"cat1.jpg\" },\n    { src: \"cat2.jpg\" },\n    { src: \"cat3.jpg\" }\n];\n```\n\nShow gallery with default options:\n\n```js\nSpotlight.show(gallery /*, options */);\n```\n\n\u003ca name=\"options\"\u003e\u003c/a\u003e\n## Options\n\nPass options declarative via data-attributes in the HTML markup or use the \u003ca href=\"#api\"\u003eSpotlight API\u003c/a\u003e.\n\n\u003e When using markup follow these style: `data-option=\"value\"` (change _option_ and _value_ accordingly), e.g.: `\u003ca class=\"spotlight\" data-preload=\"false\"\u003e\u003c/a\u003e`.\n\n\u003e When using API follow thse style `{ option: value }` (change _option_ and _value_ accordingly), e.g.: `{ preload: false }`.\n\nYou can either apply the following data-attributes to the ___spotlight-group___ wrapper element or apply them separately to each ___spotlight___ anchor element (that also overrides inherited group definitions).\n\nWhen using API the ___spotlight-group___ is represented by the options payload, also you can assign attributes separately to each gallery entry (that also overrides inherited group definitions).\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOption\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/td\u003e\n        \u003ctd\u003eValues\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eclass\u003c/td\u003e\n        \u003ctd\u003e\n            string\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Set a classname to this gallery instance to apply custom styles besides themes independently.\n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emedia\u003c/td\u003e\n        \u003ctd\u003e\n            \"image\"\u003cbr\u003e\n            \"video\"\u003cbr\u003e\n            \"node\"\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Sets the the type of the media which should be added to the page.\n        \u003c/td\u003e\n        \u003ctd\u003eimage\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eanimation\u003c/td\u003e\n        \u003ctd\u003e\n            string\u003cbr\u003e\n            Array\u0026lt;string\u003e\u003cbr\u003e\n            \"fade\"\u003cbr\u003e\n            \"slide\"\u003cbr\u003e\n            \"scale\"\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Change animation (use built-ins or custom classname)\u003cbr\u003e\n            \u003cb\u003eNote:\u003c/b\u003e Markup as comma-separated list, e.g: \u003ccode\u003edata-animation=\"slide,fade,scale\"\u003c/code\u003e. \n        \u003c/td\u003e\n        \u003ctd\u003eslide, fade, scale\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003econtrol\u003c/td\u003e\n        \u003ctd\u003e\n            string\u003cbr\u003e\n            Array\u0026lt;string\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Show/hide control elements as \"whitelisted\" through a comma-separated list, e.g. \u003ccode\u003edata-control=\"autofit,page,fullscreen\"\u003c/code\u003e\n        \u003c/td\u003e\n        \u003ctd\u003epage, zoom, autofit, fullscreen, close\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003epage\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide page in the toolbar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efullscreen\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide fullscreen button (automatically hides when not supported by the browser)\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ezoom\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide both zoom buttons in the toolbar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ezoom-in\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide zoom-in button in the toolbar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ezoom-out\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide zoom-out button in the toolbar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eautofit\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide autofit button in the toolbar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eclose\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide the close icon in the toolbar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etheme\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide theme button\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eplay\u003c/td\u003e\n        \u003ctd\u003etrue / false / number\u003c/td\u003e\n        \u003ctd\u003eShow/hide play button. When passing a numeric value it will be used as a delay in seconds between each tick.\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eautoslide\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eAutoslide when opening gallery.\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eprogress\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide the animated autoslide progress bar\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003einfinite\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eRestart from beginning when no slides left\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eautohide\u003c/td\u003e\n        \u003ctd\u003etrue / false / number\u003c/td\u003e\n        \u003ctd\u003eEnable/disable automatically hide controls when inactive, also set cooldown time in seconds.\u003c/td\u003e\n        \u003ctd\u003e7\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etheme\u003c/td\u003e\n        \u003ctd\u003estring\u003cbr\u003e\"white\"\u003c/td\u003e\n        \u003ctd\u003eThe classname of your custom theme. The theme \"white\" is a built-in theme.\u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etitle\u003c/td\u003e\n        \u003ctd\u003estring / false\u003c/td\u003e\n        \u003ctd\u003eSet image title or hide it\u003cbr\u003e\u003cb\u003eNote:\u003c/b\u003e When using image elements, this attribute will also inherit automatically from \u003ccode\u003e\u0026lt;img alt=\u0026quot;...\u0026quot;\u0026gt;\u003c/code\u003e as well as from \u003ccode\u003e\u0026lt;img title=\u0026quot;...\u0026quot;\u0026gt;\u003c/code\u003e. To prevent this behavior you can set \u003ccode\u003edata-title=\"false\"\u003c/code\u003e explicitly. This will hide the title regardless of any image alt-attributes.\u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edescription\u003c/td\u003e\n        \u003ctd\u003estring / false\u003c/td\u003e\n        \u003ctd\u003eSet image description or hide it\u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003espinner\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eEnable/disable the spinner. When disabled the image will not hide until it is fully loaded, that could be useful for progressive jpeg.\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ebutton\u003c/td\u003e\n        \u003ctd\u003estr\u003c/td\u003e\n        \u003ctd\u003eEnable/disable a button in the footer section, also set button text.\u003cbr\u003e\u003cb\u003eNote:\u003c/b\u003e When using as markup you have to provide a click target for the button or you can assign an \u003ccode\u003eonclick\u003c/code\u003e callback via options when used programmatically.\u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ebutton-href\u003c/td\u003e\n        \u003ctd\u003estr\u003c/td\u003e\n        \u003ctd\u003eWhen using a button as markup you can provide a click target for the button, e.g. \u003ccode\u003e\u0026lt;a button=\u0026quot;click me\u0026quot; button-href=\"https://domain.com\"\u0026gt;\u003c/code\u003e.\u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Additional Image Options\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOption\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/td\u003e\n        \u003ctd\u003eValues\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003esrc-{size}\u003c/td\u003e\n        \u003ctd\u003e\n            src-1200\u003cbr\u003e\n            src-2400\u003cbr\u003e\n            src-3800\u003cbr\u003e\n            ...\n        \u003c/td\u003e\n        \u003ctd\u003e\n            The tag/key represents the size of the image \u003cb\u003elongest\u003c/b\u003e side. The content contains the path or url to the image (e.g. \u003ccode\u003edata-src-800=\"image_800x400.jpg\"\u003c/code\u003e).\n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003epreload\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eEnable/disable preloading of the next image\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efit\u003c/td\u003e\n        \u003ctd\u003e\"contain\"\u003cbr\u003e\"cover\"\u003c/td\u003e\n        \u003ctd\u003eAuto-fit the media either as \"contain\" or as \"cover\"\u003c/td\u003e\n        \u003ctd\u003econtain\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edownload\u003c/td\u003e\n        \u003ctd\u003etrue / false\u003c/td\u003e\n        \u003ctd\u003eShow/hide the download icon in the toolbar\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Additional Video Options\n\nMost of these options for a video are inherited by the attributes of a standard video element.\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOption\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/td\u003e\n        \u003ctd\u003eValues\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003esrc-{format}\u003c/td\u003e\n        \u003ctd\u003e\n            src-webm\u003cbr\u003e\n            src-ogg\u003cbr\u003e\n            src-mp4\u003cbr\u003e\n            ...\n        \u003c/td\u003e\n        \u003ctd\u003e\n            The tag/key represents the format of the video. The content contains the path or url to the video (e.g. \u003ccode\u003edata-src-webm=\"video.webm\"\u003c/code\u003e).\n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efit\u003c/td\u003e\n        \u003ctd\u003e\"contain\"\u003cbr\u003e\"cover\"\u003c/td\u003e\n        \u003ctd\u003eAuto-fit the media either as \"contain\" or as \"cover\"\u003c/td\u003e\n        \u003ctd\u003econtain\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eautoplay\u003c/td\u003e\n        \u003ctd\u003e\n            true\u003cbr\u003e\n            false\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Start the video immediately. \n        \u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emuted\u003c/td\u003e\n        \u003ctd\u003e\n            true\u003cbr\u003e\n            false\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Start playing as muted. \n        \u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003epreload\u003c/td\u003e\n        \u003ctd\u003e\n            true\u003cbr\u003e\n            false\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Preload the video. \n        \u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003econtrols\u003c/td\u003e\n        \u003ctd\u003e\n            true\u003cbr\u003e\n            false\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Show/hide the video controls. \n        \u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003einline\u003c/td\u003e\n        \u003ctd\u003e\n            true\u003cbr\u003e\n            false\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Make the video player inline (equal to \"playsinline\"). \n        \u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eposter\u003c/td\u003e\n        \u003ctd\u003e\n            string\n        \u003c/td\u003e\n        \u003ctd\u003e\n            The path or URL to the preview image. \n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### API-only Options\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOption\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/td\u003e\n        \u003ctd\u003eValues\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eindex\u003c/td\u003e\n        \u003ctd\u003e\n            number\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Sets the starting index when showing the gallery by using the \u003ca href=\"#api\"\u003eSpotlight API\u003c/a\u003e. The index starts from 1.\n        \u003c/td\u003e\n        \u003ctd\u003e1\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonchange\u003c/td\u003e\n        \u003ctd\u003e\n            function(index, options)\n        \u003c/td\u003e\n        \u003ctd\u003e\n            Pass a callback function which is get fired every time when a page/slide has changed. The first parameter holds the new page index, the second parameter provides the inherited option payload for this page.\u003cbr\u003e\n            \u003cb\u003eNote:\u003c/b\u003e The image may not have been fully loaded when the event is fired (preloading phase). The index starts from 1.\n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonshow\u003cbr\u003eonclose\u003c/td\u003e\n        \u003ctd\u003e\n            function(index)\n        \u003c/td\u003e\n        \u003ctd\u003e\n            These callback functions are called when opening or closing the gallery (the first parameter holds the current page index).\n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonclick\u003c/td\u003e\n        \u003ctd\u003e\n            function(index, options)\n        \u003c/td\u003e\n        \u003ctd\u003e\n            A callback function which is getting fired when the optional button in the footer sections was clicked. The first parameter holds the current page index, the second parameter provides the inherited option payload for this page.\n        \u003c/td\u003e\n        \u003ctd\u003enull\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Example: Options \u0026 Group Inheritance (Markup)\n\n```html\n\u003cdiv class=\"spotlight-group\" data-title=\"Group title\" data-animation=\"fade\" data-control=\"autofit,close\"\u003e\n    \u003ca class=\"spotlight\" href=\"cat1.jpg\" data-title=\"This is a title\" data-theme=\"white\"\u003e\n        \u003cimg src=\"cat1-thumb.jpg\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"cat2.jpg\" data-description=\"This is a description\"\u003e\n        \u003cimg src=\"cat2-thumb.jpg\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"cat3.jpg\" data-button=\"Click me\" data-button-href=\"javascript:alert('clicked')\"\u003e\n        \u003cimg src=\"cat3-thumb.jpg\" alt=\"This is also a title\"\u003e\n    \u003c/a\u003e\n    \u003ca class=\"spotlight\" href=\"cat4.jpg\" data-title=\"false\" data-fit=\"cover\"\u003e\n      \u003cimg src=\"cat4-thumb.jpg\" alt=\"This title is hidden\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n\n__Note:__ The 2nd image gets the title \"Group title\" from the group attributes, on the last image the title is explicitly set to be hidden.\n\n\u003e Control elements and animations has to be __whitelisted__ as a comma-separated list when specified. Do not forget to add the \"close\" control, otherwise you need to provide another way to close the gallery, e.g. via the button in the footer (see the demo page bottom example).\n\n### Example: Options \u0026 Group Inheritance (API)\n\nSame result as above but as code:\n\n```js\nSpotlight.show([{\n    src: \"cat1.jpg\",\n    title: \"This is a title\",\n    theme: \"white\"\n},{\n    src: \"cat2.jpg\",\n    description: \"This is a description\",\n},{\n    src: \"cat3.jpg\",\n    button: \"Click me\",\n    onclick: function(){ alert(\"clicked\"); },\n    title: \"This is also a title\"\n},{\n    src: \"cat4.jpg\",\n    title: false,\n    fit: \"cover\"\n}],{\n    // Group Definitions:\n    title: \"Group title\",\n    animation: \"fade\",\n    control: \"autofit,close\"\n});\n```\n\n## Adaptive Responsive Images\n\n\u003e This feature will improve overall performance of your page/application a lot, especially for mobile devices and bad internet connections.\n\nYou can declare a set of the same image in multiple dimensions and quality. Spotlight will pick the optimal version by taking into account:\n\n1. The browsers max resolution\n2. The device screen pixel ratio\n3. The available internet connection bandwidth\n\n### Example: Markup\n\nSave your images in several sizes and resolutions and assign the __longest__ dimension of both sides (width, height) like this:\n```html\n\u003ca class=\"spotlight\" href=\"cat1.jpg\" \n                     data-src-800=\"cat1_800.jpg\" \n                     data-src-1200=\"cat1_1200.jpg\" \n                     data-src-2400=\"cat1_2400.jpg\" \n                     data-src-3800=\"cat1_3800.jpg\"\u003e\n    \u003cimg src=\"cat1-thumb.jpg\"\u003e\n\u003c/a\u003e\n```\n\nWhen clicked on it Spotlight will pick the optimum choice.\n\nThis markup completely falls back to standard browser behavior when something goes wrong, also it is SEO friendly.\n\n### Example: API\n\nSame result as above but as code:\n\n```js\nSpotlight.show([{\n    // the default \"href\" version as fallback isn't required here\n    \"src-800\": \"cat1_800.jpg\",\n    \"src-1200\": \"cat1_1200.jpg\",\n    \"src-2400\": \"cat1_2400.jpg\",\n    \"src-3800\": \"cat1_3800.jpg\"\n}]);\n```\n\n## Support Video\n\n\u003e All data-attributes for markup a video is inherited by the attributes of a standard video element.\n\nConsidering you want to add a standard video element like this as a slide:\n\n```html\n\u003cvideo poster=\"preview.jpg\" muted preload controls autoplay playsinline=\"false\"\u003e\n    \u003csource src=\"video.mp4\" type=\"video/mp4\"\u003e\n    \u003csource src=\"video.ogv\" type=\"video/ogg\"\u003e\n    \u003csource src=\"video.webm\" type=\"video/webm\"\u003e\n\u003c/video\u003e\n```\n\n### Example: Markup\n\nYou need a markup like this to represent the video from above:\n\n```html\n\u003ca class=\"spotlight\" data-media=\"video\"\n                     data-src-webm=\"video.webm\"\n                     data-src-ogg=\"video.ogv\"\n                     data-src-mp4=\"video.mp4\"\n                     data-poster=\"preview.jpg\"\n                     data-autoplay=\"true\"\n                     data-muted=\"true\"\n                     data-preload=\"true\"\n                     data-controls=\"true\"\n                     data-inline=\"false\"\u003e\n  \u003cimg src=\"preview.jpg\"\u003e\n\u003c/a\u003e\n```\n\n### Example: API\n\nSame result as above but as code:\n\n```js\nSpotlight.show([{\n  \n  \"media\": \"video\",\n  \"src-webm\": \"video.webm\",\n  \"src-ogg\": \"video.ogv\",\n  \"src-mp4\": \"video.mp4\",\n  \"poster\": \"preview.jpg\",\n  \"autoplay\": true,\n  \"muted\": true,\n  \"preload\": true,\n  \"controls\": true,\n  \"inline\": false\n}]);\n```\n\n## Custom Controls\n\n\u003e You can add custom controls to the header toolbar by API usage only.\n\nThe basic concept is very straight forward. You just need to assign a unique classname along with an event listener. Basically you have to follow these steps.\n\n1. Initialize the Spotlight gallery manually __once__ to make the template available for extensions:\n```js\nSpotlight.init();\n```\n\nThe gallery automatically initialize when first time open, so you can also add custom control inside the \"onshow\" callback.\n\n2. Add the custom control and pass a click handler (returns the button element):\n```js\nvar button = Spotlight.addControl(\"my-control\", function(event){\n    // handle click event\n    console.log(\"button clicked\");\n});\n```\n\n3. Define a CSS class to style your button:\n```css\n/* your control name will be prefixed by \"spl-\" automatically */\n.spl-my-control{\n    background-image: url(icon.svg);\n    background-size: 22px;\n}\n```\n\n\u003e Important: custom control classes gets always css-prefixed by \"spl-\" automatically to prevent classname collision!\n\nRemoving an added control:\n\n```js\nSpotlight.removeControl(\"my-control\");\n```\n\n### Advanced Example (Like Button)\n\nLet's take a useful example of dynamically adding a \"like button\" in the toolbar. You can see a live demo of this example on the demo page (bottom section).\n\nProviding a gallery as normal and add a custom attribute \"like\", which stores the current like state of each image.\n```js\nconst gallery = [{\n\n    src: \"image1.jpg\",\n    like: false\n},{\n    src: \"image2.jpg\",\n    like: false,\n},{\n    src: \"image3.jpg\",\n    like: false\n}];\n```\n\nDefine a CSS class to style your button, e.g.:\n```css\n/* custom classes are always prefixed by \"spl-\" automatically */\n.spl-like{\n    background-image: url(heart-outline.svg);\n    background-size: 22px;\n}\n/* optionally, additional state to toggle the button: */\n.spl-like.on{\n    background-image: url(heart.svg);\n}\n```\n\n\u003e Please keep in mind, when your custom control has the name \"like\" the corresponding classname always gets prefixed by \"spl-\" and becomes \"spl-like\" to prevent classname collision. Do not name your control in prefixed style like \"spl-like\", because that will prefix this also (and becomes \"spl-spl-like\").\n\nWe need some variables to store some state which is used in the callback handler later:\n```js\n// store the button element to apply dom changes to it\nlet like;\n// store the current index\nlet slide = 0;\n```\n\nImplement a click event handler of the like button, e.g.:\n```js\nfunction handler(event){\n  \n    // get the current like state\n    // at this point we use the stored last index from the variable \"slide\"\n    const current_like_state = !gallery[slide].like;\n  \n    // toggles the current like state\n    gallery[slide].like = current_like_state;\n  \n    // assign the state as class to visually represent the current like state\n    this.classList.toggle(\"on\");\n  \n    if(current_like_state){\n  \n      // do something if liked ...\n    }\n    else{\n  \n      // do something if unliked ...\n    }\n}\n```\n\n\u003e The keyword `this` corresponds to the current clicked element (the like icon in this example).\n\nFinally, create the gallery and provide some callbacks to insert the custom control dynamically:\n```js\nSpotlight.show(gallery, {\n\n    // fires when gallery opens\n    onshow: function(index){\n\n        // the method \"addControl\" returns the new created control element\n        like = Spotlight.addControl(\"like\", handler);\n    },\n    // fires when gallery change to another page\n    onchange: function(index, options){\n\n        // store the current index for the button listener\n        // the slide index start from 1 (as \"page 1\")\n        slide = index - 1;\n\n        // initially apply the stored like state when slide is openened\n        // at this point we use the stored like element\n        like.classList.toggle(\"on\", gallery[slide].like);\n    },\n    // fires when gallery is requested to close\n    onclose: function(index){\n\n        // remove the custom button, so you are able\n        // to open next gallery without this custom control\n        Spotlight.removeControl(\"like\");\n    }\n});\n```\n\nYou did not need to remove the custom control everytime. When all your galleries have this custom control, then simply add the control after you call `Spotlight.init()` once.\n\nInitialize the Spotlight gallery once:\n```js\nSpotlight.init();\n```\n\nAdd the custom control once:\n```js\nlike = Spotlight.addControl(\"like\", handler);\n```\n\nOpen the gallery and just provide an \"onchange\" handler:\n```js\nSpotlight.show(gallery, {\n    onchange: function(index, options){\n        slide = index - 1;\n        like.classList.toggle(\"on\", gallery[slide].like);\n    }\n});\n```\n\nThat is the same custom like button from above example, just shorter but also non-dynamically added for all gallery instances.\n\n## Embedding Node Fragments\n\n\u003e With node fragments you can simply add everything as a slide. This way you can create your own full customized slides with its own interactions inside them.\n\nYou can use this feature completely by markup by providing a query selector as \"src\" which points to a node in your document.\n\n### Using Auto-Mount / Auto-Unmount\n\n\u003e This workaround is also compatible if you are using server-side rendering.\n\nYou can use a hidden backstore optionally which holds the fragments to be inserted as a slide, e.g.:\n\n```html\n\u003cdiv style=\"display: none\"\u003e\n    \u003cdiv id=\"fragment\" style=\"width: 100%\"\u003e\n        \u003ch1\u003eEmbedded Node Fragment\u003c/h1\u003e\n        \u003cp\u003eAny HTML Content...\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nProvide a __dom query selector__ as \"src\" which points to a node in your document:\n```html\n\u003ca class=\"spotlight\" data-media=\"node\" data-src=\"#fragment\"\u003e\n    Click here to open\n\u003c/a\u003e\n```\n\nWhen closing the gallery or change the page to another slide, the fragment will automatically move back to its original position (the hidden backstore in this example).\n\n### Custom Slides (API)\n\nYou can add nodes as slide which are not part of the document via the API (e.g. fragments, templates, offscreen nodes). Also, you can create an iframe to load extern contents.\n\n#### Example: Youtube Video\n\nYou can create your own fragments/templates and add the root node directly as \"src\":\n\n```js\nSpotlight.show([{\n    media: \"node\",\n    src: (function(){\n        const iframe = document.createElement(\"iframe\");\n        iframe.src = \"https://www.youtube.com/embed/tgbNymZ7vqY\";\n        return iframe;\n    }())\n}]);\n```\n\n#### Example: Templating Engine\n\nOr use your preferred templating engine and add the root node as \"src\":\n\n```js\nMikado(template).mount(root).render(data);\n\nSpotlight.show([{\n    media: \"node\",\n    src: root\n}]);\n```\n\n\u003ca name=\"api\" id=\"api\"\u003e\u003c/a\u003e\n## Spotlight API\n\nDefine a gallery group as follows:\n\n```js\nvar gallery = [{\n    title: \"Image 1\",\n    description: \"This is a description.\",\n    src: \"gallery/london-1758181.jpg\"\n},{\n    title: \"Image 2\",\n    description: \"This is a description.\",\n    src: \"gallery/sea-1975403.jpg\"\n},{\n    title: \"Image 3\",\n    description: \"This is a description.\",\n    src: \"gallery/newport-beach-2089906.jpg\"\n}];\n```\n\nShow gallery with default options:\n\n```js\nSpotlight.show(gallery);\n```\n\nShow gallery with custom options:\n\n```js\nSpotlight.show(gallery, {\n    index: 2,\n    theme: \"white\",\n    autohide: false,\n    control: [\"autofit\", \"zoom\", \"close\"]\n});\n```\n\nClose gallery:\n\n```js\nSpotlight.close();\n```\n\nNext slide:\n\n```js\nSpotlight.next();\n```\n\nPrevious slide:\n\n```js\nSpotlight.prev();\n```\n\nGoto slide:\n\n```js\nSpotlight.goto(3);\n```\n\nZoom to:\n\n```js\nSpotlight.zoom(1.5);\n```\n\nToggle theme:\n\n```js\nSpotlight.theme();\n```\n\nSet theme:\n\n```js\nSpotlight.theme(\"white\");\n```\n```js\nSpotlight.theme(\"dark\");\n```\n\nToggle fullscreen:\n\n```js\nSpotlight.fullscreen();\n```\n\nSet fullscreen:\n\n```js\nSpotlight.fullscreen(true);\n```\n```js\nSpotlight.fullscreen(false);\n```\n\nToggle autofit:\n\n```js\nSpotlight.autofit();\n```\n\nSet autofit:\n\n```js\nSpotlight.autofit(true);\n```\n```js\nSpotlight.autofit(false);\n```\n\nToggle menu:\n\n```js\nSpotlight.menu();\n```\n\nSet menu:\n\n```js\nSpotlight.menu(true);\n```\n```js\nSpotlight.menu(false);\n```\n\nDownload current image:\n\n```js\nSpotlight.download();\n```\n\n#### Example ES6:\n\n```js\nimport Spotlight from \"./spotlight.js\";\n\nSpotlight.show(\n    [ /* Gallery */ ], \n    { /* Options */ }\n);\n```\n\nYou can also import any of the Spotlight methods just as you need:\n\n```js\nimport { show, close, goto } from \"./spotlight.js\";\n\nshow([/* Gallery */], {/* Options */});\n// ....\ngoto(5);\n// ....\nclose();\n```\n\n\u003e Modern build tools will apply dead code elimination when just importing methods your application needs.\n\n\u003ca name=\"styling\" id=\"styling\"\u003e\u003c/a\u003e\n## Custom Styling\n\nTo add custom styling just override CSS classes accordingly: \n\n```css\n#spotlight { /* main font styles, background */ }\n.spl-page { /* current page (toolbar) */ }\n.spl-fullscreen { /* button fullscreen (toolbar) */ }\n.spl-autofit { /* button autofit (toolbar) */ }\n.spl-zoom-out { /* button zoom out (toolbar) */ }\n.spl-zoom-in { /* button zoom in (toolbar) */ }\n.spl-theme { /* button theme (toolbar) */ }\n.spl-play { /* button autoplay (toolbar) */ }\n.spl-download { /* button download (toolbar) */ }\n.spl-close { /* button close (toolbar) */ }\n.spl-prev { /* button page prev */ }\n.spl-next { /* button page next */ }\n.spl-spinner { /* preloading spinner */ }\n.spl-spinner.spin { /* show spinner */ }\n.spl-spinner.error { /* show loading error */ }\n.spl-title { /* image title */ }\n.spl-description { /* image description */ }\n.spl-button { /* button footer */ }\n.spl-header { /* the header wrapping element */ }\n.spl-footer { /* the footer wrapping element */ }\n```\n\n\u003ca name=\"themes\" id=\"themes\"\u003e\u003c/a\u003e\n## Themes\n\n__Customize builtin themes__\n\nUse the same classes as above:\n\n```css\n#spotlight.white .spl-title{\n    /* image title in white theme */\n}\n```\n\n```css\n#spotlight{\n    /* main background in dark theme */\n}\n```\n\n__Create New Themes__\n\nDefine styles, e.g. for the custom theme name \"my-theme\":\n\n```css\n.my-theme .spl-title{\n    /* image title in custom theme */\n}\n.my-theme{\n    /* main background in custom theme */\n}\n```\n\nApply custom theme via markdown:\n\n```html\n\u003ca class=\"spotlight\" href=\"cat.jpg\" data-theme=\"my-theme\"\u003e\n    \u003cimg src=\"cat_thumb.jpg\"\u003e\n\u003c/a\u003e\n```\n\nOr apply custom theme via API:\n\n```js\nSpotlight.show([ /* Gallery */ ],{\n    theme: \"my-theme\"\n});\n```\n\nYou could also set themes per image separately:\n\n```js\nSpotlight.show([\n    { src: \"cat1.jpg\" }, // default theme\n    { src: \"cat2.jpg\", theme: \"my-theme\" },\n    { src: \"cat3.jpg\", theme: \"white\" }\n]);\n```\n\n#### CSS Class\n\nIf you like to apply styles independently besides themes you can simply do that by adding a class during initialization:\n```js\nSpotlight.show([\n    { src: \"cat1.jpg\" }, // default theme\n    { src: \"cat2.jpg\", theme: \"my-theme\" },\n    { src: \"cat3.jpg\", theme: \"white\" }\n],{\n    class: \"custom\"\n});\n```\n\nIn your stylesheet you can apply you custom styles, .e.g.:\n\n```css\n#spotlight.custom .spl-title{\n    font-size: 15px;\n}\n```\n\n\u003ca name=\"animation\" id=\"animation\"\u003e\u003c/a\u003e\n## Custom Animations\n\n\u003e Important: The style class for a custom animation describes the __\u003cu\u003ehidden state\u003c/u\u003e__ of an image.\n\nYou can define your own custom animation by:\n\n\u003cb\u003e1.\u003c/b\u003e Define the styles in default state (when image is shown), e.g.:\n\n```css\n.spl-pane \u003e *{\n    filter: grayscale(0);\n    transition: filter 1s ease-out,\n                opacity 0.5s ease-out;\n}\n```\n\n\u003cb\u003e2.\u003c/b\u003e Define styles for the __\u003cu\u003ehidden state\u003c/u\u003e__ of the transition by adding a custom classname:\n\n```css\n.spl-pane .my-animation{\n    filter: grayscale(1);\n    opacity: 0;\n}\n```\n\nApply custom animation via markdown:\n\n```html\n\u003ca class=\"spotlight\" href=\"cat.jpg\" data-animation=\"my-animation\"\u003e\n    \u003cimg src=\"cat_thumb.jpg\"\u003e\n\u003c/a\u003e\n```\n\nOr apply custom animation via API:\n\n```js\nSpotlight.show([ /* Gallery */ ],{\n    animation: \"my-animation\"\n});\n```\n\nYou could also set animations per image separately:\n\n```js\nSpotlight.show([\n    { src: \"cat1.jpg\" }, // default animation\n    { src: \"cat2.jpg\", animation: \"my-animation\" },\n    { src: \"cat3.jpg\", animation: \"slide,fade\" }\n]);\n```\n\n#### Use different animations for galleries\n\nThe example above will apply the animation to all instances of your gallery. When you want to add specific animation to each gallery you need to add a `class` in your options:\n```js\nSpotlight.show([\n    { src: \"cat1.jpg\" },\n    { src: \"cat2.jpg\" },\n    { src: \"cat3.jpg\" }\n],{\n  animation: \"my-animation\",\n  class: \"custom\"\n});\n```\n\nThen, add your classname (context selector) to your CSS for the ___visible___ state of the animation:\n\n```css\n.custom .spl-pane \u003e *{\n    filter: grayscale(0);\n    transition: filter 1s ease-out,\n                opacity 0.5s ease-out;\n}\n```\n\nNow you can assign different animations to each gallery.\n\n\u003ca name=\"builds\" id=\"builds\"\u003e\u003c/a\u003e\n## Custom Builds\n\nGo to the root directory of Spotlight and run:\n```cmd\nnpm install\n```\n\nPerform a build:\n```cmd\nnpm run build\n```\n\nThe final build is located in the `dist/` folder.\n\n---\n\nCopyright 2019-2021 Nextapps GmbH\u003cbr\u003e\nReleased under the \u003ca href=\"http://www.apache.org/licenses/LICENSE-2.0.html\" target=\"_blank\"\u003eApache 2.0 License\u003c/a\u003e\u003cbr\u003e\n","funding_links":[],"categories":["JavaScript","Images"],"sub_categories":["Lightbox gallery"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Fspotlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextapps-de%2Fspotlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Fspotlight/lists"}