Logo Help Center

Elvis 5 JavaScript library - PreviewLightbox

Elvis 5 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 Elvis:
  • images
  • video
  • HTML
  • Navigate back and forth between multiple previews.

The PreviewLightbox API

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.


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


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


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 it's 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.

Was this article helpful?
0 out of 0 found this helpful / Created: / Updated:
Have more questions? Submit a request


Please sign in to leave a comment.