Plugin shadowbox per wordpress

Ho letto di questo componente [Shadowbox][1] che è una specie di Lightbox, slimbox che consente di inserire molti tipi di contenuti: non solo foto ma video da youtube, animazioni flash, pagine html, ecc..

Ho quindi pensato di provare a creare il mio primo plugin per wordpress integrando questo componente.

Qui intanto gli esempi di come funziona Shadowbox:



Single Image (Flickr)
Image Gallery

Large Image

You may have to shrink your browser window to view the effect here. See the [handleLgImages][2] option for more information.

Clipped (no resizing) Resized Draggable

Unlike the previous image gallery, this one is triggered by thumbnail links. It also uses a [skip counter][3] and is [continuous][4].

Red Red Red


Single SWF
SWF Gallery
Flash Video


Single Movie (mov)
Single Movie (mpeg-4, controller disabled)
Single Movie (avi, autoplay disabled)

Single Movie (wmv) Trailer
Google Video
Movie Gallery

External Website
This page
Mixed Content Gallery

Il Plugin è molto semplice, basta caricare la cartella che si ottiene scompattando l’archivio compresso nelal cartella /wp-content/plugins, andare nella parte di amministrazione e attivare il plugin.

Per utilizzarlo basta aggiungere rel=”shadowbox” ai link che volete aprire in questo modo.

ecco un po’ di esempi presi dal sito di [shadowbox][1]



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>
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 (like a CSS style declaration). To specify a movie's height and width, use the `height` and `width` parameters. Note: unlike in CSS, 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][5]-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 `rel` attribute 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][6] above. 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>
Per ora il plugin funziona con mootools, ma è facilmente adattabile ad altre librerie javascript, visto che shqdowbox include i vari adapter per queste librerie. * [Yahoo! User Interface Library][7] (yahoo, dom, event, anim) * [Ext][8] (standalone, ext-core.js) * [Prototype][9] + [Scriptaculous][10] * [jQuery][11] * [MooTools][12] (requires Fx.Styles and its dependancies) * [Dojo Toolkit][13] (thanks Peter Higgins) [Scarica il plugin versione 0.1][14] Ovviamente spero che se ci sono reeori qualcuno me lo segnali. Gabba Gabba Hey Bonzo
[1]: [2]: #handlelgimages [3]: #countertype [4]: #continuous [5]: [6]: #demos [7]: [8]: [9]: [10]: [11]: [12]: [13]: [14]: