More Mojo! Applicare effetti JavaScript sulle immagini con Image Magnifier - Image Zoom - Imagefx

In primo luogo, un altro effetto sulle immagini, MojoZoom. Simile a MojoMagnify, consente di visualizzare una porzione di immagine, ingrandita, spostando il mouse su di essa, visualizzando l'area da ingrandire in un apposito riquadro. Si può fare in modo che lo script o crei un box per la porzione "zoomata" (con impostazione predefinita per la dimensione ed il posizionamento) o si può specificare qualsiasi elemento che faccia da "finestra" per lo zoom. L'effetto può essere aggiunto o mediante un attributo personalizzato sull'elemento img o richiamandolo attraverso una funzione JavaScript.

La demo dell'effetto MojoZoom.

In secondo luogo, sembra che sia stato eseguito male il supporto dell'effetto MojoMagnify per IE prima di averlo pubblicato la settimana scorsa, ma sino ad ora non è giunta nessuna comunicazione. Adesso dovrebbe essere corretto. Inoltre, come è stato sottolineato nei commenti, è possibile richiamare questo effetto aggiungendo il metodo MojoMagnify.makeMagnifiable(). Maggiori info nella pagina di esempio.

Entrambi gli effetti cambiano l'immagine in link (se non è già presente uno), puntando alla versione ad alta risoluzione dell'immagine stessa.

Ci sarebbe ancora qualche test da fare (sembra OK in IE7, FF2, 3,1 Safari e Opera 9) e verrà eseguito il prima possibile.

MojoZoom - effetto zoom su una immagine con JavaScript

Per vedere tale effetto è stata preparata una pagina di esempio MojoZoom, tradotta in italiano, con configurazione dello script e parti di codice da inserire nella pagina html.

MojoMagnify - JavaScript Image Magnifier Example

Anche in questo caso è stata tradotta la relativa pagina di esempio MojoMagnify, come la precedente, con parti di codice da inserire per la corretta visualizzazione dell'effetto.

Ottenere effetti simili a Photoshop sulle immagini usando Javascript e canvas

Continuando gli esperimenti del "mondo -canvas" (rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting), viene presentato di seguito l'inizio di una libreria di effetti sulle immagini. Conosciamo i filtri di IE i quali hanno prodotto una serie di effetti per gli utenti web per molto tempo. Con l'elemento "canvas", ho cercato di ricreare alcuni di questi effetti, cercando di aggiungerne qualcuno in più. Il risultato è una piccola libreria con effetti quali:

Prestazioni e supporto rappresentano un pò un problema a tal punto da dubitare che possano trovare un uso diffuso nelle applicazioni web reali. Potrebbe rapprentare l'inizio di un lungo cammino per rendere "client side" un programma come Photoshop. Però è divertente. Tutti gli effetti sono supportati da Firefox 2 e l'ultima versione beta di Opera. Alcuni in IE e pochissimi in Safari (tutti gli effetti, pare, sono supportati con la Webkit nightly).

La pagina di esempio con la raccolta di effetti.

Buon divertimento con questi effetti and... many thanks to Jacob Seidelin! :)

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati