About boxplusx
boxplusx illustrates HTML visualization capabilities using plain JavaScript and CSS3.
Features:
- Designed for modern browsers, including Chrome, Edge, Firefox and Safari.
- Displays a wide range of content types, including images, video, PDF, external pages (iframe), etc.
- Supports captions; each content item can be assigned a title and a description, which can make use of HTML tags.
- Navigation with buttons, mouse, or keyboard (left and right arrow, HOME and END) or swipe.
- Quick-access navigation bar to jump to a particular image.
- Fit to browser window; oversized content is automatically downscaled.
- Simple API and out-of-the-box snippets how to get it working on a webpage.
- 100% CSS and pure JavaScript. No dependencies on third-party JavaScript libraries.
- Small network footprint.
How to use
Production
The following snippet imports minified boxplusx CSS and JavaScript files, compatible with all supported browsers:<!-- Style definitions -->
<link rel="stylesheet" type="text/css" href="engine/css/boxplusx.min.css" />
<!-- Minified script -->
<script type="text/javascript" src="engine/js/boxplusx.min.js" defer></script>
Debugging
The following snippet imports boxplusx CSS and JavaScript original source files:<!-- Style definitions -->
<link rel="stylesheet" type="text/css" href="engine/css/boxplusx.css" />
<!-- Uncompressed script compliant with ECMAScript 6 -->
<script type="text/javascript" src="engine/js/boxplusx.js" defer></script>
JavaScript code is written in ECMAScript 6, which may not be compatible with older browsers, such as Internet Explorer. When minified into production code, JavaScript is cross-compiled to ECMAScript 5, which even older browsers understand. A polyfill script helps if you need to debug in older browsers:
<!-- Polyfill definitions for ECMAScript 6 functions targeting old browsers -->
<script type="text/javascript">
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.write('<scr' + 'ipt src="engine/js/polyfill.js" defer><\/scr' + 'ipt>');
}
</script>
<!-- Uncompressed script compliant with ECMAScript 6 -->
<script type="text/javascript" src="engine/js/boxplusx.js" defer></script>
Examples
Standalone images
Image gallery
boxplusx includes an initialization script that runs when the page has loaded (or more precisely, when the page structure is available, i.e. DOMContentLoaded). This organizes all anchors that have the same rel attribute value into a gallery. (Attribute values that do not start with the string boxplusx- are ignored to let you opt out of this behavior for certain images.) When you click any item in the gallery, the pop-up window opens and lets you navigate in between images in the same gallery.Set custom parameters
Change any of the parameters in the table below to customize how the pop-up window for the above image gallery appears.
Usage from Joomla
The following sigplus activation code shows how to set boxplusx parameters if you choose boxplusx (with light or dark theme) as your lightbox pop-up window engine:
Usage from JavaScript
Video
The Not So Short Introduction to LATEX2ε
Notice how the URL has name=value parameters like view=Fit after the # sign, which are passed intact to the PDF reader, and let you customize how the PDF appears, see Parameters for Opening PDF Files for a full list.
External content
External content is shown in an HTML iframe. Use pseudo-parameters width and height in the URL to set a preferred width and height for your iframe, or make the pop-up window take all available browser window area with fullscreen.Example | Behavior |
---|---|
https://example.com?width=800&height=600 | Set preferred width to 800px and height to 600px with query string parameters. |
https://example.com#width=800&height=600 | Set preferred width to 800px and height to 600px with parameters in the HTML fragment (hash string). |
https://example.com#width=800&height=600&fullscreen=1 | In addition to preferred width and height, make the pop-up window take all available space. |
The following examples illustrate fullscreen=1 with various width and height pseudo-parameter values in the URL. Observe how aspect ratio (of width to height) is maintained as the lightbox pop-up window grows to occupy all available space.
- Wikipedia website with parameter list width=800&height=600&fullscreen=1
- Location on Google Maps with parameter list width=400&height=400&fullscreen=1
Inline content
Inline content is shown in the context of the current window, in an HTML div. You can pass parameters to boxplusx (such as preferred width and height) using the extended fragment identifier syntax (with a hash-bang): #element-name!key1=value1&key2=value2.- Short sample content from the same document
- Longer sample content from the same document
- Longer sample content with explicit width and height
Unavailable content
A special (resizable) image is shown if the content is not available. The image can be customized in CSS.JPEG image orientation
EXIF orientation is correctly identified for JPEG images, and the image is flipped and rotated as necessary with CSS transforms.How to use and contribute
boxplusx is hosted on Bitbucket, download or check out to start working or contribute.