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

• Demo dell'Effetto Zoom per Blogger -

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qkZOFP2MyEmEqOxQzfLYfOrUznepwSdGD0m1lyzy6khVlANGpYgi2R0qN6SkDbHJ0eFeULpvLD_K-JXOjlaCuXYCiAznla74BjG-MqUgaktpFXyJ7BCgw_i-y2JMwVF6a6Wwnwa5MZA/);
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++.