``` ## Spotlight API Also you can programmatically use Spotlight via the library API. This way does not require any dependant HTML elements (e.g. the classname "spotlight"). Define a gallery group as follows: ```js var gallery = [{ title: "Image 1", description: "This is a description.", src: "gallery/london-1758181.jpg" },{ title: "Image 2", description: "This is a description.", src: "gallery/sea-1975403.jpg" },{ title: "Image 3", description: "This is a description.", src: "gallery/newport-beach-2089906.jpg" }]; ``` Show gallery with default options: ```js Spotlight.show(gallery); ``` Show gallery with custom options: ```js Spotlight.show(gallery, { index: 2, theme: "white", autohide: false, control: ["autofit", "zoom"] }); ``` Close gallery: ```js Spotlight.close(); ``` Next slide: ```js Spotlight.next(); ``` Previous slide: ```js Spotlight.prev(); ``` Goto slide: ```js Spotlight.goto(3); ``` Zoom to: ```js Spotlight.zoom(1.5); ``` Toggle theme: ```js Spotlight.theme(); ``` Set theme: ```js Spotlight.theme("white"); ``` ```js Spotlight.theme("dark"); ``` Toggle fullscreen: ```js Spotlight.fullscreen(); ``` Set fullscreen: ```js Spotlight.fullscreen(true); ``` ```js Spotlight.fullscreen(false); ``` Toggle autofit: ```js Spotlight.autofit(); ``` Set autofit: ```js Spotlight.autofit(true); ``` ```js Spotlight.autofit(false); ``` Toggle menu: ```js Spotlight.menu(); ``` Set menu: ```js Spotlight.menu(true); ``` ```js Spotlight.menu(false); ``` __Example ES6:__ ```js import Spotlight from "./spotlight.js"; Spotlight.show( [ /* Gallery */ ], { /* Options */ } ); ``` > __Note:__ You may need to perform `npm run build` initially to make pre-compiled files available. ## Custom Styling To add custom styling just override CSS classes accordingly: ```css #spotlight { /* font styles, background */ } ``` ```css #spotlight .title{ /* image title */ } ``` ```css #spotlight .description{ /* image description */ } ``` ```css #spotlight .page{ /* current page */ } ``` ```css #spotlight .fullscreen{ /* button fullscreen */ } ``` ```css #spotlight .autofit{ /* button autofit */ } ``` ```css #spotlight .zoom-out{ /* button zoom out */ } ``` ```css #spotlight .zoom-in{ /* button zoom in */ } ``` ```css #spotlight .theme{ /* button theme */ } ``` ```css #spotlight .player{ /* button autoplay */ } ``` ```css #spotlight .close{ /* button close */ } ``` ```css #spotlight .arrow-left{ /* button arrow left */ } ``` ```css #spotlight .arrow-right{ /* button arrow right */ } ``` ## Themes __Customize builtin themes__ Use the same classes as above: ```css #spotlight.white .title{ /* image title in white theme */ } ``` ```css #spotlight.dark{ /* main background in dark theme */ } ``` __Create New Themes__ Define styles, e.g. for the custom theme name "my-theme": ```css #spotlight.my-theme .title{ /* image title in custom theme */ } #spotlight.my-theme{ /* main background in custom theme */ } ``` Apply custom theme via markdown: ```html ``` Or apply custom theme via API: ```js Spotlight.show([ /* Gallery */ ],{ theme: "my-theme" }); ``` ## Custom Animations > When you pass a custom animation, all other ambiguous animation settings will be overridden (also when mixed with built-ins). > The style class for a custom animation describes the __hidden state__ of an image. You can define your own custom animation by: 1. Extending the default styles (when image is shown) and corresponding transitions as follows: ```css #spotlight .scene img{ filter: grayscale(0); transition: filter 1s ease-out, opacity 0.5s ease-out; } ``` 2. Providing styles for the __hidden state__ of the transition by adding a custom animation name as a class: ```css #spotlight .scene img.my-animation{ opacity: 0 !important; filter: grayscale(1); } ``` Apply custom animation via markdown: ```html ``` Or apply custom animation via API: ```js Spotlight.show([ /* Gallery */ ],{ animation: "my-animation" }); ``` ## Preload Library / Async Load > If you like to override css classes for custom styling you may need to add ___!important___ flag to the css property value. ```html ``` Initialize library manually (once): ```js Spotlight.init(); ``` When using Spotlight exclusively through the API it is recommended to follow this practice. But there are some important facts you might need to know: 1. When loading the library before loading other stylesheets (which modifies the Spotlight default theme) you do not have to add a "!important" flag to the styles. 2. When using Spotlight with anchors it is recommended to load the library in the head section of the document to prevent executing the default anchor behavior when the user has clicked during page load. 3. In rare situations it also 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. ## Custom Builds > __Note:__ You can modify all source files e.g. stylesheets, template and also the icon files located in _/src/img/_. Providing a more handy way to pass custom icons is coming soon. Perform a full build: ```bash npm run build ``` The destination folder of the build is: _/dist/_ --- Copyright 2019 Nextapps GmbH
Released under the Apache 2.0 License