HL-Box documentation
HL-box JavaScript
Installation
The easier way to install is to unzip and open the example folder. It already contains all necessary files in the right positions. The file example.html is an html file with the right header inclusion tags for all necessary files (javascripts and css). In the body there's the code to activate both HL-box and Slimbox. If you don't want to install Slimbox, download the stand alone version and follow the same steps.
If you to install from scratch follow these steps:
1. unzip the right package (hl_box.zip or hlbox_stand_alone.zip) into your root folder
2. add to your page between <head> and </head> inclusion tags:
<link rel="stylesheet" href="css/hlbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/hlbox.js" ></script>
between body tags <body> </body>, in a position you choose, put the code to activate the button:
<div id="switch"> <a href="img/turn-on-lights.png" rel="hlbox"> <img src="img/turn-off-lights.png" alt="turn-off" /></a></div>
You can use the align="" parameter inside img tag for a better fit best into your content.
The icons are in the img folder. Of course you can change them, and for IE6 compatibility, you should have installed a png fixer in order to use transparent pngs. Otherwise choose the right path for those non-transparent legacy icons labeled as "legacy". You can style it as you prefer putting in your css a: div#switch {your styling here}
Highlight your content
Once finished installing when you hit the icon a dark overlay will cover the entire page. The next step is to assign a z-index>10 to those divs in your content you want to be highlighted, on top of the overlay.
To do so, simply style in your css those divs with a z-index and position value.
here below an example:
notes:
1. You must always declare a position relative or absolute to assign a z-index value.
2. If don't specify a background color or image only foreground will be put on top of overlay.
3. Be aware IE6 handles z-index in a quite different way than other browsers. In really complex layouts already using heavily z-index layering you could waste some time to dive into that different logic.
Once finished installing when you hit the icon a dark overlay will cover the entire page. The next step is to assign a z-index>10 to those divs in your content you want to be highlighted, on top of the overlay.
To do so, simply style in your css those divs with a z-index and position value.
here below an example:
div.highlight { margin: 10px auto 10px auto; padding: 10px; border: 1px solid #999999; background: #fff url(../images/your_image.jpg) repeat-x; position:relative; z-index:11; }
notes:
1. You must always declare a position relative or absolute to assign a z-index value.
2. If don't specify a background color or image only foreground will be put on top of overlay.
3. Be aware IE6 handles z-index in a quite different way than other browsers. In really complex layouts already using heavily z-index layering you could waste some time to dive into that different logic.
Activate Slimbox
To activate Slimbox plugin you need to put some code. You can find more exhaustive instructions in Slimbox documentation page
Below an example of use:
Obviously if you have installed the stand alone ver. it won't have any effect.
To activate Slimbox plugin you need to put some code. You can find more exhaustive instructions in Slimbox documentation page
Below an example of use:
linked trought some text: <a href="images/01.jpg" rel="lightbox[mygroup]" title="01" alt="01">some text here</a> linked trought a thumbnail: <a href="images/01.jpg" rel="lightbox[mygroup]" title="01" alt="01"> <img alt="01" src="images/01_thumb.jpg" title="01" /></a>
Obviously if you have installed the stand alone ver. it won't have any effect.
If you have any question ask in the support forum.
back to the download page or go to the joomla! plugin documentation page
