Libreria de cajas de sombras de mjijackson

 

URL con documentación y ejemplos: http://mjijackson.com/shadowbox/

 

Documentación recopilada de la web shadowbox. Se mantienen los textos originales en inglés para evitar confusiones en la interpretación.

Markup

Secondly, you need to tell Shadowbox which links you want it to open. The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least you must add a rel="shadowbox" attribute to each link. 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>

That's it! Clicking on this link should now open up the image in Shadowbox.

Note: The word lightbox will also work here. This feature was added for compatibility with the original Lightbox script. 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 Shadowbox.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 (in pixels), use the height and width parameters.

<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.

<a href="myimage.jpg" rel="shadowbox;options={animate: 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 rel attribute between square brackets immediately following the word "shadowbox". 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

If you don't want to add to your markup, you don't have to. Shadowbox may be manipulated with pure 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 gallery 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 Shadowbox.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({

        player:     'html',

        title:      'Welcome',

        content:    '<div id="welcome-msg">Welcome to my website!</div>',

        height:     350,

        width:      350

    });

 

};

 

</script>

Note: Shadowbox.open may also accept a second argument that contains some options to apply.

You can also use Shadowbox.setup 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 dynamically.

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 Shadowbox.setup for each link.

Note: Any options found in a link's HTML markup automatically trump those passed in via setup().

Options

 

The following table contains a list of options that may be used to configure Shadowbox.

Option                Description

adapter†        The adapter to use with Shadowbox. If not given, Shadowbox will automatically determine which adapter to use based on which libraries are already loaded on the page. If no other libraries are loaded, will default to using the "base" adapter.

animate        Set this false to disable all fancy animations (except fades). This can improve the overall effect on computers with poor performance. Defaults to true.

animateFade        Set this false to disable all fading animations. Defaults to true.

animSequence        The animation sequence to use when resizing Shadowbox. May be either "wh" (width first, then height), "hw" (height first, then width), or "sync" (both simultaneously). Defaults to "sync".

autoplayMovies        Set this false to disable automatically playing movies when they are loaded. Defaults to true.

autoDimensions        Set this true to automatically set the initialHeight and initialWidth automatically from the configured object's height and width. Defaults to false.

continuous        Set this true to enable "continuous" galleries. By default, the galleries will not let a user go before the first image or after the last. Enabling this feature will let the user go directly to the first image in a gallery from the last one by selecting "Next". Defaults to false.

counterLimit        Limits the number of counter links that will be displayed in a "skip" style counter. If the actual number of gallery elements is greater than this value, the counter will be restrained to the elements immediately preceding and following the current element. Defaults to 10.

counterType        The mode to use for the gallery counter. May be either "default" or "skip". The default counter is a simple "1 of 5" message. The skip counter displays a separate link to each piece in the gallery, enabling quick navigation in large galleries. Defaults to "default".

displayCounter        Set this false to hide the gallery counter. Counters are never displayed on elements that are not part of a gallery. Defaults to true.

displayNav        Set this false to hide the gallery navigation controls. Defaults to true.

ease        An easing function to use for all Shadowbox animations. This function accepts one parameter that represents the state of the animation (% complete) and should return a value on [0, 1] (or close to it) that represents the multiple that should be applied to the pixel value. Defaults to a cubic polynomial.

enableKeys        Set this false to disable keyboard navigation of galleries. Defaults to true.

errors        An object containing the names and URL's of plugins and their respective download pages.

ext†        A map of players to their supported extensions. See the source for further details.

fadeDuration        The duration (in seconds) of the fade animations. Defaults to 0.35.

flashParams        A list of parameters (in a JavaScript object) that will be passed to a flash <object>. For a partial list of available parameters, see this page. Only one parameter is specified by default: bgcolor. Defaults to {bgcolor:"#000000"}.

flashVars        A list of variables (in a JavaScript object) that will be passed to a flash movie as FlashVars. Defaults to {}.

