Terminate ormai le vacanze ci accingiamo a tornare in modalità Autumn per riprendere tutte le attività ordinarie che ci accompagnano durante il nostro anno lavorativo. Così, per dare un po’ di colore alle giornate che cominciano a diventare grigie continuiamo ad analizzare la nostra gallery fotografica realizzata con Mootools e CSS3.
Ci eravamo lasciati proponendo e descrivendo la soluzione alla richiesta di realizzazione di una galleria fotografica alternativa alla classica lista fissa di immagini.
La struttura HTML
Per il tag wrapper della gallery ho deciso di utilizzare un generico DIV poichè non siamo in un contesto definito, ma stiamo operando una realizzazione a se stante. In caso la gallery fosse riferita ad un articolo, o comunque fosse stata un contenuto correlato, avremmo potuto utilizzare il tag HTML5 <aside> già analizzato qualche mese fa.
La struttura HTML della gallery è molto semplice:
[html]
<div id="galleryWrapper">
<ul class="gallery clearfix">
<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/6.jpg" alt="" /></a></li>
…
</ul>
</div>
[/html]
All’interno del div che fa da wrapper generale della galleria fotografica abbiamo un elenco UL che contiene, a sua volta, un LI per ogni immagine.
CSS
L’importanza del CSS nello sviluppo di questo script non è primaria, ma voglio comunque porre l’attenzione sulle proprietà che ho applicato per la gestione dell’hover sull’immagine. Per proporre un’animazione anche sull’hover per l’immagine ho deciso di utilizzare la proprietà CSS3 transition per gestire animazioni semplici senza l’utilizzazione di Flash o Javascript.
[css]
.gallery a{
[…]
-webkit-transition-property: margin, width, height;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
}
.gallery a:hover{
margin:-15px 5px 5px -15px;
width:130px;
height:130px;
[…]
}
[/css]
Con queste regole vogliamo, per l’hover sull’immagine, predisporre lo spostamento e il relativo ridimensionamento dell’immagine. Chiaramente, l’animazione verrà visualizzata solamente su Webkit; sugli altri browser verrà comunque visualizzato l’effetto desiderato, ma senza animazione fluida.
Javascript
Dopo aver analizzato nel mio post precedente il funzionamento tecnico dell’animazione desiderata possiamo mettere ora le mani in pasta ed operarne la realizzazione.
Nella prima parte della classe Gallery ho effettuato le operazioni di assegnazione delle variabili e tra queste faccio menzione del calcolo dell’altezza dello spazio di tolleranza rispetto al punto centrale del box wrapper nel quale lo spostamento non avviene:
[javascript]
this.tollerance = parseInt((this.wrapperHeight/2)*0.1);
[/javascript]
Chiaramente this.wrapperHeight è l’altezza del box gallery.
Il fulcro vero e proprio della classe sono i metodi move e mouseMove:
[javascript]
mouseMove: function(e){
this.mouseIn = true;
this.mouseY = e.client.y – this.wrapperTop;
if (!this.mouseMoving) {
this.mouseMoving = true;
this.move();
}
},
move: function(){
if ((this.mouseIn)) {
var coordPoint = Math.abs(this.middle-this.mouseY);
if (coordPoint>this.tollerance) {
var moveY = (coordPoint*this.options.yMove)/this.middle;
if (this.mouseY>this.middle) moveY = -moveY;
moveY = this.element.getStyle(‘margin-top’).toInt()+moveY;
if (moveY>0) moveY=0;
if (Math.abs(moveY)>=this.elementHeight-this.wrapperHeight) moveY = this.wrapperHeight-this.elementHeight-10;
this.tween.start(moveY);
} else this.mouseMoving = false;
}
}
[/javascript]
Nel metodo mouseMove lo script cattura la posizione del mouse all’interno del box e in move, invece, calcola, in base a questa i parametri per il movimento della gallery.
Ma vediamo subito l’esempio completo al seguente link, in modo da poterne subito analizzare il vero funzionamento: http://jsfiddle.net/bGaDG/
Concludendo
La gallery realizzata è sicuramente una soluzione elegante e di impatto che però ha alcuni forti limiti per la pubblicazione su web. Chiaramente, la soluzione sviluppata non è sufficientemente adeguata, a livello di usabilità, per un sito web all’avanguardia. Sarebbe necessario un indicatore per far intuire, all’utente, che per muoversi all’interno della gallery bisogna spostare il proprio mouse; sarebbe anche necessario un indicatore del livello di scorrimento della gallery: una scrollbar che, magari, con il trascinamento sia anche un metodo alternativo alla navigazione con il puntatore del mouse.
Questi sarebbero alcuni degli improvements necessari per avere una gallery completamente ricca e all’avanguardia. In ogni caso, in questi articoli ho voluto concentrarmi sulla realizzazione tecnica dello script, lasciando da parte, magari per qualche prossimo post le migliorie di User Experience.
