forked from mjackson/shadowbox
-
Notifications
You must be signed in to change notification settings - Fork 1
Support
Nerothos edited this page Nov 13, 2015
·
3 revisions
<h2><a name="browsers">Browsers</a></h2>
<p>Shadowbox supports the following browsers:</p>
<ul id="browser-list">
<li><img src="assets/bullet-ie.gif">Internet Explorer</a> 6+</li>
<li><img src="assets/bullet-firefox.gif">Firefox</a> 1.5+</li>
<li><img src="assets/bullet-safari.gif"> <a href="http://www.apple.com/safari/">Safari</a> 2+</li>
<li><img src="assets/bullet-chrome.gif"> <a href="http://www.google.com/chrome">Chrome</a> 1</li>
<li class="opera"><img src="assets/bullet-opera.gif"> <a href="http://www.opera.com/">Opera</a> 9+</li>
</ul>
<p><a href="http://en.wikipedia.org/wiki/Quirks_mode">Quirks mode</a> is not supported in any browser, but that doesn't necessarily mean that it won't work. This means that you need to use either a strict <em>or</em> transitional DOCTYPE in order to use Shadowbox. For example, placing one of the following snippets at the very top of your HTML page (without <em>any</em> preceding space or comments) will tell browsers that you want that page to be rendered according to <a href="http://www.webstandards.org/">web standards</a>:</p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<p>For more information on using DOCTYPEs and why you should always use them, read <a href="http://www.alistapart.com/articles/doctype/">this article</a>.</p>
<h2><a name="adapters">Adapters</a></h2>
<p>Although Shadowbox can be used in standalone mode, it's just as easy to use Shadowbox with your JavaScript library of choice for a given project. This is accomplished using adapters. An adapter is a small file that tells Shadowbox which methods to call on the underlying framework to achieve some common purpose such as querying the DOM or handling events. Shadowbox comes bundled with adapters for the following JavaScript frameworks:</p>
<ul>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://prototypejs.org/">Prototype</a></li>
<li><a href="http://mootools.net/">MooTools</a> (requires 1.2 Core)</li>
<li><a href="http://dojotoolkit.org/">Dojo Toolkit</a></li>
<li><a href="http://developer.yahoo.com/yui/">Yahoo! User Interface Library</a> (requires yahoo-dom-event.js)</li>
<li><a href="http://extjs.com/">Ext</a> (requires ext-core.js)</li>
</ul>
<p>If you plan on using Shadowbox together with one of these libraries, simply select the appropriate adapter when you <a href="download.html">download</a> the code.</p>
<h2><a name="media">Media</a></h2>
<p>Shadowbox supports many different media formats via the <a href="http://www.adobe.com/products/flashplayer/">Flash</a>, <a href="http://www.apple.com/quicktime/">QuickTime</a>, and <a href="http://www.microsoft.com/windows/windowsmedia/">Windows Media Player</a> browser plugins. Windows media files are supported on the Mac via the <a href="http://www.flip4mac.com/wmv_download.htm">Flip4Mac</a> QuickTime plugin.</p>
<p><a href="http://en.wikipedia.org/wiki/Flash_Video">Flash video</a> is supported via the <a href="http://www.longtailvideo.com/players/jw-flv-player/">JW FLV Player</a>. Although Shadowbox supports many types of video, it is recommended that all video be displayed in this format because it will have the most uniform result across different platforms. Please see the <a href="faq.html">FAQ</a> for more information on using the JW FLV Player with Shadowbox.</p>
<p>Shadowbox uses a smart plugin detection mechanism that automatically detects whether or not the client is capable of displaying linked content. For movies that can be played using either QuickTime or Windows Media Player, Shadowbox will automatically detect which one is installed and use it. In the case of a missing plugin, Shadowbox can either display a useful error message with a link to the appropriate plugin download page (the default behavior), or it can ignore the gallery piece altogether. See the <a href="options.html#handleunsupported"><code>handleUnsupported</code> option</a> for more details on how to configure this behavior.</p>
</div>