[30] | 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 | } |
---|