Assets Server JavaScript library - PreviewLightbox

This class shows a simple overlay over the page and displays the preview for a hit.

It provides the following features:

• Display preview in full browser window.
• Correctly display all preview types provided by Assets Server:
• images
• video
• HTML
• Navigate back and forth between multiple previews.

Main functions

show( <previewUrlOrHit> )

Show the preview of a single hit. You can either pass in a hit object (preferred), or just pass in the preview URL of a hit.

showGallery( hits, currentIndex )

Shows the previews for a set of hits. The preview at the specified index is displayed, and the user can navigate to the next and previous hits by clicking on right or left half of the preview.

Advanced functions

These functions are called by the PreviewLightbox internally while it is displayed. You can call them explicitly if you need to.

close()

Closes and hides the preview layer and stops any videos from playing.

next()

Shows the preview for the next hit when a 'gallery' is shown.

prev()

Shows the preview for the previous hit when a 'gallery' is shown.

How to use

var previewLightbox = new PreviewLightbox();

// Use preview lightbox to show preview when a thumbnail is clicked
hitRenderer.itemClick = function (hit, hitElement, hits, index) {
    previewLightbox.showGallery(hits, index);
};

Create a PreviewLightbox instance. Usually you only need to create one preview lightbox for a page. The preview lightbox will add its own HTML to the page to display its overlay and previews. Then call show or showGallery on the preview lightbox to activate it.

The preview lightbox has its own close button, so it should not be required to call the close() function yourself. When you click on the left or right side of a preview it automatically calls the prev() and next() functions.