Vediamo come sia possibile ottenere lo scroll di una foto con jQuery, per prima cosa chiariamo con un esempio cosa intendiamo per foto scroller:
Un foto scroller in jQuery: http://demo.studio-88.it/fotoScroller/
Come avete potuto vedere c’è un’immagine che può essere spostata nelle 4 dimesioni tramite delle frecce poste ai lati dell’immagine stessa.
Analizziamo il foglio di stile:
#fotoBox{
overflow:hidden;
position:relative;
width:530px;
height:430px;
}
#fotoBox img{
position:absolute;
top:0;
left:0;
z-index:1;
}
#fotoBoxFrame{
position:absolute;
top:0;
left:0;
z-index:2;
width:530px;
height:430px;
}
#pitchUp{
position:absolute;
top:0;
left:257px;
height:16px;
width:16px;
z-index:3;
background-color:#eee;
}
#pitchDown{
position:absolute;
bottom:37px;
left:257px;
height:16px;
width:16px;
z-index:3;
background-color:#eee;
}
#pitchLeft{
position:absolute;
top:187px;
left:0;
height:16px;
width:16px;
z-index:3;
background-color:#eee;
}
#pitchRight{
position:absolute;
top:187px;
right:0;
height:16px;
width:16px;
z-index:3;
background-color:#eee;
}
e il codice HTML:
Abbiamo quindi l’id fotoBox che contiente tutti gli elementi, che sono:
- la foto con id foto
- la cornice della foto fotoBoxFrame
- le 4 frecce pitchUp, pitchDown , pitchLeft , pitchRight
La foto è l’oggetto che vogliamo spostare nelle quattro direzioni quando con il mouse clicchiamo su una delle 4 frecce contenute nei div pitchUp, pitchDown , pitchLeft , pitchRight.
Il div fotoBoxFrame non ha nessuna funzione operativa, è solo una cornice per la foto.
Il codice jQuery è:
$(document).ready(function(){
$('#pitchRight').click(function(){
if( parseInt( $('#foto').css('left') ) >-500 ){
$('#foto').animate({left:'-=100px'},400);
}
});
$('#pitchLeft').click(function(){
if( parseInt( $('#foto').css('left') ) <0 ){
$('#foto').animate({left:'+=100px'},400);
}
});
$('#pitchUp').click(function(){
if( parseInt( $('#foto').css('top') ) <0 ){
$('#foto').animate({top:'+=70px'},400);
}
});
$('#pitchDown').click(function(){
if( parseInt( $('#foto').css('top') ) >-280 ){
$('#foto').animate({top:'-=70px'},400);
}
});
});
Questo codice è abbastanza semplice (e ripetitivo), l’unica cosa a cui abbiamo dovuto prestare un po’ di attenzione è l’if che contiene la singola animazione, infatti quando spostiamo “l’inquadratura” controlliamo sempre che lo spostamento non ci faccia spostare oltre la foto.