About boxplusx

boxplusx illustrates HTML visualization capabilities using plain JavaScript and CSS3.

Features:

boxplusx is also integrated into the sigplus Joomla extension available in the Joomla Extensions Directory. If you use the Joomla content management system, you might want to take a look at how to set custom gallery parameters in your sigplus activation tag.

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

Sample image

Sample image 1 Sample image 2 Sample image 3 Sample image 4

Sample image 4 Sample image 5 Sample image 6 Sample image 7 Sample image 8 Sample image 9 Sample image 10 Sample image 11 Sample image 12
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.

Change any of the parameters in the table below to customize how the pop-up window for the above image gallery appears.

ms

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

Sample QuickTime video Sample ogg video Sample YouTube video

PDF

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.

Wikipedia Map of Budapest University of Technology and Economics, and surrounding area

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.

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. Inline content for these elements has been embedded in this page, using CSS display: none, a technique you can also apply.

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.
2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

How to use and contribute

boxplusx is hosted on Bitbucket, download or check out to start working or contribute.

First name:
Last name:
Male Female
Password:
I have a bike
I have a car

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis quam felis. Mauris et tellus eu ante condimentum elementum sed a ipsum. Ut congue ultricies justo. Integer eget dolor ac metus faucibus convallis. Duis et libero dui. Cras at auctor mauris. Proin dapibus nisi id magna sodales at ultrices est rhoncus. Sed turpis felis, rutrum in congue et, aliquet in leo. Donec pretium augue luctus augue ultricies in interdum felis eleifend. Duis elit arcu, ultrices non scelerisque a, varius ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nibh nibh, iaculis eu porta in, ornare ut massa. Suspendisse nec lacus non mi cursus suscipit ac et arcu.

Morbi sagittis malesuada orci vitae consectetur. Etiam nec condimentum nulla. Aliquam adipiscing elementum semper. Donec ac mi aliquam dolor pretium mollis id eu urna. Phasellus ac metus vitae justo rhoncus adipiscing. Aliquam vehicula risus in leo commodo vulputate sodales non nisl. Maecenas vulputate tellus non tortor ultricies sed euismod lectus mollis. Nullam ut viverra lectus. Proin dapibus hendrerit tellus ut fermentum. Nulla sem odio, dictum eget facilisis bibendum, auctor ut nibh. Ut eu lorem quis enim consectetur aliquet. Nam dolor neque, eleifend pretium ornare cursus, ornare vel magna. Vestibulum faucibus, est eget vestibulum dictum, erat dolor cursus dolor, in convallis magna est eget enim. Proin luctus egestas lorem, eget scelerisque ligula posuere sed. Duis egestas lacus sapien. Nulla facilisi. In vitae sapien a nisi tincidunt volutpat.

Duis eu dolor nisi, a hendrerit diam. Aenean eget neque non lectus hendrerit consequat at eget elit. Nulla sed eros lectus, a ultrices augue. Donec in diam elementum dui imperdiet mollis. Aliquam erat volutpat. Quisque vitae dignissim lorem. Fusce eleifend condimentum consequat. Quisque quis pharetra augue. Morbi auctor nibh ut arcu blandit porta. Duis id justo nisi. Pellentesque vestibulum metus quis diam rhoncus in sodales erat vulputate. Cras vel dolor sem, in sodales ipsum. Maecenas ut turpis lectus, nec hendrerit nisl.

Proin id faucibus lectus. Pellentesque vehicula lectus quis erat facilisis accumsan. Nulla vehicula augue ac massa commodo laoreet. Sed eget odio at libero sagittis pharetra varius at est. Nullam iaculis nisi et mi lobortis vitae vestibulum mi semper. Curabitur tempus rhoncus augue, eu tempor tortor blandit non. Vivamus feugiat, nibh sit amet pellentesque pharetra, mi lorem sollicitudin sapien, in luctus massa quam non ligula. Aenean eleifend tellus quis lacus porttitor id tempor tortor dictum. Nullam facilisis lectus in erat vulputate vulputate. Aliquam et diam vel lacus auctor pharetra quis vitae ante. Aliquam vestibulum libero gravida nulla viverra aliquet. Mauris ut hendrerit nibh. Integer non risus urna. Aenean laoreet semper porta. Nullam cursus suscipit erat viverra tempus. Suspendisse lobortis dui sem.

Integer vel nisi massa, ut vehicula enim. Mauris tincidunt facilisis metus in eleifend. Ut iaculis malesuada metus, eu ornare risus commodo vitae. Donec id dolor nisl. Fusce varius imperdiet erat, ac varius nulla venenatis nec. In sed neque at ipsum rutrum cursus. Suspendisse id nulla leo, vitae euismod leo. Sed felis tellus, congue vitae luctus quis, cursus in dolor. Maecenas rutrum convallis mollis. Aliquam a velit eu mauris auctor aliquam. Sed faucibus diam a est hendrerit eu scelerisque neque imperdiet. Donec elit tellus, adipiscing eget pharetra id, lobortis non tellus.