flashVersion        The minimum Flash version required to play a flash movie (as a string). Defaults to "9.0.0".

handleOversize        The mode to use for handling content that is too large for the viewport. May be one of "none", "resize", or "drag" (for images). The "none" setting will not alter the image dimensions, though clipping may occur. Setting this to "resize" enables on-the-fly resizing of large content. In this mode, the height and width of large, resizable content will be adjusted so that it may still be viewed in its entirety while maintaining its original aspect ratio. The "drag" mode will display an oversized image at its original resolution, but will allow the user to drag it within the view to see portions that may be clipped. See the demo for a demonstration of all three modes of operation. Defaults to "resize".

handleUnsupported        The mode to use for handling unsupported media. May be either "link" or "remove". Media are unsupported when the browser plugin required to display the media properly is not installed. The link option will display a user-friendly error message with a link to a page where the needed plugin can be downloaded. The remove option will simply remove any unsupported gallery elements from the gallery before displaying it. With this option, if the element is not part of a gallery, the link will simply be followed. Defaults to "link".

initialHeight        The height of Shadowbox (in pixels) when it first appears on the screen. Defaults to 160.

initialWidth        The width of Shadowbox (in pixels) when it first appears on the screen. Defaults to 320.

language†        The two-letter language code (according to ISO 639-1) that specifies the language that Shadowbox will use to display messages to the user. All language files are contained in the languages directory and are prefixed with "shadowbox-" followed by the language code. Defaults to "en".

modal        Set this false to disable listening for mouse clicks on the overlay that will close Shadowbox. Defaults to true.

onChange        A hook function that will be fired when Shadowbox changes from one gallery element to another. The single argument of this function will be the gallery element that is about to be displayed.

onClose        A hook function that will be fired when Shadowbox closes. The single argument of this function will be the gallery element that was last displayed.

onFinish        A hook function that will fire when Shadowbox finishes loading the current gallery piece (after all animations are complete). The single argument of this function will be the current gallery element.

onOpen        A hook function that will be fired when Shadowbox opens. The single argument of this function will be the current gallery element.

overlayColor        The color to use for the modal overlay (in hex). Defaults to "#000".

overlayOpacity        The opacity to use for the modal overlay. Defaults to 0.8.

players†        

 

Shadowbox supports a wide range of media formats. This option specifies an array of player(s) to load for your content. The following table describes which players are available:

Player        Description

img        Used to display various image formats including gif, jpeg, and png. Supports dragging of oversized images via the handleOversize configuration option.

swf        Used to display SWF's (Flash).

flv        Used to play Flash video via the JW FLV Player. See the FAQ for instructions on how to install and use this player.

qt        Uses the QuickTime browser plugin to play content.

wmp        Uses the Windows Media Player browser plugin to play content.

iframe        Displays content in an HTML Iframe. Useful for playing videos from YouTube and Google video, as well as displaying exterior web sites.

html        Injects some pure HTML code into the Shadowbox display. Useful for displaying inline tables and forms.

 

Defaults to ["img"].

resizeDuration        The duration (in seconds) of the resizing animations. Defaults to 0.35.

showOverlay        Determines whether the overlay will be shown at all. Defaults to true.

showMovieControls        Set this false to disable displaying QuickTime and Windows Media player movie control bars. Defaults to true.

skipSetup†        Set this true to skip automatically calling Shadowbox.setup when Shadowbox initializes. Defaults to true.

slideshowDelay A delay (in seconds) to use for slideshows. If set to anything other than 0, this value determines an interval at which Shadowbox will automatically proceed to the next piece in the gallery. Defaults to 0.

useSizzle†        Set this false to disable loading the Sizzle.js CSS selector library. Note that if you choose not to use Sizzle you may not use CSS selectors to set up your links. Defaults to true.

viewportPadding The amount of padding (in pixels) to maintain around the edge of the browser window. Defaults to 20.