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.

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

Same result as above but as code:

This feature will improve overall performance of your page/application a lot, especially for mobile devices and bad internet connections.

You can declare a set of the same image in multiple dimensions and quality. Spotlight will pick the optimal version by taking into account:

1. The browsers max resolution
2. The device screen pixel ratio
3. The available internet connection bandwidth

Save your images in several sizes and resolutions and assign the longest dimension of both sides (width, height) like this:

When clicked on it Spotlight will pick the optimum choice.

This markup completely falls back to standard browser behavior when something goes wrong, also it is SEO friendly.

Same result as above but as code:

All data-attributes for markup a video is inherited by the attributes of a standard video element.

Considering you want to add a standard video element like this as a slide:

You need a markup like this to represent the video from above:

Same result as above but as code:

You can add custom controls to the header toolbar by API usage only.

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

1. Initialize the Spotlight gallery manually once to make the template available for extensions:

The gallery automatically initialize when first time open, so you can also add custom control inside the "onshow" callback.

2. Add the custom control and pass a click handler (returns the button element):

3. Define a CSS class to style your button:

Important: custom control classes gets always css-prefixed by "spl-" automatically to prevent classname collision!

Removing an added control:

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

Providing a gallery as normal and add a custom attribute "like", which stores the current like state of each image.

Define a CSS class to style your button, e.g.:

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

We need some variables to store some state which is used in the callback handler later:

Implement a click event handler of the like button, e.g.:

The keyword this corresponds to the current clicked element (the like icon in this example).

Finally, create the gallery and provide some callbacks to insert the custom control dynamically:

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

Initialize the Spotlight gallery once:

Add the custom control once:

Open the gallery and just provide an "onchange" handler:

That is the same custom like button from above example, just shorter but also non-dynamically added for all gallery instances.

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.

You can use this feature completely by markup by providing a query selector as "src" which points to a node in your document.

This workaround is also compatible if you are using server-side rendering.

You can use a hidden backstore optionally which holds the fragments to be inserted as a slide, e.g.:

Provide a dom query selector as "src" which points to a node in your document:

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

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

You can create your own fragments/templates and add the root node directly as "src":

Or use your preferred templating engine and add the root node as "src":

Define a gallery group as follows:

Show gallery with default options:

Show gallery with custom options:

Close gallery:

Next slide:

Previous slide:

Goto slide:

Zoom to:

Toggle theme:

Set theme:

Toggle fullscreen:

Set fullscreen:

Toggle autofit:

Set autofit:

Toggle menu:

Set menu:

Download current image:

You can also import any of the Spotlight methods just as you need:

Modern build tools will apply dead code elimination when just importing methods your application needs.

To add custom styling just override CSS classes accordingly:

Customize builtin themes

Use the same classes as above:

Create New Themes

Define styles, e.g. for the custom theme name "my-theme":

Apply custom theme via markdown:

Or apply custom theme via API:

You could also set themes per image separately:

If you like to apply styles independently besides themes you can simply do that by adding a class during initialization:

In your stylesheet you can apply you custom styles, .e.g.:

Important: The style class for a custom animation describes the hidden state of an image.

You can define your own custom animation by:

1. Define the styles in default state (when image is shown), e.g.:

2. Define styles for the hidden state of the transition by adding a custom classname:

Apply custom animation via markdown:

Or apply custom animation via API:

You could also set animations per image separately:

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

Then, add your classname (context selector) to your CSS for the visible state of the animation:

Now you can assign different animations to each gallery.

Go to the root directory of Spotlight and run:

Perform a build:

The final build is located in the dist/ folder.

---

Copyright 2019-2021 Nextapps GmbH
Released under the Apache 2.0 License