mooVirtualPano, panoramique à la sauce mootools
Le but du jeu :
défilement interactif à la souris d'une image panoramique
Pas de quoi se fracasser le sacrum par terre en criant vive le tsar mais, quand je l'ai pondu, je n'avais pas vu ce classique du genre sur fond de mootools, alors...
Pour le moment
- défilement droite/gauche en boucle ou pas (option loop: true (par défaut) pour une boucle infinie)
- défilement haut/bas de l'image (option tb: true (par défaut) pour une action haut/bas sur l'image)
- changement de l'image façon galerie (voir la syntaxe des liens dans le source. css class au choix à préciser dans les options)
- méthode reset(); pour remettre l'image dans sa position initiale
- diverses méthodes pour jouer avec le bébé avec des boutons plutôt qu'avec la souris sur l'image
Allez, les css pour tout ce petit monde-là
/* les containers */
#panoLR,
#pano,
#panoWB {
height : 300px;
width : 500px;
background : url(/assets/img/snakeLoader.gif) center center no-repeat;
margin : 15px 0;
overflow : hidden;
position : relative;
-moz-box-shadow : 5px 5px 10px rgba(255,255,255,0.5);
-webkit-box-shadow: 5px 5px 10px rgba(255,255,255,0.5);
-o-box-shadow : 5px 5px 10px rgba(255,255,255,0.5);
box-shadow : 5px 5px 10px rgba(255,255,255,0.5);
}
/* les containers pour l'image */
#panoImgWB,
#panoLRImg,
#panoImg {
height : 605px;
position: absolute;
}
/* les images */
#panoImgWB img,
#panoLRImg img,
#panoImg img {
display: block;
float : left;
}
/* la navigation */
/* façon galerie, les items peuvent être des images ou de bêtes liens textes */
#changeVignUl {
height : 50px;
padding : 0;
margin : 12px 0 20px 0;
list-style-type: none;
}
#changeVignUl li {
display: block;
height : 50px;
float : left;
margin : 0 4px 0 0;
border : 1px solid #fff;
}
/* et de manière générale */
.pustulesUl {
height : 20px;
padding : 0;
margin : 12px 0 20px 0;
list-style-type: none;
}
.pustulesUl li {
display: block;
float : left;
margin : 0 4px 0 0;
}
.pustulesUl a {
display : block;
padding : 2px 4px;
font-size: 12px;
border : 1px solid white;
}
.pustulesUl a:hover {
text-decoration: none;
color : #fff;
}
Exemple en boucle à 360°
Son html
Et le javascript
/*
les petits malins auront sans doute remarqué que je le faisais sur le load
et non sur le domready, c'est uniquement à cause du syntaxhighlighter qui, mettant
pas mal de temps à se réaliser, fausse la récupération des coordonnées.
Si les coordonnées sont récupérées sur le domready et changées sur le load par un autre script
qui fait bouger les éléments dans la page, ça fausse le comportement du script.
Si vous n'utilisez pas de script qui modifie le positionnement des éléments sur le load,
instanciez la class sur le domready
*/
var ziLoop = new mooVirtualPano($('pano'), $('panoImg'));
//et hop, tout est dit !
Exemple façon galerie (sans boucle infinie)
Son html
Un poil de js
var ziNonLoop = new mooVirtualPano($('panoLR'), $('panoLRImg'), {
loop : false,
changePano: 'newPanoLink'
});
Une petit méthode pour remettre à zéro (remettre les images au centre), ici, je m'occupe des deux exemples du haut
$('resetPano').addEvent('click', function(e){
e.stop();
ziLoop.reset();
ziNonLoop.reset();
});
Exemple à pustules sans défilement auto au passage de la souris
Le html
Et le js qui va avec
var pustulesPano = new mooVirtualPano($('panoWB'), $('panoImgWB'), {
auto: false,
loop: false
});
/*
ici, le but est de tenir la souris sur les boutons mais vous pourriez déclenchez
l'éveènement au click et arrêter le déilement avec la méthode stop()
en cliquant sur un autre bouton au lieu de le faire sur le mouseup
*/
$$('.pustules').addEvents({
'click' : function(e){
e.stop();
},
'mouseup': function(){
pustulesPano.stop();
}
});
$('toLeft').addEvent('mousedown', function(){
pustulesPano.toLeft(2);
});
$('toRight').addEvent('mousedown', function(){
pustulesPano.toRight(2);
});
$('toTop').addEvent('mousedown', function(){
pustulesPano.toTop(2);
});
$('toBottom').addEvent('mousedown', function(){
pustulesPano.toBottom(2);
});
A vous de jouer : télécharger mooVirtualPano.js
Have swing