1$(document).ready(function () { 2 3 /********** Début diaporama ***********/ 4 5 var BlurBGImage = (function() { 6 7 var $bxWrapper = $('#bx-wrapper'), 8 // loading status to show while preloading images 9 $bxLoading = $bxWrapper.find('div.bx-loading'), 10 // container for the bg images and respective canvas 11 $bxContainer = $bxWrapper.find('div.bx-container'), 12 // the bg images we are gonna use 13 $bxImgs = $bxContainer.children('img'), 14 // total number of bg images 15 bxImgsCount = $bxImgs.length, 16 // the descriptif for the current image 17 $descriptif = $bxWrapper.find('h2:first'), 18 // the name for the current image 19 $name = $bxWrapper.find('h1:first'), 20 // bouton masquer 21 $masquer = $bxWrapper.find('#masquer'), 22 // volet liens équipements 23 $equipements = $('#equipements'), 24 // current image's index 25 current = 0, 26 animOptions = { speed : 600, variation : 2, blurFactor : 0.0625 }, 27 // control if currently animating 28 isAnim = false, 29 30 // init function 31 init = function() { 32 33 // preload all images and respective canvas 34 var loaded = 0; 35 36 $bxImgs.each( function(i) { 37 38 var $bximg = $(this); 39 40 // save the position of the image in data-pos 41 $('<img data-pos="' + $bximg.index() + '"/>').load(function() { 42 43 var $img = $(this), 44 // size of image to be fullscreen and centered 45 dim = getImageDim( $img.attr('src') ), 46 pos = $img.data( 'pos' ); 47 48 // add the canvas to the DOM 49 $.when( createCanvas( pos, dim ) ).done( function() { 50 51 ++loaded; 52 53 // all images and canvas loaded 54 if( loaded === bxImgsCount ) { 55 56 // apply style for bg image and canvas 57 centerImageCanvas(); 58 59 // hide loading status 60 $bxLoading.hide(); 61 62 // initialize events 63 initEvents(); 64 65 } 66 67 }); 68 69 }).attr( 'src', $bximg.attr('src') ); 70 71 }); 72 73 }, 74 // creates the blurred canvas image 75 createCanvas = function( pos, dim ) { 76 77 return $.Deferred( function(dfd) { 78 79 // create the canvas element: 80 // size and position will be the same like the fullscreen image 81 var $img = $bxImgs.eq( pos ), 82 imgW = dim.width, 83 imgH = dim.height, 84 imgL = dim.left, 85 imgT = dim.top, 86 87 canvas = document.createElement('canvas'); 88 canvas.className = 'bx-canvas'; 89 canvas.width = imgW; 90 canvas.height = imgH; 91 canvas.style.width = imgW + 'px'; 92 canvas.style.height = imgH + 'px'; 93 canvas.style.left = imgL + 'px'; 94 canvas.style.top = imgT + 'px'; 95 canvas.style.visibility = 'hidden'; 96 // save position of canvas to know which image this is linked to 97 canvas.setAttribute('data-pos', pos); 98 // append the canvas to the same container where the images are 99 $bxContainer.append( canvas ); 100 // blur it using the StackBlur script 101 //stackBlurImage( $img.get(0), dim, canvas, animOptions.blurFactor, false, dfd.resolve ); 102 var context = canvas.getContext("2d"); 103 var image = $img.get(0); 104 context.drawImage(image, 0, 0, dim.width, dim.height); 105 // Loop for each blur pass. 106 var pass, x, y; 107 var imgb = new Image; 108 imgb.src = $img.attr('src'); 109 context.globalAlpha = animOptions.blurFactor; 110 for (y = -3; y < 3; y += 1) { 111 for (x = -3; x < 3; x += 1) { 112 context.drawImage(imgb, x, y, dim.width, dim.height); 113 } 114 } 115 context.globalAlpha = 1; 116 117 118 dfd.resolve(); 119 120 }).promise(); 121 122 }, 123 // gets the image size and position in order to make it fullscreen and centered. 124 getImageDim = function( img ) { 125 126 var $img = new Image(); 127 128 $img.src = img; 129 130 var $win = $( window ), 131 w_w = $win.width(), 132 w_h = $win.height(), 133 r_w = w_h / w_w, 134 i_w = $img.width, 135 i_h = $img.height, 136 r_i = i_h / i_w, 137 new_w, new_h, new_left, new_top; 138 139 if( r_w > r_i ) { 140 141 new_h = w_h; 142 new_w = w_h / r_i; 143 144 } 145 else { 146 147 new_h = w_w * r_i; 148 new_w = w_w; 149 150 } 151 152 return { 153 width : new_w, 154 height : new_h, 155 left : ( w_w - new_w ) / 2, 156 top : ( w_h - new_h ) / 2 157 }; 158 159 }, 160 // initialize the events 161 initEvents = function() { 162 163 $( window ).on('resize.BlurBGImage', function( event ) { 164 165 // apply style for bg image and canvas 166 centerImageCanvas(); 167 return false;
168 169 }); 170 171 $('#au_suivant, .bx-container img').on('click', function( event ) { 172 if( !isAnim ) { 173 var pos = current; 174 ( pos < bxImgsCount - 1 ) ? ++pos : pos = 0; 175 isAnim = true; 176 // show the bg image 177 showImage( pos ); 178 } 179 return false; 180 }); 181 182 }, 183 // apply style for bg image and canvas 184 centerImageCanvas = function() { 185 186 $bxImgs.each( function(i) { 187 188 var $bximg = $(this), 189 dim = getImageDim( $bximg.attr('src') ), 190 $currCanvas = $bxContainer.children('canvas[data-pos=' + $bximg.index() + ']'), 191 styleCSS = { 192 width : dim.width, 193 height : dim.height, 194 left : dim.left, 195 top : dim.top 196 }; 197 198 $bximg.css( styleCSS ); 199 200 $currCanvas.css( styleCSS ); 201 202 if( i === current ) 203 $bximg.show(); 204 205 }); 206 207 }, 208 // shows the image at position "pos" 209 showImage = function( pos ) { 210 211 // current image 212 var $bxImage = $bxImgs.eq( current ); 213 // current canvas 214 $bxCanvas = $bxContainer.children('canvas[data-pos=' + $bxImage.index() + ']'), 215 // next image to show 216 $bxNextImage = $bxImgs.eq( pos ), 217 // next canvas to show 218 $bxNextCanvas = $bxContainer.children('canvas[data-pos='+$bxNextImage.index()+']'); 219 220 221 222 223 $.when( $descriptif.fadeOut() ).done( function() { 224 $descriptif.html( $bxNextImage.attr('description') ); 225 }); 226 227 $.when( $name.fadeOut() ).done( function() { 228 $name.html( $bxNextImage.attr('name') ); 229 }); 230 231 $masquer.fadeOut(); 232 $equipements.fadeOut(); 233 234 $bxCanvas.css( 'z-index', 100 ).css('visibility','visible'); 235 236 $.when( $bxImage.fadeOut( animOptions.speed ) ).done( function() { 237 238 switch( animOptions.variation ) { 239 240 case 1 : 241 $descriptif.fadeIn( animOptions.speed ); 242 $name.fadeIn( animOptions.speed ); 243 $masquer.fadeIn( animOptions.speed ); 244 $equipements.fadeIn( animOptions.speed ); 245 246 $.when( $bxNextImage.fadeIn( animOptions.speed ) ).done( function() { 247 248 $bxCanvas.css( 'z-index', 1 ).css('visibility','hidden'); 249 current = pos; 250 $bxNextCanvas.css('visibility','hidden'); 251 isAnim = false; 252 253 }); 254 break; 255 case 2 : 256 $bxNextCanvas.css('visibility','visible'); 257 258 $.when( $bxCanvas.fadeOut( animOptions.speed * 1.5 ) ).done( function() { 259 260 $(this).css({ 261 'z-index' : 1, 262 'visibility' : 'hidden' 263 }).show(); 264 265 $descriptif.fadeIn( animOptions.speed ); 266 $name.fadeIn( animOptions.speed ); 267 $masquer.fadeIn( animOptions.speed ); 268 $equipements.fadeIn( animOptions.speed ); 269 270 $.when( $bxNextImage.fadeIn( animOptions.speed ) ).done( function() { 271 272 current = pos; 273 $bxNextCanvas.css('visibility','hidden'); 274 isAnim = false; 275 276 }); 277 278 }); 279 break; 280 281 }; 282 283 }); 284 285 286 287 }; 288 289 return { 290 init : init 291 }; 292 293 })(); 294 295 // call the init function 296 BlurBGImage.init(); 297 298 /********** Fin diaporama ***********/ 299 300 });
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.