Prototype è un popolare framework nato per creare web applications lato client in Javascript. Come jQuery e MooTools, ha contribuito ad agevolare la rivoluzione del web 2.0 con una serie di effetti animati molto leggeri, facilmente customizzabili ed esteticamente accattivanti come Zoomy, alternativa a Lightbox che andremo ad analizzare a breve. In realtà l’aspetto che lo rende più interessante e completo di Lightbox è la possibilità di trascinare le finestre zoomate attraverso la pressione del tasto sinistro del mouse, in sintesi il “drag & drop“: l’opzione è facilmente attivabile associando alla classe la corretta funzione, con valore true. Ma andiamo con ordine, creando innanzitutto un nuovo file Index.html e inserendo nel tag <head> i seguenti richiami ai files Css e Javascript:
Nel file in download in fondo all’articolo troverete già tutte le risorse nella main directory del sito, posizionate rispettivamente nelle cartelle css e js.
Sempre nell’<head>, attiviamo Zoomy associando alle due differenti classi (zoomy e zoomy2) le funzioni semplici e opzionali: nel primo caso lo zoom sarà senza caption (niente descrizione dell’immagine nella cornice), nel secondo caso la finestra sarà draggabile ({ draggable: true }), e con il caption che andremo a inserire nell’html.
Qui l’html per la gallery semplice, che come stabilito nel foglio di stile, si posiziona sulla sinistra del layout:
Simple
La seconda gallery si posiziona sulla destra: il comando alt stabilisce il nome che verrà visualizzato nel caption, sulla cornice in alto. Inoltre queste immagini, una volta zoomate, saranno trascinabili.
Draggable
- era" />
- /www.iwebdesigner.it/web-design/superbo-zoom-su-immagini-con-prototype/images/prototype.jpg" alt="Prototype Framework" />
Tutto molto semplice vero? Alla prossima!
Fonte