Blogbonzo: Matteo Magni

Consulente Informatico, Web Developer & System Administrator

Plugin shadowbox per wordpress

14 comments

Ho letto di questo componente Shadowbox 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 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 and is continuous.

Red Red Red

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



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

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>

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

Scarica il plugin versione 0.1
Ovviamente spero che se ci sono reeori qualcuno me lo segnali.

Gabba Gabba Hey
Bonzo

Written by Bonzo

gennaio 31st, 2008 at 9:55 am

14 Responses to 'Plugin shadowbox per wordpress'

Subscribe to comments with RSS or TrackBack to 'Plugin shadowbox per wordpress'.

  1. Ciao, volevo farti notare che anche io ho scritto un plugin per wordpress di shadowbox, esattamente 2 giorni prima…
    cmq ora il plugin è alla versione 0.3, se ti interessa lo trovi su http://www.ushoshunch.it
    Ciao, Josh

    josh

    8 feb 08 at 12:39

  2. Quando lo avevo scritto, non avevo trovato niente, complimenti per la tempestività allora.
    Io lo avevo fatto soprattutto per provare a sviluppare un plugin.

    Ora Proverò il tuo e se ho modifiche o suggerimenti te li mando.

    Ciao Bonzo

    Bonzo

    8 feb 08 at 12:47

  3. Grande, tranquillo non è una gara, anzi… se hai idee e possiamo metterle in piedi insieme :) ciao!

    josh

    8 feb 08 at 12:59

  4. Ho visto che è pensato per scriptaculous mentre io uso mootools.

    Si potrebbe far in modo che l’utente possa scegliere a che libreria appoggiarsi, visto che gli adapters ci sono.

    Bonzo

    8 feb 08 at 13:05

  5. Certo, dimmi, con mootools come si comporta? a me da il problema di pagina “scattosa” con scriptacolous.

    josh

    8 feb 08 at 13:09

  6. Ah, usi msn o jabber? che almeno facciamo prima :)

    josh

    8 feb 08 at 13:09

  7. Con mootools mi sembra vada bene, comunque qui è tutto basato su mootools.

    http://www.ushoshunch.it/2008/01/30/esempi-di-shadowbox-su-wordpress/
    questi non riesco a vederli?!?

    sono su msn o goggel talk con ilbonzo.org@gmail.com

    Bonzo

    8 feb 08 at 13:18

  8. Perchè ho disabilitato il plugin…
    ti aggiungo a msn appena riesco, ora devo uscire!
    Ciao, ci sentiamo!

    josh

    8 feb 08 at 13:20

  9. Ok

    Bonzo

    8 feb 08 at 13:21

  10. Bonzo

    12 feb 08 at 12:21

  11. Come faccio a far partire shadowbox da un button in flash con file xml?

    alberto

    8 mar 08 at 01:28

  12. [...] Ecco “finalmente” la versione 0.2 del mio plugin Shadowbox per wordpress. [...]

  13. ho provato ad utilizzare questo plugin in search bar ma non funziona.
    vorrei applicare questo plugin su google search form cosi i risultatti escono in una shadowbox.

    come posso farlo???

    grazie

    Salmen

    3 gen 09 at 01:58

  14. Ragazzi o un problema con il plugin Shadowbox JS. Il plugin con il sito funziona a meraviglia!! pero i problemi arrivano con l’editor di WordPress!! praticamente non funziona più l’inserimento delle immagini,video ecc. A voi succede??? avete già provato ad inserire immagini con l’editor mentre avete il plugin attivo???? sapete una soluzione per non dover disattivare l’ottimo plugin?? grazie ;)

    FX53

    25 mar 09 at 20:50

Leave a Reply