1 | /* Splickerbox - Code javascript |
---|
2 | * |
---|
3 | * Badge à la flickr, par BoOz booz AT rezo.net |
---|
4 | * |
---|
5 | * Fonctionne avec jQuery. |
---|
6 | **/ |
---|
7 | |
---|
8 | //fonction gadget pour avoir le this du contexte au bon objet |
---|
9 | //quand on fait des appels depuis des callbacks (setTimeout et autres events) |
---|
10 | function getObjectMethodClosure(object, method) { |
---|
11 | return function(arg) { |
---|
12 | return object[method](arg); |
---|
13 | } |
---|
14 | } |
---|
15 | |
---|
16 | //Quand le document est pret, on lance le plugin sur chaque |
---|
17 | //div de class splickrbox |
---|
18 | $(document).ready(function(){ |
---|
19 | $(".splickrbox").splicker(); |
---|
20 | }); |
---|
21 | |
---|
22 | //le plugin splicker, pour chaque image du div |
---|
23 | //on lui cree un objet SplickerBox |
---|
24 | jQuery.fn.splicker = function() { |
---|
25 | return this.each(function() { |
---|
26 | var img_cnt = $(this).find('img').size(); |
---|
27 | if(img_cnt > 0) { |
---|
28 | var size = $(this).find('img').css('width').replace('px',""); |
---|
29 | var box = new jQuery.SplickerBox(this,img_cnt,size); |
---|
30 | } |
---|
31 | }); |
---|
32 | } |
---|
33 | |
---|
34 | //Constructeur de l'objet |
---|
35 | jQuery.SplickerBox = function(e,m,s) { |
---|
36 | this.elt = e; |
---|
37 | this.max = m; |
---|
38 | $(this.elt).append('<div class="changeMe" style="position:absolute;left:0px;top:0px;"></div>'); |
---|
39 | this.c = $(this.elt).find('.changeMe'); |
---|
40 | this.rows = $('table',this.elt).get(0).rows.length-1; |
---|
41 | this.cols = this.max/this.rows; |
---|
42 | this.cptj = 0; |
---|
43 | this.last = 0; |
---|
44 | this.left = this.top=0; |
---|
45 | if(s == 0 || s == 'auto') |
---|
46 | this.cote = 100; |
---|
47 | else |
---|
48 | this.cote = s; |
---|
49 | this.init() |
---|
50 | } |
---|
51 | |
---|
52 | //les methodes |
---|
53 | jQuery.SplickerBox.prototype = { |
---|
54 | //on choisit la prochaine image |
---|
55 | itere: function() { |
---|
56 | this.cptj = Math.round(Math.random()*this.max) % this.max; |
---|
57 | if(this.cptj == this.last) this.cptj = (this.last+this.cols)%this.max; |
---|
58 | this.last = this.cptj; |
---|
59 | $("#statusMsg").html("it"+this.cptj+"=?"+this.max); |
---|
60 | }, |
---|
61 | //fixer la taille des images à la moitiée de la taille réelle |
---|
62 | //l'image doit être carree |
---|
63 | init: function() { |
---|
64 | $(this.elt).find('img').css({display: 'block', width:(this.cote/2) + "px",height:(this.cote/2) + "px", height: (this.cote/2) + "px",border:0}); |
---|
65 | $(this.c).css({width: this.cote + "px",height: this.cote + "px"}); |
---|
66 | this.start(); |
---|
67 | }, |
---|
68 | |
---|
69 | //on lance la premiere vignette apres un temps random entre 0 et 2s |
---|
70 | start: function() { |
---|
71 | setTimeout(getObjectMethodClosure(this,'doyourstuff'),(Math.random()*2)*1000); |
---|
72 | }, |
---|
73 | |
---|
74 | //iteration apres le timeout |
---|
75 | postpone: function() { |
---|
76 | $(this.c).css('background-color','transparent'); |
---|
77 | this.itere(); |
---|
78 | $(this.c).empty(); |
---|
79 | this.start(); |
---|
80 | }, |
---|
81 | |
---|
82 | //toute les bidouilles sur la taille etc |
---|
83 | //pour l'animation |
---|
84 | doyourstuff: function() { |
---|
85 | var or = $(this.elt).find('img').get(this.cptj); |
---|
86 | var image = or.cloneNode(true); |
---|
87 | image.style.width="100%"; |
---|
88 | image.style.height="100%"; |
---|
89 | |
---|
90 | var href = or.parentNode.href; |
---|
91 | |
---|
92 | $(image).css("cursor","pointer").click(function(){ |
---|
93 | //thickbox |
---|
94 | if(typeof imageArray != 'undefined' && href.match(/\.(jpeg|jpg|png|gif)$/i)){ |
---|
95 | TB_show('',href,'image'); |
---|
96 | }else{ |
---|
97 | window.document.location = href ; |
---|
98 | } |
---|
99 | }); |
---|
100 | |
---|
101 | $(this.c).append(image); |
---|
102 | $(this.c).css({width:this.cote+'px',height:this.cote+'px'}); |
---|
103 | |
---|
104 | var colonne = this.cptj%this.cols; |
---|
105 | this.left = colonne*this.cote/2; |
---|
106 | l = (colonne-(colonne%2)); |
---|
107 | if((colonne == this.cols-1) && this.cols%2 > 0) l = l-1; |
---|
108 | l = l*this.cote/2; |
---|
109 | $(this.c).css("left",l+"px"); |
---|
110 | |
---|
111 | var ligne = (this.cptj-(this.cptj%this.cols))/this.cols; |
---|
112 | this.top = ligne*this.cote/2; |
---|
113 | t = (ligne - (ligne%2)); |
---|
114 | if((ligne == this.rows-1) && (this.rows%2 > 0)) t = t-1; |
---|
115 | t= t* this.cote/2 |
---|
116 | $(this.c).css("top",t + "px"); |
---|
117 | |
---|
118 | |
---|
119 | var back = $(this.elt.parentNode).css('background-color'); |
---|
120 | //if(!back || back=='transparent') back = 'white'; |
---|
121 | //$(this.c).css('background-color',back); |
---|
122 | $(this.c).fadeIn(2000); |
---|
123 | setTimeout(getObjectMethodClosure(this,'resize'),4000); |
---|
124 | setTimeout(getObjectMethodClosure(this,'postpone'),7000); |
---|
125 | |
---|
126 | }, |
---|
127 | //on anime la grosse vignette |
---|
128 | resize: function() { |
---|
129 | var t = new Number(this.top); |
---|
130 | var l = new Number(this.left); |
---|
131 | jQuery(this.c).animate({top:t,left:l,width:this.cote/2,height:this.cote/2},1500); |
---|
132 | } |
---|
133 | } |
---|