Come ingrandire le immagini dell’articolo al passaggio del mouse con l’effetto Expando.

In un precedente articolo ho parlato dell’effetto Lightbox 2 che però non ho mai realmente inserito dentro il blog; adesso sul sito Dynamic Drive ne ho trovato uno script  molto semplice e molto di effetto che sono sicuro incontrerà il gradimento di molti blogger. Non ha un vero e proprio nome, lo chiamerò Expando Image Script.
Prima di iniziare la trattazione provate a puntare con il mouse una delle foto del post 

• Demo dell'effetto Expando -

Vedrete che si ingrandiranno fino a prendere la loro grandezza naturale. Questo poteva essere fatto cliccandoci sopra e aprendo la pagina in cui era caricata l’immagine.



Certo però che questo effetto è veramente tutta un’altra cosa; l’ho già testato su tutti i principali browser e non dà problemi di sorta. Vediamo quale è il meccanismo per inserirlo nel blog.

Andate su Layout > Modifica HTML e salvate il modello completo. Dopo aver metto il segno di spunta a espandi modelli widget cercate la riga di codice </head>. Immediatamente sopra a questa riga incollate questo codice 

<!-- EXPANDO START -->
<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/expando.js">
/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */
</script>
<noscript><a href='http://goo.gl/Z0qw4' target='_blank'><span style='font-size: x-small;'>Effetti Immagini</span></a></noscript>
<!--EXPANDO END - www.ideepercomputeredinternet.com-->

Esattamente come mostrato in questo screenshot

Adesso salvate il modello. Quando scrivete un articolo per inserire delle immagini che si espandano nel modo appena mostrato dovete procedere nel seguente modo.
INSERIRE LE IMMAGINI DIRETTAMENTE DALL’EDITOR DI BLOGGER
In questo caso dopo aver inserito l’immagine con il consueto sistema dell’editor di Blogger questa dovrà essere ridimensionata attraverso le maniglie che sono messe a disposizione

quindi passare alla Modalità HTML ed inserire l’attributo class=”expando” subito dopo le dimensioni della foto e prima dell’URL della foto stessa. Ecco un altro screenshot che mostra più o meno la posizione in cui deve essere inserito

Dopo aver pubblicato il post potete verificare l’effetto puntando la foto con il mouse. Ovviamente l’immagine deve essere ridimensionata altrimenti rimane così com’è!
INSERIRE DELLE IMMAGINI GIA’ PRESENTI NEL WEB
E’ la cosa da preferire ed il procedimento è più o meno lo stesso. Infatti dopo che avete inserito un’immagine tramite l’URL, per esempio con Windows Live Writer, bisognerà passare alla modalità HTML ed inserire sempre la stringa class=”expando” subito dopo il tag img come mostrato in quest’altro screenshot

se invece le immagini già presenti nel web le inserite con l’editor di Blogger, allora class=”expando” deve essere inserito come in precedenza dopo le dimensioni della foto

Questo è un sistema relativamente semplice e veloce per dare un tocco di originalità al vostro blog e che certamente provocherà commenti e feedback da parte dei vostri lettori.
Se per pubblicare gli articoli utilizzate Windows Live Writer, nel momento in cui inserite delle immagini saranno presenti quasi sempre dei CSS che vengono visualizzati in modalità HTML da un’espressione del tipo style=”   …   “. L’importante è non inserire la classe expando all’interno di quel campo di azione
 
Per finire tornate nuovamente nel post di demo linkato in precedenza e puntate con il mouse la foto di Anjelina Jolie. Sembrerà uscire dallo schermo per baciarvi con le sue splendide labbra.