Pubblicato il 01/05/11e aggiornato il

Come inserire l'Effetto Zoom nelle immagini di Blogger.

Quando si devono postare in un articolo delle foto molto grandi, è evidente che debbano essere ridimensionate. Questo va però a discapito della corretta visualizzazione dei dettagli. Possiamo collegare l'immagine al suo link originale, per farla aprire in un'altra finestra del browser se ci si clicca sopra, ma questo significa far uscire dal sito il visitatore. Vediamo come sia possibile applicare un Effetto di Zoom molto bello in modo tale da poter ingrandire una determinata porzione della foto. Ho testato l'effetto nei vecchi modelli con successo, mentre con i nuovi template il cursore non sempre è centrato bene dentro l'area da selezionare. Nella pagina dell'autore sono comunque presenti le istruzioni per calibrare al meglio tutte le distanze. Si usa la libreria JQuery che può essere incompatibile con altri script.

L'Effetto Zoom che vado a presentarvi si deve a Ben Nadel e la sua installazione su Blogger non presenta alcuna difficoltà. L'immagine da sottoporre all'effetto può avere qualsiasi dimensione, noi dobbiamo solo scegliere la larghezza di quella che vogliamo mostrare nel post. Ho messo in rete una

Ho anche postato sul mio canale di Youtube un brevissimo video tutorial



Per l'installazione si va come al solito su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, immediatamente sopra, si incolla questo codice

<!--Effetto Zoom Inizio-->
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='https://sites.google.com/site/scriptperilblog/javascript-2/zoom-clip.js' type='text/javascript'/>
<!--Effetto Zoom Fine - http://www.ideepercomputeredinternet.com-->

Poi si cerca la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

/* EFFETTO ZOOM INIZIO */
#view {
border: 1px solid #333333; /* Bordo della immagine */
overflow: hidden;
position: relative;
width: 500px; /* Larghezza della immagine */
}
#image {
display: block;
left: 0;
top: 0;
}
#zoom {
background-image: url(https://lh3.googleusercontent.com/_nT13UtBmmiU/TbygrkIQNbI/AAAAAAAATCQ/Bj_mU5IAThI/dissolvenza.png);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}
/* EFFETTO ZOOM FINE */

Si può personalizzare il bordo della immagine modificando la riga evidenziata di viola ricordandosi come si deve fare per effettuare dei cambiamenti nello stile dei bordi. Oltre ad altri parametri più da geek, il valore fondamentale da fissare è la larghezza della foto da mostrare nel post evidenziata di rosso. Naturalmente la dimensione originale della immagine da sottoporre a zoom può essere come quella di un wallpaper e anche più grande. Detta immagine deve essere caricata su un hosting quale Picasa e se ne deve acquisire l'hotlink. Non si può mettere più di una immagine per ogni articolo con questo effetto.

La foto da sottoporre a zoom deve essere inserita nel post in Modalità HTML con questa sintassi

<div id="view">
<img id="image" src="URL_IMMAGINE" width="500px" alt="NOME_IMMAGINE" />
</div>

dove la larghezza deve essere la stessa di quella inserita nel modello e al posto di URL_IMMAGINE e NOME_IMMAGINE si inseriscono rispettivamente l'indirizzo e il testo alternativo. Quest'ultimo serve per questioni SEO relative al tag Alt. Nel caso in cui il cursore non sia perfettamente al centro della finestra di zoom, si deve modificare il file javascript  https://sites.google.com/site/scriptperilblog/javascript-2/zoom-clip.js. Segnatamente riguardo alle porzioni di codice

var zoomLeft = (mouseLeft - (zoom.width() / 2));
var zoomTop = (mouseTop - (zoom.height() / 2))

……

zoom.css({
left: (zoomLeft + "px"),
top: (zoomTop + "px")

Si possono modificare anche altre variabili seguendo le istruzioni dell'autore che sono presenti anche all'interno dello stesso file. Questa operazione la consiglio solo ai più esperti usando un editor specifico quale Notepad++.





9 commenti :

  1. ciao e buon anno :-) stavo cercando una cosa nel tuo sito ma non riesco a trovarla o meglio non so come cercarla: vorrei ingrandire le immagini del mio blog per farle coincidere a dx e sx all'area di testo sottostante, perchè sono più strette. Anche se metto extralarge nelle foto, risultano più strette. Sai dirmi quale codice modificare nell'html? ci sarà un codice standard in cui sono inserite le misure delle foto, giusto? capisco che le foto sono già grandi, ma quando si parla di cibo non è mai troppo :-) grazie mille e buonissima serata :-))

    RispondiElimina
  2. @Sonia
    Devi per prima cosa caricare le foto su Picasa Web Album
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
    quindi devi postarle andando su HTML (invece di Scrivi) con questo codice
    <img style="display: block; margin-left: auto; margin-right: auto" src="URL_IMMAGINE" width="500"/>
    dove al posto di URL_IMMAGINE ci metti il suo indirizzo e al posto di 500 i pixel della larghezza che puoi trovare anche facendo delle prove.
    La parte
    margin-left: auto; margin-right: auto
    serve per centrare l'immagine e, se non ti interessa la puoi anche togliere.

    RispondiElimina
  3. P.S. mi è scappato un punto e virgola
    la stringa giusta è margin-right: auto;"

    RispondiElimina
  4. ciao e grazie mille. Io picasa lo uso solo per i collage delle foto, ma ora mi sa che devo allargare i miei orizzonti e mi leggo il tuo articolo correlato. Ci provo e ti faccio sapere. buona giornata e a presto :-)

    RispondiElimina
  5. ciau, dunque: mentre carica la vagonata di foto su picasa, ho provato a modificare la grandezza delle foto direttamente da html come mi hai detto e ho visto che per default lui mette 640x480. Io ho modificato i parametri e devo dire che già così mi piace tanto. D'ora in poi quando metto le foto decido di volta in volta che dimensioni scegliere a seconda delle foto :-) grazie infinite, sei sempre un pozzo di informazioni! ciauuu :))

    RispondiElimina
  6. @Sonia
    Hai visto che il diavolo era meno brutto di come sembrava ;))

    RispondiElimina
  7. porcapaletta! hai proprio ragione!! ne ho ingrandite già dozzine...non vorrei farmi prendere la mano dalle misure però :-)) spero di non stare esagerando :)) grazie ancora e la prossima torta è per te :))

    RispondiElimina
  8. Una domanda, io che ho un blog di unghie posso mettere questo effetto in modo che poi tutte le foto che pubblico potranno essere zoommate o devo sempre aggiungerlo io voltav per volta? thanks

    RispondiElimina
    Risposte
    1. @BrilliDiLuce
      Perché le foto abbiano un effetto zoom le devi inserire secondo le modalità del codice vale a dire devi inserirle nel post in Modalità HTML con questa sintassi

      <div id="view">
      <img id="image" src="URL_IMMAGINE" width="500px" alt="NOME_IMMAGINE" />
      </div>

      dopo aver caricato la foto su Picasa e averne acquisito il link diretto.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.