<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,lightbox特效,lightbox效果,jquery插件,jquery图片特效,JS图片特效,JS广告代码,JS常用代码" />
<meta name="description" content="jQuery实现的lightbox效果插件ChillBox,更多lightbox特效,lightbox效果,jquery插件代码请访问脚本之家JS代码频道。" />
<title>jQuery实现的lightbox效果插件ChillBox_脚本之家</title>
<meta name="author" content="Christopher Hill" />
<meta name="copyright" content="Christopher Hill" />
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="top"><!-- Top --></div>
<div id="content">
<h3>Overview</h3>
<p>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.</p>
<div class="line"></div>
<h3>Example & Demonstration</h3>
<p>Here are a few examples, simply click the attributes tosee ChillTip in action:-</p>
<a href="images/img11_b.jpg" rel="ChillBox" class="link" title="Chill Web Designs Logo"><img src="images/img11_ss.jpg" alt="chillbox" /></a><br /><br />
<a href="images/img5_m.jpg" rel="ChillBox" class="link" title="A12 ByPass Great Yarmouth">Link Example</a>
<p>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</p>
<div class="line"></div>
<h3>Download</h3><br />
<a href="http://www.chillwebdesigns.co.uk/downloads/ChillBox_V1.0.zip" class="link" title="Download ChillBox"><img src="images/screen/chillbox-download.jpg" alt="Download ChillBox" /></a><br /><br />
<div class="line"></div>
<h3>How to install</h3>
<p><b>Step One - Download ChillBox</b></p>
<p>Downlaod chillbox.js and place it in your javascript directory in this example we are using a directory called 'js'.</p>
<p><b>Step Two - Download JQuery</b></p>
<p>ChillBox is a JQuery Plugin, therefore you will require Jquery for it to work. Simply download the latest version from the <a href="http://jquery.com/" title="JQuery Website" target="_blank">JQuery Website</a> and save it to the 'js' directory.</p>
<p><b>Step Three - Add PlugIn & Framework to the head section</b></p>
<p>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:</p>
<div class="code">
<span class="pur"><head><br /><br />
<script</span> <span class="dp">type=</span><span class="bl">"text/javascript"</span> <span class="dp">src=</span><span class="bl">"js/jquery-1.4.2.min.js"</span><span class="pur">></script><br />
<script</span> <span class="dp">type=</span><span class="bl">"text/javascript"</span> <span class="dp">src=</span><span class="bl">"js/chillbox-packed.js"</span><span class="pur">></script><br /><br />
</head></span>
</div>
<p><b>Step Four - Add ChillBox to Links</b></p>
<p>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 <b>rel="ChillBox"</b> 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". </p>
<div class="code">
<span class="pur"><head><br /><br />
<script</span> <span class="dp">type=</span><span class="bl">"text/javascript"</span> <span class="dp">src=</span><span class="bl">"js/jquery-1.4.2.min.js"</span><span class="pur">></script><br />
<script</span> <span class="dp">type=</span><span class="bl">"text/javascript"</span> <span class="dp">src=</span><span class="bl">"js/chillbox-packed.js"</span><span class="pur">></script><br />
<br />
</head><br />
<body><br /><br /><a href="images/all/great-yarmouth.jpg" rel="ChillBox" title="Great Yarmouth Sea Front">Show Image.</a><br /><br />
</body></span>
</div>
<p>Result: <a href="images/img1_m.jpg" rel="ChillBox" title="Great Yarmouth Sea Front">Show Image.</a></p>
<div class="line"></div>
<h3>Support</h3>
<p><b>Can I use the script in a commercial project?</b><br /><br />
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.<br /><br /><b>What versions of JQuery will ChillBox work with?</b><br /><br />ChillBox has been tested on all JQuery Versions 1.3 to 1.4.2 (Latest Version). </p>
<div class="line"></div>
<h3>Change Log</h3>
<p><b>Version 1.0</b> - Original Release</p>
<div class="line"></div>
<h3>Contact</h3>
<p>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 <a href="mailto:info@chillwebdesigns.co.uk?subject=ChillBox" title="Click here to send me a email">here</a>
</p>
</div>
<div id="bottom"><!-- Bottom --></div>
</div>
<!-- Scripts -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE7.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<!-- End of scripts -->
<div style="text-align:center;clear:both">
<p>来源:<a href="http://www.jb51.net" target="_blank">Christopher Hill</a> 代码整理:<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢:<a href="http://www.jb51.net" target="_blank">JS达人</a></p>
<p>转载请注明出处,此代码仅供学习交流,请勿用于商业用途。</p>
</div>
</body>
</html>