Lors de mon développement de
galerie avec Pylons, j'ai décidé de planter un peu de javascripts pour rendre la navigation plus agréable et avec 1-2 effets cools.
Tout est basé sur
JQuery, une librairie très pratique, et légère.
Voici les bouts de codes utiles, en vrac.
Scrolling des thumbs
Pour lui, j'ai ajouté quelques plugins à JQuery:
ScrollTo
MouseWheel
Ensuite, le code qui va bien:
//borrowed from jQuery easing plugin
//[url]http://gsgd.co.uk/sandbox/jquery.easing.php[/url]
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
$(document).ready(function() {
$('#mini').css('overflow','hidden');
$('#mini').mousewheel(function(event, delta) {
var mv;
if (delta > 0) {
mv = '-='+offset+'px';
} else {
mv = '+='+offset+'px';
}
$('#mini').scrollTo(mv,500, {easing:'elasout'});
return false;
});
$('#bottom_lnk').click(function() {
$('#mini').scrollTo('+='+offset+'px',1000, {easing:'elasout'});
});
$('#top_lnk').click(function() {
$('#mini').scrollTo('-='+offset+'px', 1000, {easing:'elasout'});
});
});
En gros, #mini correspond à la div contenant les miniatures; via javascript, je mets l'overflow à "hidden", de manière à supprimer les barres de scrolling.
J'ajoute 3 "listeners": un sur la roulette de la souri dans #mini, et deux sur des clics sur des éléments de la page (en l'occurence, deux divs).
Affichage de l'image "moyenne"
Là, c'est plus simple:
$(document).ready(function() {
$('.mini_lnk').click(function() {
path = String(this);
img = basename(path.replace('^http:\/',''));
$('#big_img_lnk').attr( {href: '/imager/Munich 20.09.2008/'+img+'/full', title: 'Open '+img+' in 1024x px' } );
$.get('/getExif/Munich 20.09.2008/'+img,{}, function(data) { $('#exifs').html(data);});
// if we rotated the previous image, it's now a "canvas" element.. have to remove canvas, ans put "img" instead
$('#big_img_lnk').html('<img id="big_img" src="/imager/Munich 20.09.2008/'+img+'/750" alt="'+img+'" />');
$('#quickurl').val('[url]http://gallery.internux.ch/gallery/Munich+20.09.2008/[/url]'+img);
return false;
});
}
En gros, je catch l'event "click" des miniatures, et je réécris à la volée l'URL de l'image moyenne; du fait que j'ai ajouté la possibilité de faire des rotations d'image, il m'a fallu faire un petit hack pour retomber sur mes pattes.
Je profite aussi pour aller chercher les informations exifs de l'image, et afficher son URL direct dans le champs prévu à cet effet.
Rien de bien compliqué en soi. Voire que du très simple, mais j'ai pas mal cherché, surtout pour l'histoire du scroll. Il y a une floppée de trucs déjà prêts, employant JQuery, mais ils ne me plaisaient pas.
Donc j'apporte ma Nième contribution ;)
Vous pouvez sans autre aller voir le code javascript in situ.
Happy coding (oupa, le JS, c'est un peu chiant quand même ;) )
