Overview
Designed by Christopher Hill, and inspired by Lokesh Dhakar's Lightbox2, ChillBox is a JQuery Plugin is a simple and easy to install, unobtrusive script used to overlay images on top of the current page. It can be used for link anchor attributes. ChillBox has been tested with IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.
Example & Demonstration
Here are a few examples, simply click the attributes tosee ChillTip in action:-
Link Example
ChillBox is very easy to install and all you require is chillbox.js and the latest version of JQuery. Please follow the steps below which will walk you through how to install ChillBox onto your website
Download
How to install
Step One - Download ChillBox
Downlaod chillbox.js and place it in your javascript directory in this example we are using a directory called 'js'.
Step Two - 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 the 'js' directory.
Step Three - Add PlugIn & Framework to the head section
Now add the Jquery Framework and chillbox-packed.js to the head section of your web page. Now we should have something like below in our head section:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
</head>
Step Four - Add ChillBox to Links
Now we can now add ChillBox to our html code. To do this create a anchor link attribute. Then we we are going to add a rel="ChillBox" as we want the Chilltip to be applied to this link. Then add the title="YOUR CONTENT" attribute to give a description of what the image and then write the path to your image in the href="images/example.jpg".
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
</head>
<body>
<a href="images/all/great-yarmouth.jpg" rel="ChillBox" title="Great Yarmouth Sea Front">Show Image.</a>
</body>
Result: Show Image.
Support
Can I use the script in a commercial project?
ChillBox is licensed under the Creative Commons Attribution 2.5 License. As for correct attribution, all that is required is that you leave my name and link at the top of the chillbox.js (Javascript File). I would appreciate an html link, but it is not required.
What versions of JQuery will ChillBox work with?
ChillBox has been tested on all JQuery Versions 1.3 to 1.4.2 (Latest Version).
Change Log
Version 1.0 - Original Release
Contact
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.More script and css style : www.htmldrive.net