Come abilitare lo zoom nella versione mobile di Blogger.

Per impostazione di default, che ho constatato in tutti i modelli che ho visualizzato, viene impedito all'utente di aumentare le dimensioni della pagina visualizzata tramite dispositivo mobile. Chi usa lo smartphone conosce la semplice operazione di toccare lo schermo del cellulare con due dita unite e quindi di allargarle per visualizzare meglio i dettagli della pagina aperta.

Nella versione mobile dei blog su Blogger tale operazione di solito è impossibile effettuarla. Lo zoom invece è perfettamente funzionante nella versione desktop di Blogger e può essere usato pure con le dita se si ha un touch screen. Vediamo come fare una piccola modifica al codice per renderla invece possibile. Si utilizza la riga di codice del tag viewport di cui ho parlato nel post sulla Media Query.

Effetto zoom nelle immagini in stile Amazon e eBay.

Avrete certamente acquistato qualcosa su Amazon o su eBay e se ancora non lo avete fatto vi sarà comunque capitato di consultare il prezzo di un prodotto per poi paragonarlo a quello presente nei normali negozi. A molti di questi oggetti in vendita è associato un bellissimo effetto zoom che è presente anche in molti altri store online e che nel momento in cui si passa sopra alla immagine con il cursore se ne possono visualizzare i dettagli in una immagine molto più grande in un rettangolo che appare a lato.

Utilizzando il plugin Easy Image Zoom che è distribuito gratuitamente con licenza MIT vediamo come installare questo effetto segnatamente su Blogger ma direi in qualsiasi pagina web visto che nella installazione non è presente nessun tag specifico di Blogger. 

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 -

Zoom.it per inserire foto negli articoli da ingrandire e navigare con lo zoom.

Zoom.it è un interessante tool gratuito della Microsoft per inserire nei nostri siti delle foto di grandi dimensioni. Inoltre è gratuito e di facilissimo utilizzo. Per prima cosa va caricata la foto su un hosting come Picasa o Skydrive quindi ne va acquisito il link diretto. Zoom.it fornisce un javascript che permette di zoomare nella immagine senza bisogno di installare nulla nel nostro sito. Questo è fondamentale per evitare problemi di compatibilità tra le diverse librerie di javascript.

Occorre semplicemente incollare l'URL della immagine nella parte bassa della pagina e cliccare su Create. Dopo un processo rapidissimo compariranno due opzioni, la prima per ottenere il link diretto della immagine con gli strumenti di zoom e la seconda per avere il codice HTML da incollare nel blog appunto in modalità HTML

Seadragon per implementare foto di grandissime dimensioni nel blog insieme agli strumenti di zoom.

I laboratori della Microsoft hanno messo a punto un progetto veramente interessante per tutti coloro che volessero inserire nel proprio sito un’immagine molto grande senza perdere i singoli dettagli.

Seadragon è un servizio gratuito che permette di caricare immagini di grandissime dimensioni nei nostri siti. Ecco come procedere

1. Caricare nel web l’immagine che vogliamo inserire nel blog nel caso in cui non lo fosse già. Per il test ho usato una foto di wikipedia
2. Acquisirne l’URL ed incollarlo nel modulo di Seadragon
3. Cliccare su Create

Dopo pochi secondi viene fornito l’URL della foto, i bottoni per la condivisione su Delicious, Digg, Facebook e Twitter, e il codice HTML per implementare l’immagine di enormi dimensioni nel nostro sito

Da notare che saranno disponibili anche degli strumenti di navigazione all’interno dell’immagine

Indubbiamente molto interessante e affascinante. Per quanto riguarda le personalizzazioni c'è il parametro width=auto che inserisce l'immagine su tutta la larghezza del nostro post. Volendo possiamo modificarlo per renderlo più stretto. Questo vale anche per l'altezza che è di 400 px.