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.
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.
Download the latest version of ChillBox below.
Single image without title. *
Over sized image with title. *
Single image with title. *
Group images without titles. *
Group images with titles. *
* Click the images above to see ChillBox in action.
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 donwnload 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.
Step 3 - Download ChillBox
Downlaod 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.
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.
Result: Click me
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.
Result:
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.
Result:
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.
Result:
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 | Desciption |
| 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 / prvious 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 |
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.
Result:
Can I use the script in a commercial website?
ChillBox is licensed under a Creative Commons Attribution 3.0 Unported License. For correct attribution, all that is required is that you leave the details and link at the top of the chillbox-packed.js (Javascript File). A html link would be appreciated, but it is not required.
What versions of jQuery will ChillBox work with?
ChillBox has been tested on all jQuery Versions 1.4.3 to 1.6.4, previous versions may work but not as intended.
Version 1.3 - New features for multiple ChillBox image sets with different customisations and shadow, images click functions and more.
Version 1.2 - Group function and more custom functions added to rename buttons, closes method, keyboard keys and more.
Version 1.1 - Added customisable functions to change colour of close button and hover colour function added.
Version 1.0 - Original release of ChillBox.
If you are feeling generous, consider a donation. Any and all PayPal donations are much appreciated and help towards improving and the development of newer versions. Many thanks.
For troubleshooting, feature requests, and general help, send me a message by using the enquiry form on my contact page. Make sure to include details on your browser, operating system, ChillBox version, and a link (or relevant code). Alternatively you can email mail me by clicking here.
