Various

Inline Lightbox

It's as simple as linking to the corresponding video page.

Remote Lightbox

Just link to a page that contains a lightbox (we will look for ".js-lightbox--content")

If we can't find any "js-lightbox--content", we'll go for the child element of #main-content and display them in the lightbox. This is a fallback scenario and may lead to potential problems. (It's also against the concept of designated lightbox pages)

---

Other lightboxes (currently unused)

Single Image Lightbox

Image Gallery Lightbox

Just add a new attribute 'data-lightbox-group' to group together a couple of images.

This group feature now works with mixed lightbox types, as long as they have prev and next buttons (.js-lightbox--prev and .js-lightbox--next). Otherwise only key navigation will be possible.

Video Lightbox

It's as simple as linking to the corresponding video page.

The "js-load_more" link takes a few parameters:

href

The page to load from – should work normally if JS is turned off or user opens in a new tab.

data-target

Selector for the list container to be updated. (usually a "ul" or "ol")

data-source (optional)

Selector for the list container from which to get the new items. (by default equals the data-target)

data-update (optional)

A comma separated list of selectors of elements to be updated with the loaded page. Usually this is the "load more" link itself, because it will point to another page.

data-prevent-load (optional)

Boolean value. Set it to "true" to prevent the JS from handling the load (doing the ajax call). Instead listen for "load.load_more" Event and handle the ajax-call by yourself.

Multiselect - Standard

Multiselect - Filter