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.