Blogbonzo: Matteo Magni

Purtroppo su IE ogni volta che inviamo un form le gif animate vengono fermate.

Ecco uno scenario tipico per questo errore: una form per inviare una foto dove si vuole fare attendere l’utente che finisca l’upload dandogli la sensazione, tramite una gif animata, che la pagina web stia lavorando.

<form onSubmit="gif()" name="myform" action="#" method="post" enctype="multipart/form-data">
<p id="wait">
<img id="WaitImage" src="images/loadingAnimation.gif"/><br />
<strong>È in corso l'invio ...<br />
L'operazione potrebbe richiedere qualche minuto, attendi senza chiudere questa finestra.
</strong>
</p>
</form>


Visto che su IE la gif che era nascosta, quando invio la form smette di essere animata, bisogna trovare un modo per farla ripartire.

Tutto si può fare dando l’impressione ad IE di aver modificato l’immagine con Javascript un tempo successivo all’invio della form, tramite questa istruzione:

setTimeout('document.getElementById("WaitImage").src = "images/loadingAnimation.gif"', 200);



<script type="text/javascript">
function gif()
{
if (document.forms["myform"]["file"].value != "")
{
document.getElementById(\'bottone_carica\').style.display = \'none\';
document.getElementById(\'wait\').style.display = \'block\';
setTimeout(\'document.getElementById("WaitImage").src = "images/loadingAnimation.gif"\', 200);
}
}
</script>


Così la gif bloccata ripartirà a eseguire la sua animazione.

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

image
image

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.

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

movie
iframe

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

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

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

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

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

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

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

<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 (yahoo, dom, event, anim)
• Ext (standalone, ext-core.js)
• Prototype + Scriptaculous
• jQuery
• MooTools (requires Fx.Styles and its dependancies)
• Dojo Toolkit (thanks Peter Higgins)

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

Gabba Gabba Hey
Bonzo

Come ho già avuto occasione di dire, mi piacciono molto le finestre modali per la visualizzazione delle immagini e dove potevo le ho sempre inserite.
Fino ad ora ho utilizzato in particolare lightbox, ma ovviamente ho testato anche altre soluzioni. Ultimamente però ho preso la decisione di utilizzare principalmente mootools come framework javascript quindi, visto che è più funzionale caricare solo una libreria per non appesantire troppo i client, ho deciso di sostituire lightbox con slimbox utilizzando il plugin relativo anche sul blog:

slimbox wordpress plugin/

Eccone alcuni esempi con immagini che già sono state usate nel mio blog.

Sequenza

il codice è questo:

Single example:
<a href=”img1.jpg” rel=”lightbox” title=”my caption”>thumbnail1</a>
Image set example:
<a href=”img1.jpg” rel=”lightbox[roadtrip]”>thumbnail1</a>
<a href=”img2.jpg” rel=”lightbox[roadtrip]”>thumbnail2</a>
<a href=”img3.jpg” rel=”lightbox[roadtrip]”>thumbnail3</a>

Ogni volta che si inserisce una immagine bisogna aggiungere l’attributo rel, lightbox se è solo una immagine o lightbox[roadtrip] se si vuole creare una sequenza.

Gabba Gabba Hey
Bonzo