Superbo zoom su immagini con Prototype

Zoom su immagini JavaScript

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:

<link href="css/styles.css" rel="stylesheet" type="text/css" />

<script src="js/prototype.js" type="text/javascript"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,dragdrop"></script>

<script src="js/zoomy.js" type="text/javascript"></script>

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.

<script type="text/javascript">

Event.observe(window,"load",function() {

$$("ul.zoomy a").each(function(element){

new Zoomy(element, { hideCaption: true });

});

$$("ul.zoomy2 a").each(function(element){

new Zoomy(element, { draggable: true });

});

});

</script>

Qui l’html per la gallery semplice, che come stabilito nel foglio di stile, si posiziona sulla sinistra del layout:

<div>

<h3>Simple</h3>

<ul>

<li><a href="images/firefox-big.jpg" title="Firefox"><img src="images/firefox.jpg" alt="Firefox" /></a></li>

<li><a href="images/opera-big.jpg" title="Opera"><img src="images/opera.jpg" alt="Opera" /></a></li>

<li><a href="images/safari-big.jpg" title="Safari" ><img src="images/safari.jpg" alt="Safari" /></a></li>

<li><a href="images/prototype-big.jpg" title="Prototype Framework" ><img src="images/prototype.jpg" alt="Prototype Framework" /></a></li>

</ul>

</div>

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.

<div>

<h3>Draggable</h3>

<ul>

<li><a href="images/firefox-big.jpg" title="Firefox"><img src="images/firefox.jpg" alt="Firefox" /></a></li>

<li><a href="images/opera-big.jpg" title="Opera"><img src="images/opera.jpg" alt="Opera" /></a></li>

<li><a href="images/safari-big.jpg" title="Safari" ><img src="images/safari.jpg" alt="Safari" /></a></li>

<li><a href="images/prototype-big.jpg" title="Prototype Framework - &lt;a href=&quot;http://prototypejs.org&quot;&gt;http://prototypejs.org&lt;/a&gt;" ><img src="images/prototype.jpg" alt="Prototype Framework" /></a></li>

</ul>

</div>

Tutto molto semplice vero? Alla prossima!

Fonte

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *