JS Tutorial
- Overview
- Documents
What is ChillBox ?
Inspired by Lokesh Dhakar's Lightbox, ChillBox is a simple, unobtrusive script used to overlay images on top of the current page. ChillBox has been developed using the jQuery Framework and is available to download from this page.
Why use ChillBox ?
Unlike other lightbox versions, ChillBox does not require the use of images for buttons and is fully rendered using jQuery.
ChillBox is fully customisable and you can change the range of options to create a unique version of ChillBox that works with a website theme.
ChillBox is fully compatible with web browsers Internet Explorer, Firefox, Opera, Safari and Google Chrome.
How to install ChillBox
To install ChillBox on your site all you require is the latest version of ChillBox which you can download above and the latest version of the jQuery Framework which you can download by clicking here. Simply follow the steps below and see how easy it is to install ChillBox on your site.
Step 1 - Open or Create a new web document.
Open your web page that you would like to add to ChillBox to or create a new HTML document.
Step 2 - Download jQuery
ChillBox is a jQuery Plugin, therefore you will require jQuery for it to work. Simply download the latest version from the jQuery Website and save it to your scripts folder.
Alternatively you can add the following script to your head section of your web page which is what we are going to use in this example.
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head>
Step 3 - Download ChillBox
Download ChillBox by clicking the link above and save it to your scripts folder in this example we are using 'js' as our script folder and add it to the head section of your page.
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/chillbox-packed.js"></script> </head>
Step 4 - Add ChillBox to a single link
Now we are ready to add ChillBox to our html code. To do this create a anchor link attribute with the path to the image that you wish to open up using ChillBox. Now add the rel attribute next with the value of ChillBox and then add a title attribute with the value of your image title.
We then need to tell the ChillBox plugin what to apply its effects to. We do this by adding a bit of script at the top of the head section that says apply ChillBox to rel value equal to ChillBox.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBox]').ChillBox();
});
</script>
</head>
<body>
<a href="images/gallery/the-mint.jpg" rel="ChillBox" title="The Mint Arcade - Great Yarmouth">Click me</a>
</body>
Step 5 - Replace link text with a thumbnail image.
To add a thumbnail simply replace the link text with an image which has a path to the thumbnail of the larger image that you want to open using ChillBox.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBox]').ChillBox();
});
</script>
</head>
<body>
<a href="images/gallery/the-mint.jpg" rel="ChillBox" title="The Mint Arcade - Great Yarmouth"><img src="images/gallery/the-mint-thumb.jpg" alt="Image of the Mint Arcade in Great Yarmouth" /></a>
</body>
Step 6 - Group images together using the Group function
To group images together replace rel="ChillBox" with rel="ChillBoxGroup" and add this to the links of images that you want to group together.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBoxGroup]').ChillBox();
});
</script>
</head>
<body>
<a href="images/gallery/a47-new-acle-road.jpg" rel="ChillBoxGroup" title="Corsa VXR - Acle New Road">
<img src="images/gallery/a47-new-acle-road-thumb.jpg" alt="Image of a Corsa VXR on Acle New Road" /></a>
<a href="images/gallery/a47-acle.jpg" rel="ChillBoxGroup" title="Traffic - A47 Acle">
<img src="images/gallery/a47-acle-thumb.jpg" alt="Image of Traffic - A47 Acle" /></a>
<a href="images/gallery/wellington-pier.jpg" rel="ChillBoxGroup" title="Wellington pier - Great Yarmouth">
<img src="images/gallery/wellington-pier-thumb.jpg" alt="Image of the Wellington pier in Great Yarmouth" /></a>
</body>
Step 7 - Adding more Groups
Adding more Groups is simple, simply create rel="ChillBoxGroup" followed by a number like so rel="ChillBoxGroup1", rel="ChillBoxGroup2", rel="ChillBoxGroup3" etc. for each group.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBoxGroup1],[rel$=ChillBoxGroup2]').ChillBox();
});
</script>
</head>
<body>
<a href="images/gallery/a47-new-acle-road.jpg" rel="ChillBoxGroup1" title="Corsa VXR - Acle New Road">
<img src="images/gallery/a47-new-acle-road-thumb.jpg" alt="Image of a Corsa VXR on Acle New Road" /></a>
<a href="images/gallery/a47-acle.jpg" rel="ChillBoxGroup1" title="Traffic - A47 Acle">
<img src="images/gallery/a47-acle-thumb.jpg" alt="Image of Traffic - A47 Acle" /></a>
<a href="images/gallery/wellington-pier.jpg" rel="ChillBoxGroup1" title="Wellington pier - Great Yarmouth">
<img src="images/gallery/wellington-pier-thumb.jpg" alt="Image of the Wellington pier in Great Yarmouth" /></a>
<br /><br />
<a href="images/gallery/corsa-vxr-dash.jpg" rel="ChillBoxGroup2" title="Corsa VXR - Dashboard">
<img src="images/gallery/corsa-vxr-dash-thumb.jpg" alt="Image of a Corsa VXR - Dashboard" /></a>
<a href="images/gallery/vxr-dash-xmas-tree.jpg" rel="ChillBoxGroup2" title="Corsa VXR - Dashboard">
<img src="images/gallery/vxr-dash-xmas-tree-thumb.jpg" alt="Image of Corsa VXR - Dashboard" /></a>
<a href="images/gallery/the-mint.jpg" rel="ChillBoxGroup2" title="The Mint Arcade - Great Yarmouth">
<img src="images/gallery/the-mint-thumb.jpg" alt="Image of the the Mint Arcade - Great Yarmouth" /></a>
</body>
ChillBox Options
ChillBox has a many options allowing you to fully customise your own version that suits your website. You can change the options at the top of the ChillBox script or by passing the value to the plugin like so: $('[rel$=ChillBox]').ChillBox({option:'value'});
| Option | Value Range | Default Value | Description |
| OLO | 0 - 100 | 75 | Overlay opacity in (%) |
| OLC | #000000 - #FFFFFF | #000000 | Background overlay colour using (hex colour codes) |
| LTC | #000000 - #FFFFFF | #FFFFFF | Loading text colour using (hex colour codes) |
| CBBC | #000000 - #FFFFFF | #000000 | ChillBox background colour using (hex colour codes) |
| CBTC | #000000 - #FFFFFF | #FFFFFF | ChillBox title and counter colour using (hex colour codes) |
| BCCB | #000000 - #FFFFFF | #000000 | ChillBox border and image border colour using (hex colour codes) |
| BC | #000000 - #FFFFFF | #000000 | ChillBox button background colour using (hex colour codes) |
| BTC | #000000 - #FFFFFF | #FFFFFF | ChillBox button text colour using (hex colour codes) |
| BBCH | #000000 - #FFFFFF | #007EFF | ChillBox button text colour on hover using (hex colour codes) |
| BTS | 10 - 16 | 11 | ChillBox button text size in (px) |
| CBTS | 10 - 16 | 12 | ChillBox title text size in (px) |
| LTS | 10 - 22 | 12 | Loading text size in (px) |
| LT | text value | Loading... | Loading text value |
| FIOL | 0 - 5000 | 250 | Overlay fade in time (milliseconds) |
| CBFI | 0 - 5000 | 400 | ChillBox fade in time time (milliseconds) |
| CBFO | 0 - 5000 | 400 | ChillBox and Overlay fade out time time (milliseconds) |
| CLSB | text value | X | ChillBox close button text value |
| PREV | text value | ◄ (◄) | ChillBox previous button text value |
| NEXT | text value | ► (►) | ChillBox next button text value |
| EKBB | true / false | true | Enable keyboard buttons, (N / >) - Next, (P / <) - Prev, (ESC / C / X) - Close |
| CBCC | close / prev / next | ChillBox click image function | |
| OLCC | true / false | true | Close ChillBox by clicking the overlay |
| LOOP | true / false | false | Enable ChillBox next / previous image loop |
| ECBC | true / false | true | Show ChillBoxGroup image counter |
| ST | true / false | true | Show ChillBox titles |
| SHAD | true / false | true | Show ChillBox shadow |
| CBFF | CSS font-family property | Arial, Helvetica, sans-serif | Font family |
Applying options to different groups
In this example we are going to change the ChillBox options for the second group ( rel="ChillBoxGroup2" ) making the ChillBox colour white, the title and counter black and border colour dark grey. The first group ( rel="ChillBoxGroup1" ) will stay as the default options.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBoxGroup1]').ChillBox();
$('[rel$=ChillBoxGroup2]').ChillBox({CBBC:'#FFFFFF',CBTC:'#000000',BCCB:'#666666'});
});
</script>
</head>
<body>
<a href="images/gallery/a47-new-acle-road.jpg" rel="ChillBoxGroup1" title="Corsa VXR - Acle New Road">
<img src="images/gallery/a47-new-acle-road-thumb.jpg" alt="Image of a Corsa VXR on Acle New Road" /></a>
<a href="images/gallery/a47-acle.jpg" rel="ChillBoxGroup1" title="Traffic - A47 Acle">
<img src="images/gallery/a47-acle-thumb.jpg" alt="Image of Traffic - A47 Acle" /></a>
<a href="images/gallery/wellington-pier.jpg" rel="ChillBoxGroup1" title="Wellington pier - Great Yarmouth">
<img src="images/gallery/wellington-pier-thumb.jpg" alt="Image of the Wellington pier in Great Yarmouth" /></a>
<br /><br />
<a href="images/gallery/corsa-vxr-dash.jpg" rel="ChillBoxGroup2" title="Corsa VXR - Dashboard">
<img src="images/gallery/corsa-vxr-dash-thumb.jpg" alt="Image of a Corsa VXR - Dashboard" /></a>
<a href="images/gallery/vxr-dash-xmas-tree.jpg" rel="ChillBoxGroup2" title="Corsa VXR - Dashboard">
<img src="images/gallery/vxr-dash-xmas-tree-thumb.jpg" alt="Image of Corsa VXR - Dashboard" /></a>
<a href="images/gallery/the-mint.jpg" rel="ChillBoxGroup2" title="The Mint Arcade - Great Yarmouth">
<img src="images/gallery/the-mint-thumb.jpg" alt="Image of the the Mint Arcade - Great Yarmouth" /></a>
</body>
