Highlighter Lightbox

Highlighter Lightbox JS is an advanced integration script able to show highlighted PDF in a lightbox, without user leaving the current page. The script has no external dependencies.


The script is distributed with the Highlighter Server and can be referenced at /js/pdf-highlighter-lightbox.js URI of your Highlighter installation.

To enable PDF highlighting, include and initialize the script:

<link rel="stylesheet" href="/highlighter/js/pdf-highlighter-lightbox.css">
<script src="/highlighter/js/pdf-highlighter-lightbox.js"></script>
highlighterUrl: '/highlighter/',
dynamicAttach: true

In the example above, we assume that proxying to Highlighter was setup at /highlighter path.

Without other configuration parameters present, the script will attach to all PDF links in the web page and use text found in the first input box in the page as the query for highlighting.


The script adds pdfHighlighter object to the page with the following methods available:

  • initPdfHighlighterLightbox โ€“ Initialization function accepting configuration object with options listed in the next section.
  • initOnDOMContentLoaded โ€“ As above except that initialization is performed after the document is loaded.

Configuration Object Options#

The following configuration options are available:

  • highlighterUrl: string โ€“ PDF Highlighter service location.
  • documentLinkSelector: string โ€“ CSS selector for links that should be handled by PDF Highlighter. Defaults to: a[href*='.pdf'], a[href*='.PDF']
  • querySelector: string|function โ€“ CSS selector for a page element containing search query or a function that will return it. If the selector matches a text input element, its value will be used; otherwise, element text is used instead. If more than one element is found, the first matching element with text will be used. If not provided, the script will lookup for a "query" data attribute (see below).
  • updateHref: boolean โ€“ By default, the script attaches click handler to found PDF links. Set this option to true if you want it the script to update the element's href attribute instead.
  • viewer: object โ€“ The viewer customization options. The PDF document will always open in the web based viewer with the highlighted hits loaded dynamically. The viewer object may also contain the "url" field with a custom location of the Highlighter Lightbox to use.
  • dynamicAttach: boolean โ€“ When true, the script will listen for DOM changes and attach to any dynamically added PDF link.
  • queryCachingTime: int โ€“ Query caching time in minutes. Use it if the page containing query does not link PDF directly.
  • overridePdfJS: boolean - If set to true, document links which are recognized as PDF.js viewer links will be overridden to open Highlighting PDF Viewer.
  • useTargetAttr: boolean โ€“ When true (default), if PDF link has the target attribute, the PDF will open in the target window instead in the lightbox.

The Lightbox also supports options and data attibutes of Highlighter JS.