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:
Demos
Images
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 |
|
|
|
Thumb Gallery
Unlike the previous image gallery, this one is triggered by thumbnail links. It also uses a [skip counter][3] and is [continuous][4].
|
|
|
Flash
Single SWF
SWF Gallery
Flash Video
Movies
Single Movie (mov)
Single Movie (mpeg-4, controller disabled)
Single Movie (avi, autoplay disabled)
Single Movie (wmv)
Apple.com Trailer
YouTube
Google Video
Movie Gallery
MOV
WMV
FLV
External Website
This page
Mixed Content Gallery
swf
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]
`</p>
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:
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
<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>