Hexbox is a web-based media viewer application made by the Hexagora Team that supports many of the web's most popular media publishing formats. Hexbox has been written entirely in JavaScript and CSS, is highly customizable and available under the MIT license, so free for all. Using Hexbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Hexbox is a JQuery plugin (requires JQuery 1.4.2+).

Download

If you want to use HexBox extensions from Dynamic HTML Editor simply download them using the "Check for Updates" dialog in the program

If you want to manually setup your pages download the package here (3,8 MB, includes files for HTML4 and for HTML5)

Demo (click on the thumbnails to open HexBox)

Hexbox for single images

Hexbox for single links

Hexbox for video

(flash)

(flv)

Hexbox with navigation

Usage

You can use the HexBox directly from Dynamic HTML Editor by drawing its extensions on your page.In order to install HexBox simply search for "Additional Components" from the program

Manual Usage (without Dynamic HTML Editor, using HTML code)

InstallationAfter you download a copy of the code, decompress the archive (unzip it) and upload the entire folder to your web server. The exact location is not important since HexBox will automatically detect where it is installed when it runs. However, it is important that you keep all of the files together. After you have uploaded the code to your server, simply link to the JavaScript and CSS files as described below.

SetupThe simplest way to set up HexBox is to include the JavaScript and CSS files in the <head> of your document (web page), like this:

<link rel="stylesheet" type="text/css" href="hexbox/hexbox.min.css"><script type="text/javascript" src="hexbox/jquery-1.4.2.min.js"></script><script type="text/javascript" src="hexbox/jquery.hexbox.min.js"></script>If you want to be able to play Flash and/or FLV files you need also to include this (optional):

<script type="text/javascript" src="hexbox/swfobject.js"></script>MarkupNext you need to tell HexBox which links you want it to open. The simplest way to do this is through your HTML markup.

You can simply add a custom class to your <a href=''> tag so in the next step you'll be able to select and setup elements with HexBox.For example you can assign a dummy class "hexbox" to each link you need (the "hexbox" class doesn't exist):

<script language="javascript" type="text/javascript"><!--jQuery(function(){ $("#link1, #link2, #link3").hexbox();});//--></script>You can use many other ways; you can also call ".hexbox()" every time you want to add a new link to the list:

<script language="javascript" type="text/javascript"><!--jQuery(function(){ $("#link1).hexbox(); $("#link2).hexbox(); $("#link3).hexbox();});//--></script>If you would like to display a title for your image, simply add a "title" attribute to the link: