????
Your IP : 3.133.106.74
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><script src="//cdn.optimizely.com/js/1865631164.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shadowbox.js</title>
<link rel="stylesheet" type="text/css" href="Shadowbox.js_files/style.css">
<!-- the following line is only required to run the demos -->
<script type="text/javascript" src="Shadowbox.js_files/demo.js"></script>
<!-- this section is the only one needed to run Shadowbox -->
<link rel="stylesheet" type="text/css" href="Shadowbox.js_files/shadowbox.css">
<script type="text/javascript" src="Shadowbox.js_files/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// a darker overlay looks better on this particular site
overlayOpacity: 0.8
// setupDemos is defined in assets/demo.js
}, setupDemos);
</script>
<style type="text/css" charset="utf-8">/* See license.txt for terms of usage */
/** reset styling **/
.firebugResetStyles {
z-index: 2147483646 !important;
top: 0 !important;
left: 0 !important;
display: block !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
position: fixed !important;
transform: rotate(0deg) !important;
transform-origin: 50% 50% !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent none !important;
pointer-events: none !important;
white-space: normal !important;
}
.firebugBlockBackgroundColor {
background-color: transparent !important;
}
.firebugResetStyles:before, .firebugResetStyles:after {
content: "" !important;
}
/**actual styling to be modified by firebug theme**/
.firebugCanvas {
display: none !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
width: auto !important;
position: static !important;
}
.firebugLayoutBoxOffset {
opacity: 0.8 !important;
position: fixed !important;
}
.firebugLayoutLine {
opacity: 0.4 !important;
background-color: #000000 !important;
}
.firebugLayoutLineLeft, .firebugLayoutLineRight {
width: 1px !important;
height: 100% !important;
}
.firebugLayoutLineTop, .firebugLayoutLineBottom {
width: 100% !important;
height: 1px !important;
}
.firebugLayoutLineTop {
margin-top: -1px !important;
border-top: 1px solid #999999 !important;
}
.firebugLayoutLineRight {
border-right: 1px solid #999999 !important;
}
.firebugLayoutLineBottom {
border-bottom: 1px solid #999999 !important;
}
.firebugLayoutLineLeft {
margin-left: -1px !important;
border-left: 1px solid #999999 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBoxParent {
border-top: 0 none !important;
border-right: 1px dashed #E00 !important;
border-bottom: 1px dashed #E00 !important;
border-left: 0 none !important;
position: fixed !important;
width: auto !important;
}
.firebugRuler{
position: absolute !important;
}
.firebugRulerH {
top: -15px !important;
left: 0 !important;
width: 100% !important;
height: 14px !important;
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%13%88%00%00%00%0E%08%02%00%00%00L%25a%0A%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%F8IDATx%DA%EC%DD%D1n%E2%3A%00E%D1%80%F8%FF%EF%E2%AF2%95%D0D4%0E%C1%14%B0%8Fa-%E9%3E%CC%9C%87n%B9%81%A6W0%1C%A6i%9A%E7y%0As8%1CT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AATE9%FE%FCw%3E%9F%AF%2B%2F%BA%97%FDT%1D~K(%5C%9D%D5%EA%1B%5C%86%B5%A9%BDU%B5y%80%ED%AB*%03%FAV9%AB%E1%CEj%E7%82%EF%FB%18%BC%AEJ8%AB%FA'%D2%BEU9%D7U%ECc0%E1%A2r%5DynwVi%CFW%7F%BB%17%7Dy%EACU%CD%0E%F0%FA%3BX%FEbV%FEM%9B%2B%AD%BE%AA%E5%95v%AB%AA%E3E5%DCu%15rV9%07%B5%7F%B5w%FCm%BA%BE%AA%FBY%3D%14%F0%EE%C7%60%0EU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5JU%88%D3%F5%1F%AE%DF%3B%1B%F2%3E%DAUCNa%F92%D02%AC%7Dm%F9%3A%D4%F2%8B6%AE*%BF%5C%C2Ym~9g5%D0Y%95%17%7C%C8c%B0%7C%18%26%9CU%CD%13i%F7%AA%90%B3Z%7D%95%B4%C7%60%E6E%B5%BC%05%B4%FBY%95U%9E%DB%FD%1C%FC%E0%9F%83%7F%BE%17%7DkjMU%E3%03%AC%7CWj%DF%83%9An%BCG%AE%F1%95%96yQ%0Dq%5Dy%00%3Et%B5'%FC6%5DS%95pV%95%01%81%FF'%07%00%00%00%00%00%00%00%00%00%F8x%C7%F0%BE%9COp%5D%C9%7C%AD%E7%E6%EBV%FB%1E%E0(%07%E5%AC%C6%3A%ABi%9C%8F%C6%0E9%AB%C0'%D2%8E%9F%F99%D0E%B5%99%14%F5%0D%CD%7F%24%C6%DEH%B8%E9rV%DFs%DB%D0%F7%00k%FE%1D%84%84%83J%B8%E3%BA%FB%EF%20%84%1C%D7%AD%B0%8E%D7U%C8Y%05%1E%D4t%EF%AD%95Q%BF8w%BF%E9%0A%BF%EB%03%00%00%00%00%00%00%00%00%00%B8vJ%8E%BB%F5%B1u%8Cx%80%E1o%5E%CA9%AB%CB%CB%8E%03%DF%1D%B7T%25%9C%D5(%EFJM8%AB%CC'%D2%B2*%A4s%E7c6%FB%3E%FA%A2%1E%80~%0E%3E%DA%10x%5D%95Uig%15u%15%ED%7C%14%B6%87%A1%3B%FCo8%A8%D8o%D3%ADO%01%EDx%83%1A~%1B%9FpP%A3%DC%C6'%9C%95gK%00%00%00%00%00%00%00%00%00%20%D9%C9%11%D0%C0%40%AF%3F%EE%EE%92%94%D6%16X%B5%BCMH%15%2F%BF%D4%A7%C87%F1%8E%F2%81%AE%AAvzr%DA2%ABV%17%7C%E63%83%E7I%DC%C6%0Bs%1B%EF6%1E%00%00%00%00%00%00%00%00%00%80cr%9CW%FF%7F%C6%01%0E%F1%CE%A5%84%B3%CA%BC%E0%CB%AA%84%CE%F9%BF)%EC%13%08WU%AE%AB%B1%AE%2BO%EC%8E%CBYe%FE%8CN%ABr%5Dy%60~%CFA%0D%F4%AE%D4%BE%C75%CA%EDVB%EA(%B7%F1%09g%E5%D9%12%00%00%00%00%00%00%00%00%00H%F6%EB%13S%E7y%5E%5E%FB%98%F0%22%D1%B2'%A7%F0%92%B1%BC%24z3%AC%7Dm%60%D5%92%B4%7CEUO%5E%F0%AA*%3BU%B9%AE%3E%A0j%94%07%A0%C7%A0%AB%FD%B5%3F%A0%F7%03T%3Dy%D7%F7%D6%D4%C0%AAU%D2%E6%DFt%3F%A8%CC%AA%F2%86%B9%D7%F5%1F%18%E6%01%F8%CC%D5%9E%F0%F3z%88%AA%90%EF%20%00%00%00%00%00%00%00%00%00%C0%A6%D3%EA%CFi%AFb%2C%7BB%0A%2B%C3%1A%D7%06V%D5%07%A8r%5D%3D%D9%A6%CAu%F5%25%CF%A2%99%97zNX%60%95%AB%5DUZ%D5%FBR%03%AB%1C%D4k%9F%3F%BB%5C%FF%81a%AE%AB'%7F%F3%EA%FE%F3z%94%AA%D8%DF%5B%01%00%00%00%00%00%00%00%00%00%8E%FB%F3%F2%B1%1B%8DWU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*UiU%C7%BBe%E7%F3%B9%CB%AAJ%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5*%AAj%FD%C6%D4%5Eo%90%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5%86%AF%1B%9F%98%DA%EBm%BBV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%AD%D6%E4%F58%01%00%00%00%00%00%00%00%00%00%00%00%00%00%40%85%7F%02%0C%008%C2%D0H%16j%8FX%00%00%00%00IEND%AEB%60%82") repeat-x !important;
border-top: 1px solid #BBBBBB !important;
border-right: 1px dashed #BBBBBB !important;
border-bottom: 1px solid #000000 !important;
}
.firebugRulerV {
top: 0 !important;
left: -15px !important;
width: 14px !important;
height: 100% !important;
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%13%88%08%02%00%00%00%0E%F5%CB%10%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%06~IDATx%DA%EC%DD%D1v%A20%14%40Qt%F1%FF%FF%E4%97%D9%07%3BT%19%92%DC%40(%90%EEy%9A5%CB%B6%E8%F6%9Ac%A4%CC0%84%FF%DC%9E%CF%E7%E3%F1%88%DE4%F8%5D%C7%9F%2F%BA%DD%5E%7FI%7D%F18%DDn%BA%C5%FB%DF%97%BFk%F2%10%FF%FD%B4%F2M%A7%FB%FD%FD%B3%22%07p%8F%3F%AE%E3%F4S%8A%8F%40%EEq%9D%BE8D%F0%0EY%A1Uq%B7%EA%1F%81%88V%E8X%3F%B4%CEy%B7h%D1%A2E%EBohU%FC%D9%AF2fO%8BBeD%BE%F7X%0C%97%A4%D6b7%2Ck%A5%12%E3%9B%60v%B7r%C7%1AI%8C%BD%2B%23r%00c0%B2v%9B%AD%CA%26%0C%1Ek%05A%FD%93%D0%2B%A1u%8B%16-%95q%5Ce%DCSO%8E%E4M%23%8B%F7%C2%FE%40%BB%BD%8C%FC%8A%B5V%EBu%40%F9%3B%A72%FA%AE%8C%D4%01%CC%B5%DA%13%9CB%AB%E2I%18%24%B0n%A9%0CZ*Ce%9C%A22%8E%D8NJ%1E%EB%FF%8F%AE%CAP%19*%C3%BAEKe%AC%D1%AAX%8C*%DEH%8F%C5W%A1e%AD%D4%B7%5C%5B%19%C5%DB%0D%EF%9F%19%1D%7B%5E%86%BD%0C%95%A12%AC%5B*%83%96%CAP%19%F62T%86%CAP%19*%83%96%CA%B8Xe%BC%FE)T%19%A1%17xg%7F%DA%CBP%19*%C3%BA%A52T%86%CAP%19%F62T%86%CA%B0n%A9%0CZ%1DV%C6%3D%F3%FCH%DE%B4%B8~%7F%5CZc%F1%D6%1F%AF%84%F9%0F6%E6%EBVt9%0E~%BEr%AF%23%B0%97%A12T%86%CAP%19%B4T%86%CA%B8Re%D8%CBP%19*%C3%BA%A52huX%19%AE%CA%E5%BC%0C%7B%19*CeX%B7h%A9%0C%95%E1%BC%0C%7B%19*CeX%B7T%06%AD%CB%5E%95%2B%BF.%8F%C5%97%D5%E4%7B%EE%82%D6%FB%CF-%9C%FD%B9%CF%3By%7B%19%F62T%86%CA%B0n%D1R%19*%A3%D3%CA%B0%97%A12T%86uKe%D0%EA%B02*%3F1%99%5DB%2B%A4%B5%F8%3A%7C%BA%2B%8Co%7D%5C%EDe%A8%0C%95a%DDR%19%B4T%C66%82fA%B2%ED%DA%9FC%FC%17GZ%06%C9%E1%B3%E5%2C%1A%9FoiB%EB%96%CA%A0%D5qe4%7B%7D%FD%85%F7%5B%ED_%E0s%07%F0k%951%ECr%0D%B5C%D7-g%D1%A8%0C%EB%96%CA%A0%A52T%C6)*%C3%5E%86%CAP%19%D6-%95A%EB*%95q%F8%BB%E3%F9%AB%F6%E21%ACZ%B7%22%B7%9B%3F%02%85%CB%A2%5B%B7%BA%5E%B7%9C%97%E1%BC%0C%EB%16-%95%A12z%AC%0C%BFc%A22T%86uKe%D0%EA%B02V%DD%AD%8A%2B%8CWhe%5E%AF%CF%F5%3B%26%CE%CBh%5C%19%CE%CB%B0%F3%A4%095%A1%CAP%19*Ce%A8%0C%3BO*Ce%A8%0C%95%A12%3A%AD%8C%0A%82%7B%F0v%1F%2FD%A9%5B%9F%EE%EA%26%AF%03%CA%DF9%7B%19*Ce%A8%0C%95%A12T%86%CA%B8Ze%D8%CBP%19*Ce%A8%0C%95%D1ae%EC%F7%89I%E1%B4%D7M%D7P%8BjU%5C%BB%3E%F2%20%D8%CBP%19*Ce%A8%0C%95%A12T%C6%D5*%C3%5E%86%CAP%19*Ce%B4O%07%7B%F0W%7Bw%1C%7C%1A%8C%B3%3B%D1%EE%AA%5C%D6-%EBV%83%80%5E%D0%CA%10%5CU%2BD%E07YU%86%CAP%19*%E3%9A%95%91%D9%A0%C8%AD%5B%EDv%9E%82%FFKOee%E4%8FUe%A8%0C%95%A12T%C6%1F%A9%8C%C8%3D%5B%A5%15%FD%14%22r%E7B%9F%17l%F8%BF%ED%EAf%2B%7F%CF%ECe%D8%CBP%19*Ce%A8%0C%95%E1%93~%7B%19%F62T%86%CAP%19*Ce%A8%0C%E7%13%DA%CBP%19*Ce%A8%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4%AE%A4%F5%25%C0%00%DE%BF%5C'%0F%DA%B8q%00%00%00%00IEND%AEB%60%82") repeat-y !important;
border-left: 1px solid #BBBBBB !important;
border-right: 1px solid #000000 !important;
border-bottom: 1px dashed #BBBBBB !important;
}
.overflowRulerX > .firebugRulerV {
left: 0 !important;
}
.overflowRulerY > .firebugRulerH {
top: 0 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.fbProxyElement {
position: fixed !important;
pointer-events: auto !important;
}
</style></head>
<body>
<div id="outer-wrapper">
<div id="stripe"></div>
<div id="wrapper">
<div id="header">
<a href="http://www.shadowbox-js.com/index.html"><img alt="Shadowbox.js" src="Shadowbox.js_files/logo.gif"></a>
</div>
<ul id="nav">
<li><a class="selected">Home</a></li>
<li><a href="http://www.shadowbox-js.com/download.html">Download</a></li>
<li><a href="http://www.shadowbox-js.com/support.html">Support</a></li>
<li><a href="http://www.shadowbox-js.com/usage.html">Usage</a></li>
<li><a href="http://www.shadowbox-js.com/options.html">Options</a></li>
<li><a href="http://www.shadowbox-js.com/api.html">API</a></li>
<li><a href="http://www.shadowbox-js.com/faq.html">FAQ</a></li>
<li><a href="http://www.shadowbox-js.com/forum.html">Forum</a></li>
</ul>
<div id="content">
<div id="download-callout">
<div style="height:42px;text-align:center;margin-bottom:18px"><a href="http://www.shadowbox-js.com/download.html"><img src="Shadowbox.js_files/button-download.png" alt="Download Shadowbox.js"></a></div>
<p><a href="#license">Commercial licenses</a> are available for developers that would like to use Shadowbox on a commercial website.</p>
</div>
<p>Shadowbox is a web-based media viewer application that supports all of the web's <a href="http://www.shadowbox-js.com/support.html#media">most popular</a> media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is <a href="http://www.shadowbox-js.com/options.html">highly customizable</a>. Using Shadowbox, website authors can showcase a wide assortment of media in <a href="http://www.shadowbox-js.com/support.html#browsers">all major browsers</a> without navigating users away from the linking page.</p>
<h2><a name="features">Features</a></h2>
<p>What sets Shadowbox apart from every other "box" out there?</p>
<div id="features">
<div id="feature-standards" class="feature left">
<div class="feature-title">Standards</div>
<div class="feature-text">Shadowbox uses HTML markup that <a href="http://validator.w3.org/check/referer">validates</a>. It doesn't depend on phony HTML attributes in your anchor tags to make it work. The web has enough problems with <a href="http://www.webstandards.org/">standards</a> compliance as it is, and Shadowbox does its best to not perpetuate them.</div>
</div>
<div id="feature-smarts" class="feature">
<div class="feature-title">Smart</div>
<div class="feature-text">Shadowbox uses a smart plugin
detection mechanism behind the scenes that can spare your users from
confusing torn image or puzzle piece icons when they don't have the
plugins they need to view your content. Also, it will never overflow the
viewport, forcing those obnoxious scroll bars.</div>
</div>
<div id="feature-free" class="feature left">
<div class="feature-title">Free from Frameworks</div>
<div class="feature-text">Although Shadowbox has the unique ability to <a href="http://www.shadowbox-js.com/support.html#adapters">adapt</a>
to whatever JavaScript framework you choose, it's just as easy to run
it as a standalone app, giving the developer a great deal of
flexibility.</div>
</div>
<div id="feature-media" class="feature">
<div class="feature-title">Flexible</div>
<div class="feature-text">Shadowbox supports all of the web's <a href="http://www.shadowbox-js.com/support.html#media">most popular</a>
media publishing formats including images, QuickTime, Windows Media
Player, Flash, Flash video, HTML, and even external web pages. This
makes it easy to display your content, no matter what it is.</div>
</div>
<div id="feature-customize" class="feature left">
<div class="feature-title">Customizable</div>
<div class="feature-text">Shadowbox supports a host of <a href="http://www.shadowbox-js.com/options.html">options</a>
that make it highly configurable. If you don't like the way something
works, chances are very good that you can change it without digging
through the code.</div>
</div>
<div id="feature-universal" class="feature">
<div class="feature-title">Universal</div>
<div class="feature-text">Shadowbox ships with support for many of the world's most-spoken languages, making it easy to <a href="http://www.shadowbox-js.com/download.html">configure</a> Shadowbox to communicate with your visitors in their native tongue.</div>
</div>
<div id="feature-neat" class="feature left">
<div class="feature-title">Neat and Compact</div>
<div class="feature-text">The Shadowbox code is neat, modular, and compact. Create a <a href="http://www.shadowbox-js.com/download.html">custom build</a> of the code that includes just the features you need so it's as lightweight as possible.</div>
</div>
<div id="feature-smiley" class="feature">
<div class="feature-title">Plays Well with Others</div>
<div class="feature-text">Shadowbox tries to be as
unobtrusive as possible. If your client doesn't have JavaScript enabled,
it will stay completely out of the way and allow the page to function
normally.</div>
</div>
<div style="clear:both;"></div>
</div>
<h2><a name="examples">Examples</a></h2>
<p>The simplest way to use Shadowbox is to display a single
piece of content, with a thumbnail link on the page. When the user
clicks on the thumbnail, Shadowbox will open to display a larger version
of the image.</p>
<table class="thumbs" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a rel="shadowbox" href="http://www.shadowbox-js.com/gallery/tiger.jpg"><img title="Tiger" class="border" src="Shadowbox.js_files/tiger-thumb.jpg"></a></td>
<td><a rel="shadowbox" href="http://www.shadowbox-js.com/gallery/colours.jpg"><img alt="Colours" class="border" src="Shadowbox.js_files/colours-thumb.jpg"></a></td>
</tr>
</tbody>
</table>
<p>Content may also be arranged in a gallery for viewing all together. The gallery below uses a <a href="http://www.shadowbox-js.com/options.html#countertype">"skip"-style counter</a> and is <a href="http://www.shadowbox-js.com/options.html#continuous">continuous</a>.</p>
<table class="thumbs" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a class="mustang-gallery" href="http://www.shadowbox-js.com/gallery/mustang/red.jpg"><img src="Shadowbox.js_files/red-thumb.jpg" alt="Red Mustang" class="border"></a></td>
<td><a class="mustang-gallery" href="http://www.shadowbox-js.com/gallery/mustang/blue.jpg" title="Blue Mustang"><img src="Shadowbox.js_files/blue-thumb.jpg" alt="Blue Mustang" class="border"></a></td>
<td><a class="mustang-gallery" href="http://www.shadowbox-js.com/gallery/mustang/grey.jpg"><img src="Shadowbox.js_files/grey-thumb.jpg" alt="Grey Mustang" class="border"></a></td>
</tr>
</tbody>
</table>
<p>Shadowbox is able to display Flash through the use of Adobe's
Flash Player browser plugin. If Flash is not available, the user will
be prompted to download and install it before they can view the content.</p>
<table class="thumbs" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a rel="shadowbox;width=400;height=300" title="Girl Skipping" href="http://www.shadowbox-js.com/gallery/skip.swf"><img src="Shadowbox.js_files/skip-thumb.gif" alt="wanderfuls" class="border"></a></td>
<td>
<a class="swf-gallery" rel="width=520;height=390" title="Caveman" href="http://www.shadowbox-js.com/gallery/caveman.swf"><img src="Shadowbox.js_files/caveman-thumb.gif" alt="wanderfuls" class="border"></a>
<a class="swf-gallery hidden" rel="width=600;height=450" title="Hollywood or Bust" href="http://www.shadowbox-js.com/gallery/old_man.swf">swf</a>
<a class="swf-gallery hidden" rel="width=400;height=300" title="Girl Skipping" href="http://www.shadowbox-js.com/gallery/skip.swf">swf</a>
</td>
</tr>
<tr>
<td>Single SWF</td>
<td>SWF Gallery</td>
</tr>
</tbody>
</table>
<p>In addition to images and Flash, Shadowbox supports all of
the web's most popular movie formats including QuickTime, Flash video,
and Windows Media Player.</p>
<table class="thumbs" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a rel="shadowbox;width=405;height=340;player=swf" title="Ebon Coast" href="http://www.youtube.com/v/lSnWhsmlGec&hl=en&fs=1&rel=0&autoplay=1"><img src="Shadowbox.js_files/mckee-thumb.jpg" alt="wanderfuls" class="border"></a></td>
<td><a rel="shadowbox;width=480;height=204" title="The Dark Knight" href="http://trailers.apple.com/movies/wb/the_dark_knight/the_dark_knight-tlr2_h.480.mov"><img src="Shadowbox.js_files/darkknight-thumb.jpg" alt="wanderfuls" class="border"></a></td>
<td><a title="Sweetness" href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.40"><img src="Shadowbox.js_files/sweetness-thumb.jpg" alt="wanderfuls" class="border"></a></td>
</tr>
<tr>
<td>YouTube</td>
<td>QuickTime</td>
<td>Yahoo! Video</td>
</tr>
</tbody>
</table>
<table class="thumbs" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a title="The Last Eggtion Hero" href="http://vimeo.com/moogaloop.swf"><img src="Shadowbox.js_files/eggtion-thumb.jpg" alt="wanderfuls" class="border"></a></td>
<td><a title="While My Ukulele Gently Weeps" href="http://video.google.com/googleplayer.swf"><img src="Shadowbox.js_files/ukulele-thumb.jpg" alt="wanderfuls" class="border"></a></td>
<td><a rel="shadowbox;width=600;height=450" title="Alien" href="http://www.shadowbox-js.com/gallery/alien.flv"><img src="Shadowbox.js_files/alien-thumb.gif" alt="wanderfuls" class="border"></a></td>
</tr>
<tr>
<td>Vimeo</td>
<td>Google Video</td>
<td>Flash Video</td>
</tr>
</tbody>
</table>
<p>When displaying images, you have some flexibility in deciding
how the image will appear in browsers that are too small to display the
entire image at once. The following three examples display the same
image but each uses a different value for the <a href="http://www.shadowbox-js.com/options.html#handleoversize">handleOversize option</a>. Note: You may have to shrink your browser window to view the difference between the various options here.</p>
<p>
<a class="option" rel="shadowbox" href="http://www.shadowbox-js.com/gallery/tiger-large.jpg" title="Altaic Warrior">Resized (the default)</a>
<a class="option" href="http://www.shadowbox-js.com/gallery/tiger-large.jpg" title="Altaic Warrior - Clipped">Clipped (no resizing is done)</a>
<a class="option" href="http://www.shadowbox-js.com/gallery/tiger-large.jpg" title="Altaic Warrior - Draggable">Draggable</a>
</p>
<div class="break"></div>
<p>Many more examples can be found in the <a href="http://github.com/mjijackson/shadowbox/tree/master/examples/">source</a>.</p>
<h2><a name="license">License</a></h2>
<p>Shadowbox is licensed under the terms of the <a rel="license" href="http://www.shadowbox-js.com/LICENSE">Shadowbox.js License</a>.
This license grants personal, non-commercial users the right to use
Shadowbox without paying a fee. It also provides an option for users who
wish to use Shadowbox for commercial purposes. You are encouraged to
review the terms of the license before using Shadowbox.</p>
<p>If you would like to use Shadowbox for commercial purposes,
you can purchase a license that allows you to use it on an unlimited
number of commercial domains. Commercial licenses are available in two
flavors: one for a single developer and one for any number of developers
at a single agency or company. The form below will let you purchase
both types of licenses securely via PayPal.</p>
<div id="purchase-callout">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="4497898" type="hidden">
<input name="on0" value="License type" type="hidden">
<input name="currency_code" value="USD" type="hidden">
<input name="return" value="http://shadowbox-js.com/purchase" type="hidden">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td style="padding-bottom:0;">
License type:
<select style="" name="os0">
<option selected="selected" value="Single Developer">Single Developer $20.00 USD</option>
<option value="Multiple Developers">Multiple Developers $50.00 USD</option>
</select>
</td></tr>
<tr><td>
<input src="Shadowbox.js_files/button-purchase.png" name="submit" alt="Purchase a license with PayPal - it's fast, free and secure!" type="image">
</td></tr>
</tbody></table>
</form>
</div>
<h2><a name="credits">Credits</a></h2>
<p>Shadowbox was inspired by <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox</a> and <a href="http://www.stickmanlabs.com/lightwindow/">LightWindow</a>. Credit should be given to the authors of those libraries for the basic idea behind Shadowbox.</p>
<p><a href="http://www.flickr.com/photos/shanegorski/2515009456/">Altaic Warrior</a> is the work of <a href="http://www.flickr.com/photos/shanegorski">Shane Gorski</a> and is used under the terms of the <a href="http://creativecommons.org/licenses/by-nd/2.0/deed.en">Creative Commons Attribution-No Derivative 2.0 License</a>.</p>
<p><a href="http://www.flickr.com/photos/iloveblue/2977659000/">Colours</a> is the work of <a href="http://www.flickr.com/photos/iloveblue">Scarleth White</a> and is used under the terms of the <a href="http://creativecommons.org/licenses/by/2.0/deed.en">Creative Commons Attribution 2.0 License</a>.</p>
<p>All Flash animation pieces are the original work of <a href="http://flashpotatoes.com/">Wyatt Miles</a>.</p>
</div>
<div id="push"></div>
</div>
</div>
<div id="footer">
<p>Copyright © 2007-2010 <a href="http://mjijackson.com/">Michael J. I. Jackson</a></p>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3493709-1', 'auto');
ga('send', 'pageview');
</script><script src="Shadowbox.js_files/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-998116-7");
pageTracker._trackPageview();
} catch(err) {}
</script>
<div style="display: none; height: 457px; width: 1016px; visibility: hidden;" id="sb-container"><div style="background-color: rgb(0, 0, 0); opacity: 0;" id="sb-overlay"></div><div style="top: 20px; left: 230px; width: 556px; visibility: hidden;" id="sb-wrapper"><div id="sb-title"><div style="margin-top: 26px;" id="sb-title-inner"></div></div><div style="height: 369px;" id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div style="display: none;" id="sb-loading"><div id="sb-loading-inner"><span>loading</span></div></div></div></div><div id="sb-info"><div style="margin-top: 0px;" id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="Close" onclick="Shadowbox.close()"></a><a style="display: none;" id="sb-nav-next" title="Next" onclick="Shadowbox.next()"></a><a style="display: none;" id="sb-nav-play" title="Play" onclick="Shadowbox.play()"></a><a style="display: none;" id="sb-nav-pause" title="Pause" onclick="Shadowbox.pause()"></a><a style="display: none;" id="sb-nav-previous" title="Previous" onclick="Shadowbox.previous()"></a></div></div></div></div></div></body></html>