Shadowbox (JS) /Jquery

Fonte da Matéria: http://www.e-obs.com/service/test/sb/index.html

Basic Usage

The Shadowbox environment must be initialized before it can be used. To initialize Shadowbox, call Shadowbox.init() as soon as the DOM loads. For example, if I were using the YUI library, I would do the following:

<script type="text/javascript">
YAHOO.util.Event.onDOMReady(Shadowbox.init);
</script>

If the library you’re using doesn’t support the DOM ready event, or you don’t know what that means (read this article), you can always simply use the following code to achieve the same effect.

<script type="text/javascript">
window.onload = Shadowbox.init;
</script>

Options

Shadowbox is highly configurable, but can also be used with little to no configuration at all. The following table contains a list of options that may be used to configure Shadowbox.

Advanced Options

The following options are provided for advanced users.

Any of these options may be passed into Shadowbox.init() in a JavaScript object (hash) once the page loads. The following example uses jQuery syntax to demonstrate how this is to be done.

<script type="text/javascript">
    $(document).ready(function(){
    var options = {
        resizeLgImages:     true,
        displayNav:         false,
        handleUnsupported:  'remove',
        keysClose:          ['c', 27], // c or esc
        autoplayMovies:     false
    };
    Shadowbox.init(options);
});
</script>

If options are passed into init(), they will be applied as the default for all instances of Shadowbox on a page. However, options may also be used on a per-link basis as described below.

Markup

The simplest way to use Shadowbox is through your HTML markup. At the very least, you must add a rel="shadowbox" attribute to your links. For example, say you have this link to an image on your page:

<a href="myimage.jpg">My Image</a>

In order to set up this link for use with Shadowbox, simply change it to this:

<a href="myimage.jpg" rel="shadowbox">My Image</a>

Note: The word “lightbox” will also work here. This feature was added for compatibility with the original Lightbox script. Please also note that because HTML area tags do not support the rel attribute, you cannot use this method to set them up for use with Shadowbox. Instead, use setup() as described below.
If you would like to display a title for your image, simply add a title attribute to the link.

<a href="myimage.jpg" rel="shadowbox" title="My Image">My Image</a>

You must explicitly tell Shadowbox the dimensions to use to display content other than images. This is done by adding a few parameters to the end of the rel attribute, separated by semi-colons. To specify a movie’s height and width, use the height and width parameters. Note: These values must always be specified in pixels.

<a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>

Additionally, you may set Shadowbox options on a per-link basis. To do this, you must include a JSON-formatted parameter called options. An example could be:

<a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image</a>

In addition to displaying single images and movies, Shadowbox is also capable of displaying galleries of content. In order to designate a link as part of a gallery, you must add the gallery name to the relattribute between square brackets immediately following the word “shadowbox”. For example, the following markup creates a gallery called “Vacation” with two pictures:

<a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Galleries may be composed of content of many different types. The following markup is a compressed version of the last demo. It demonstrates how various media can be combined into a single gallery.

<a rel="shadowbox[Mixed];options={counterType:'skip',continuous:true}" href="vanquish.jpg">jpg</a>
<a rel="shadowbox[Mixed];width=520;height=390" href="caveman.swf">swf</a>
<a rel="shadowbox[Mixed];width=292;height=218" href="kayak.mp4">movie</a>
<a rel="shadowbox[Mixed]" href="index.html">iframe</a>

Advanced Usage

Parameters

If you don’t want to add to your markup, you don’t have to. Shadowbox may be controlled manually through the use of JavaScript. This use is slightly more complex, but it has several benefits including the fact that your HTML markup will be cleaner and you can more easily integrate Shadowbox into an existing project.
If you were paying attention in the section about markup, you’ll notice that there are several parameters that commonly accompany Shadowbox link elements. These parameters are listed in the table below.

When using the markup method, each of these options may be present in one form or another. A link’s gallery name, height, and width may all be configured within the link’s rel attribute. Similarly, its title is contained in the title attribute and the content value defaults to the link’s href. The content type is then derived from the extension on the linked file.
So, now that you know what’s really going on behind the scenes, you can just pass objects that contain these pieces of information to open() as in the following example.

<script type="text/javascript">
window.onload = function(){
    Shadowbox.init({
        // let's skip the automatic setup because we don't have any
        // properly configured link elements on the page
        skipSetup: true
    });
    // open a welcome message
    Shadowbox.open({
        title:      'Welcome',
        type:       'html',
        content:    'Welcome to my website!',
        height:     350,
        width:      350
    });
};
</script>

Note: The open() method may also accept a second argument that contains some options to apply.
You can also use the setup() method to manually set up link elements for use with Shadowbox. This can be useful, for example, if you have a dynamic page with links being created and destroyed on the fly.
The following example uses Prototype 1.6 syntax.

<script type="text/javascript">
document.observe('dom:loaded', function(){
    Shadowbox.init({
        skipSetup: true // skip the automatic setup
    });
    // set up all anchor elements with a 'movie' class to work with Shadowbox
    Shadowbox.setup($$('a.movie'), {
        gallery:            'My Movies',
        autoplayMovies:     true
    });
});
</script>

When using this method to set up links with Shadowbox, you may mix in the link parameters with the options argument as the second parameter. However, the same parameters will apply to all links set up in the same call, so you may want to make separate calls to setup() for each link.
It is important to note that any options found in a link’s HTML markup automatically trump those passed in via setup().

API

The following table contains the Shadowbox API for your reference.