<p></p> <h1 align="center"><img 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"><p></p></h1> <h3>Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.</h3>

<a href="https://nextapps-de.github.io/spotlight/">Demo</a> • <a href="#started">Getting Started</a> • <a href="#groups">Gallery Groups</a> • <a href="#options">Options</a> • <a href="#styling">Styling</a> • <a href="#api">API</a> • <a href="CHANGELOG.md">Changelog</a>

Whats new in 0.7.0?

The new version includes tons of fixes, new features and improvements which was collected over the last two years. Read the <a href="CHANGELOG.md">Changelog</a> to get all new features.

<h3>Live Demo:<p></p><a href="https://nextapps-de.github.io/spotlight/">https://nextapps-de.github.io/spotlight/ </a></h3>

Spotlight runs out of the box:

No additional Javascript coding
No additional HTML snippets
No additional CSS resources
No additional icons/assets
No additional handling of dynamic content and event listener

Features

Video Support
Mounting HTML node fragments as slides (you can add just everything as a slide!)
Gallery groups:
- group images to specific galleries
- group options inheritance
Toolbar & Gallery tools:
- Fullscreen
- Zoom in/out
- Toggle resize
- Switch theme
- Autoslide
- Download
- Progress Bar
- Page
- Title (also inherits from image "alt"-attribute)
- Description
- Customizable button
Adaptive responsive images (by viewport size, pixel ratio and available internet bandwidth)
Auto-fit images and videos (as "contain" or as "cover")
Custom Controls
Fully configurable via markup
Loading Spinner
Smart Preloading (prefetch next image including cancellation)
Customize via standard options
Simply customize via markup (data-attributes)
Built-in animations
Custom themes
Custom animations
Supported controls:
- Keyboard
- Touch
- Mouse (Move + Wheel)
Back-Button (Android)
Callbacks (onclick, onshow, onclose, onchange)
Global API for programmatic usage

Technical properties:

Outstanding performance
Memory optimized, tiny footprint, fully cleans up
Event capturing (just one single global event listener)
Bind additional global event listener dynamically:
- install when gallery opens
- cleanup when gallery was closed
No dependencies, no jQuery
Fully Responsive
Touch-friendly mobile support
Super-lightweight, all in all just 9kb gzip (js + css + html + icons)
Support for ES6 module system

Pending Feature Suggestions:

Inline Gallery
Pinch Zoom Support
2-Panel-Paging Strategy
Swipe down to close

Getting Started

Get Latest Stable Build (Recommended):

<table> <tr> <td colspan=3"> <b><u>Bundle:</u></b> (all assets bundled into one single file: js + css + html + icons) </td> </tr> <tr> <td>spotlight.bundle.js</td> <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.8/dist/spotlight.bundle.js" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/spotlight.bundle.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/spotlight.bundle.js</a></td> </tr> <tr> <td colspan=3"> <br><b><u>Non-Bundled:</u></b> (js and css are separated, css includes icons as base64) </td> </tr> <tr> <td>spotlight.min.js</td> <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.8/dist/js/spotlight.min.js" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/js/spotlight.min.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/js/spotlight.min.js</a></td> </tr> <tr></tr> <tr> <td>spotlight.min.css</td> <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.8/dist/css/spotlight.min.css" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/css/spotlight.min.css" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/css/spotlight.min.css</a></td> </tr> <tr> <td colspan=3"> <br><b><u>Sources:</u></b> (not bundled at all, images as url to original resources) </td> </tr> <tr> <td>ES6 Modules</td> <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.8/src/js" target="_blank">Download</a></td> <td>The <i>/src/js</i> folder of this Github repository</td> </tr> <tr></tr> <tr> <td>LESS Files (source)</td> <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.8/src/css" target="_blank">Download</a></td> <td>The <i>/src/css</i> folder of this Github repository</td> </tr> <tr></tr> <tr> <td>spotlight.css (compiled)</td> <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.8/src/css/spotlight.css" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/src/css/spotlight.css" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/src/css/spotlight.css</a></td> </tr> <tr></tr> <tr> <td>src.zip</td> <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.8/dist" target="_blank">Download</a></td> <td>Download all source files including image original resources.</td> </tr> </table>

Get Latest (NPM):

npm install spotlight.js

Get Latest Nightly (Do not use for production!):

Just exchange the version number from the URLs above with "master", e.g.: "/spotlight/0.7.8/dist/" into "/spotlight/master/dist".

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).

Use Bundled Version

The bundled version includes all assets like js, css, html and icon images as base64.

<html>
<head>
    <script src="spotlight.bundle.js"></script>
</head>
<body></body>
</html>

Use Non-Bundled Version

The non-bundled version needs to load js and css separately (css also includes icons as base64).

<html>
<head>
    <link rel="stylesheet" href="spotlight.min.css">
    <script src="spotlight.min.js"></script>
</head>
<body></body>
</html>

Preload Library / Async Load

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.

Just 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.

<html>
<head>
    <title></title>
    <link rel="preload" href="spotlight.bundle.js" as="script">
</head>
<body>
    <!--
    
    HTML CONTENT
    
    -->
    <!-- BOTTOM OF BODY -->
    <script src="spotlight.bundle.js" defer></script>
    <!-- YOUR SCRIPT -->
    <script src="my-script.js" defer></script>
</body>
</html>

You can also load the non-bundled version in the same way.

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.

ES6 Modules

The ES6 modules are located in src/js/. You need to load the stylesheet file explicitly (includes icons as base64).

<head>
    <link rel="stylesheet" href="dist/css/spotlight.min.css">
</head>

<script type="module">
  import Spotlight from "./src/js/spotlight.js";
</script>

You can also load modules via CDN, e.g.:

<script type="module">
  import Spotlight from "https://unpkg.com/spotlight@0.7.8/src/js/spotlight.js";
</script>

The ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.

Basic Usage (Markup)

Anchor + Images

The 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.

Just add the class spotlight to an anchor element accordingly, e.g.:

<a class="spotlight" href="img1.jpg">
    <img src="thumb1.jpg">
</a>
<a class="spotlight" href="img2.jpg">
    <img src="thumb2.jpg">
</a>
<a class="spotlight" href="img3.jpg">
    <img src="thumb3.jpg">
</a>

This also works with dynamically loaded content. There is no need to inject listeners on new elements. Instead, Spotlight make use of global event capturing.

<!--Alternatively you can also use the <a href="#api">

Spotlight

Install / Use

README