/** * Note: The functions contained in this file are for demonstration purposes * only and are certainly not necessary in your own project. */ /* function initDemos(){ // setup flash gallery demo Shadowbox.setup([ document.getElementById('flash1'), document.getElementById('flash2'), document.getElementById('flash3') ], { gallery: 'Flash', continuous: true, counterType: 'skip', animSequence: 'sync' }); // setup image map demo Shadowbox.setup(document.getElementById('hongkongmap').getElementsByTagName('area')); }; function demoMap(){ Shadowbox.open({ player: 'html', content: '', height: 300, width: 500, options: { onFinish: function(item){ if(GBrowserIsCompatible()){ var map = new GMap2(document.getElementById('shadowbox_content')); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for(var i = 0; i < 10; i++){ var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); } // add some simple controls map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); } } } }); }; */ function demoMessage(){ Shadowbox.open({ player: 'html', content: '
You\'re using Shadowbox!
', height: 100, width: 200 }); }; function demoGallery(){ var img = { player: 'img', content: 'http://mjijackson.com/shadowbox/gallery/aston_martin/vanquish.jpg' }; var videoYT = { player: 'iframe', content: 'http://www.youtube.com/v/sOUchd7lf94&color1=0xb1b1b1&color2=0xcfcfcf&hl=en&feature=player_embedded&fs=1', height: 344, width: 425, title: 'What is your Plan B?' }; var videoFLV = { player: 'iframe', content: 'shadowbox/demo/showFLV.htm?r=&v=TestJoelM&w=960&h=720&s=960&f=true&n=CloseFLV', height: 880, width: 980, title: 'videoFLV' }; var videoSWF = { player: 'swf', content: 'shadowbox/demo/resumeGHS.swf', height: 540, width: 800, title: 'videoSWF' }; Shadowbox.open([img, videoYT, videoFLV, videoSWF], { continuous: true }); }; function SBiPlexOS(){ var SBiPlexOSx= { player: 'iframe', content: 'http://www.iplexos.com', width: 1050, title: 'iPlexOS -- Cloud Computing Web OS Service' }; Shadowbox.open([SBiPlexOSx], { continuous: true }); }; /* Shadowbox.js Media Viewer

Overview

Shadowbox is an online media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Features

What sets Shadowbox apart from every other "box" out there? Here is a rather lengthy list:

Standards Shadowbox uses HTML markup that validates. It doesn't depend on phony HTML attributes in your anchor tags to make it work. The web has enough problems with standards compliance as it is, and I believe we should try to not perpetuate them.
Adapters It's easy to make Shadowbox adapt to whatever platform you choose. This means that you're not tied to a particular framework if you don't want to be.
Skins Customizing the appearance of Shadowbox is easy because it was built with designers in mind. As such, its appearance can easily be altered using the only language that's really designed for such a task, CSS.
Media Shadowbox supports all of the web's most popular 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 without converting it to some other format.
Smarts Shadowbox is smart. It uses a 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. Instead, Shadowbox displays a helpful link to a page where your users can download the software that will allow them to view your content properly. Also, Shadowbox will never overflow the viewport, showing those obnoxious scrollbars. Instead, Shadowbox will automatically adjust to whatever size the client can handle.
Options Shadowbox supports a host of options 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.
Universal Shadowbox ships with support for many of the world's most-spoken languages. That means that your users will probably be able to interact with the application in their native tongue.
Modules The Shadowbox code is modular. Using a custom build form, you can build a streamlined version that contains only the features you need.
Unobtrusive Shadowbox uses HTML anchor elements to collect data about content to display. So if your client doesn't have JavaScript enabled, Shadowbox will stay out of the way and allow the user to follow the link normally.

Demos

Images

Single Image (Flickr) Image Gallery (slideshow)

Large Image

You may have to shrink your browser window to view the difference between the various options here. See the handleOversize option for more information.

Clipped (no resizing) Resized Draggable

Thumb Gallery

Unlike the previous image gallery, this one is triggered by thumbnail links. It also uses a skip counter, synchronous animations, and is continuous.

Red Red Red

Image Map

Shadowbox supports client-side image maps through the use of area tags.

Hong Kong

Flash

Single SWF SWF Gallery Flash Video

Movies

QuickTime (mov) MPEG-4 Movie (controller disabled) Windows Media (wmv) Apple.com Trailer YouTube Google Video Movie Gallery Mixed Content Gallery

Web

Inline Content This Page External Site Google Maps Simple Form

Script

Script-triggered Message Script-triggered Gallery

License

Shadowbox is licensed under version 3.0 of the Creative Commons Attribution-Noncommercial-Share Alike license. This means that it is absolutely free for personal, noncommercial use provided that you 1) make attribution to the author and 2) release any derivative work under the same or a similar license.

If you would like to use Shadowbox for commercial purposes, you can purchase a license that allows you to use Shadowbox in your projects.

Tip Jar

If you don't plan on purchasing a commercial license but you simply like to reward people's hard work, please consider giving a tip via PayPal. All donations are sincerely appreciated!

Credits

Shadowbox was inspired by Lokesh Dhakar's Lightbox and Kevin Miller's LightWindow. Credit should be given to the authors of those libraries for the basic idea behind Shadowbox.

The default Shadowbox Flash video player is Jeroen Wijering's JW FLV Player. It is licensed under version 2.0 of the Creative Commons Attribution-Noncommercial-Share Alike license.

All Flash animation pieces in this gallery are original pieces included courtesy of Wyatt Miles.

Compressed versions of the files necessary to run Shadowbox are included in the default distribution in the build directory. The compression was performed with the excellent YUI compressor by Julien Lecomte.

*/