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. Defaults to "input[type=search], input[type=text]".

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

  • checkStatus: boolean – When true, the script will check Highlighter's status endpoint to make sure it's running fine before attaching to PDF links.

  • apiKey: string – API key for the hosted PDF Highlighter.

  • resolveDocumentBase: boolean – When true (default), a relative document link will be resolved and sent to Highlighter as an absolute URL.

  • resolveXmlBase: boolean – The same as above but for Adobe highlights XML location.

  • sendAbsoluteUrlsToHighlighter: boolean – This option is a shortcut for setting both resolveDocumentBase and resolveXmlBase.

  • filterQuery: function(query) – Listener function used to filter query string before sending it to Highlighter.

  • queryCachingTime: int – Query caching time in minutes. Use it if the page containing query does not link PDF directly.

  • updateHighlightingParams: function(data) – Listener function that can amend highlighting request parameters.

  • onHighlightingResult: function(result, element) – Listener for highlighting response JSON object. If it returns false, further processing (e.g. document open) will be prevented.

  • inlinePdfViewerAttr: object – If a PDF link has "inlinePdfViewer" class, it will be replaced with an inline PDF viewer added as an iframe. Any properties of this object will be added to the iframe as attributes.

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

Supported Data Attributes

Data attributes generally correspond to the web service request parameters:

  • href - The script checks the element's href attribute first, but, if not set, it will check the data-href attribute as well. The value will be sent to the service as uri parameter.

  • xml - For compatibility with existing applications that use Adobe PDF highlight files, the plugin will first lookup for xml file reference in href fragment and query string. If not found, it will check the xml data attribute presence as well.

  • query

  • language

  • alt-url

  • view-url - PDF document location to use in highlighting PDF viewer instead of href.

  • add-navigation

  • navigation

  • open-first-hl-page

  • remove-pages-without-matches

  • neighbour-pages

For detailed parameters description, see Highlighter API documentation.

Parameters common to multiple elements can be specified on a common parent. See them in action at https://api.highlight4.me/examples/

comments powered by Disqus