26 luglio 2009

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 
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
CODICE-EXPANDO
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
EDITOR-BLOGGER
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
expando
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
image
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
expando
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
 CLASS-EXPANDO
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.




17 commenti :

  1. ciao bellissimo,credevo fosse piu' difficile ma le tue spiegazioni sono semplicemente perfette e se ci sono riuscito io e' tutto dire,grazie mille,sei veramente in gamba

    RispondiElimina
  2. salve. io che nn ho un blog ma un sito internet come posso fare?mi mandi tutto il tag? aiutami per favore

    RispondiElimina
  3. che effetto spettacolare! Molto interessante ancor di più del Lightbox 2 !!!!

    RispondiElimina
  4. terribile questo effetto!
    disorienta e sgrana le foto :O

    RispondiElimina
  5. L'effetto Expando l'ho creato per Blogger utilizzando gli script di Dynamic Drive.
    Si possono usare gli stessi script anche in siti di altro tipo

    RispondiElimina
  6. premetto che sono una capra, ma con l'editor di blogger (sia il vecchio che il nuovo) non mi compaiono le maniglie per il ridimensionamento...

    RispondiElimina
  7. Eccezionale ragazzi !
    L'effetto è di aumentare l'immagine (semplicemente passandoci sopra con il mouse) verso la destra.
    Come si fa però a ingrandirla verso sinistra ?
    Grazie.

    RispondiElimina
  8. @antonio
    Non è che si ingrandisce verso sinistra. Se vai nella pagina demo
    http://demo-parsifal32.blogspot.com/2010/05/demo-effetto-expando.html
    le prime tre foto si ingrandiscono dalla parte che hanno libera. La quarta, quella sotto (Anjelina Jolie) aumenta di dimensioni in modo simmetrico.
    Se le immagini le metti in una colonna, centrate, si allargheranno tutte così, se invece le metti incolonnate nella parte sinistra, si ingrandiranno a destra

    RispondiElimina
  9. anche a me come ad altri non compaiono le maniglie per ridimensionare le foto dopo averle caricate si può solo scegliere tra piccola/media/grande/estralarge/dimensioni originali
    ... è forse questo il motivo per cui non funziona?

    RispondiElimina
  10. io uso l'editor di blogger, ho messo "class expando" dove dici tu ma non funzione, mi funziona solo hostando le immagini...

    RispondiElimina
  11. ma non c'è un modo x farlo fare automaticamente senza ricorrere sempre class espando??

    RispondiElimina
  12. @BrilliDiLuce
    No. Una cosa automatica come Lightbox non c'è ancora

    RispondiElimina
  13. ciao, ho usato la funzione che hai proposto su un sito web "normale": ho messo il file expando.js in una cartella, l'ho richiamato dall'interno del file html ed è andato tutto bene.

    Ho poi provato ad inserirla nel mio blog - in wordpress, template di default - ma non ci sono riuscito: infatti il codice della pagine del blog non contiene head / head... come fare?

    Grazie

    Stefano

    RispondiElimina
  14. @Stefano
    Cerca dei plugin andando sulla pagina dell'autore
    http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm
    o anche su Google o sulla directory di Wordpress

    RispondiElimina
  15. effetto bellissimo, ma le foto pur espandendosi non sono tanto grandi, come posso fare per renderle ancora più grandi con l'espansione?
    grazie

    RispondiElimina
    Risposte
    1. Con questo effetto è complicato. Si può settare la dimensione della foto ingrandita con quest'altro metodo che è anche più semplice
      http://www.ideepercomputeredinternet.com/2012/07/css3-immagini-effetti-scale.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.