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)
Installation After 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.
Setup The 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> Markup Next 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:
for displaying content different from images you need to specify a player with "player=<player>" (see the table below): <a href="image1.jpg" class="hexbox" rel="group=holidays;player=image">my image 1</a> <a href="video1.flv" class="hexbox" rel="group=holidays;player=flv">my flv 1</a> <a href="http://www.site1.com" class="hexbox" rel="group=holidays;player=iframe">my site 1</a> <a href="flash1.swf" class="hexbox" rel="group=holidays;player=flash">my flash 1</a>
In the "rel" attribute you can separe parameters using the char you want ;-)
Parameter Name
Values
Description
player
<image|flash|flv|iframe>
This is the Hexbox Player The default is "image"
group
<group name>
This is the group name
width
<width>
The width (in pixels) of the opened dialog
height
<height>
The height (in pixels) of the opened dialog
flashver
<8,9,10,...>
The Minimum flash version required (for flash content, 8 is default)>
You can specify the same options using Javascript code in this way:
