Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

jQuery: scrollare una foto.

Scritto da Fare-internet il 25 ottobre 2010 condividi condividi

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:

<div id="fotoBox">
 <img src="img/gallinelle.jpg" alt="Gallinelle" id="foto" />
 <img src="img/scrollBox.png" alt="Cornice" id="fotoBoxFrame" />
 <div id="pitchUp"><img src="img/arrow_up.png" alt="Up" /></div>
 <div id="pitchDown"><img src="img/arrow_down.png"  alt="Up" /></div>
 <div id="pitchLeft"><img src="img/arrow_left.png"  alt="Left" /></div>
 <div id="pitchRight"><img src="img/arrow_right.png" alt="Right" /></div>
</div>

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.

Tag: , ,  

Twitter