1/** 2 * Coin Slider - Unique jQuery Image Slider 3 * @version: 1.0 - (2010/04/04) 4 * @requires jQuery v1.2.2 or later 5 * @author Ivan Lazarevic 6 * Examples and documentation at: http://workshop.rs/projects/coin-slider/ 7 8 * Licensed under MIT licence: 9 * http://www.opensource.org/licenses/mit-license.php 10**/ 11 12(function($) { 13 14 var params = new Array; 15 var order = new Array; 16 var images = new Array; 17 var links = new Array; 18 var linksTarget = new Array; 19 var titles = new Array; 20 var interval = new Array; 21 var imagePos = new Array; 22 var appInterval = new Array; 23 var squarePos = new Array; 24 var reverse = new Array; 25 26 $.fn.coinslider= $.fn.CoinSlider = function(options){ 27 28 init = function(el){ 29 30 order[el.id] = new Array(); // order of square appereance 31 images[el.id] = new Array(); 32 links[el.id] = new Array(); 33 linksTarget[el.id] = new Array(); 34 titles[el.id] = new Array(); 35 imagePos[el.id] = 0; 36 squarePos[el.id] = 0; 37 reverse[el.id] = 1; 38 39 params[el.id] = $.extend({}, $.fn.coinslider.defaults, options); 40 41 // create images, links and titles arrays 42 $.each($('#'+el.id+' img'), function(i,item){ 43 images[el.id][i] = $(item).attr('src'); 44 links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : ''; 45 linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : ''; 46 titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : ''; 47 $(item).hide(); 48 $(item).next().hide(); 49 }); 50 51 52 // set panel 53 $(el).css({ 54 'background-image':'url('+images[el.id][0]+')', 55 'width': params[el.id].width, 56 'height': params[el.id].height, 57 'position': 'relative', 58 'background-position': 'top left' 59 }).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />"); 60 61 62 // create title bar 63 $('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>"); 64 65 $.setFields(el); 66 67 if(params[el.id].navigation) 68 $.setNavigation(el); 69 70 $.transition(el,0); 71 $.transitionCall(el); 72 73 } 74 75 // squares positions 76 $.setFields = function(el){ 77 78 tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw); 79 tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph); 80 81 counter = sLeft = sTop = 0; 82 tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth; 83 tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight; 84 85 for(i=1;i <= params[el.id].sph;i++){ 86 gapx = tgapx; 87 88 if(gapy > 0){ 89 gapy--; 90 sHeight = tHeight+1; 91 } else { 92 sHeight = tHeight; 93 } 94 95 for(j=1; j <= params[el.id].spw; j++){ 96 97 if(gapx > 0){ 98 gapx--; 99 sWidth = tWidth+1; 100 } else { 101 sWidth = tWidth; 102 } 103 104 order[el.id][counter] = i+''+j; 105 counter++; 106 107 if(params[el.id].links) 108 $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>"); 109 else 110 $('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>"); 111 112 // positioning squares 113 $("#cs-"+el.id+i+j).css({ 114 'background-position': -sLeft +'px '+(-sTop+'px'), 115 'left' : sLeft , 116 'top': sTop 117 }); 118 119 sLeft += sWidth; 120 } 121 122 sTop += sHeight; 123 sLeft = 0; 124 125 } 126 127 128 $('.cs-'+el.id).mouseover(function(){ 129 $('#cs-navigation-'+el.id).hide(); 130 }); 131 132 $('.cs-'+el.id).mouseout(function(){ 133 $('#cs-navigation-'+el.id).hide(); 134 }); 135 136 $('#cs-title-'+el.id).mouseover(function(){ 137 $('#cs-navigation-'+el.id).hide(); 138 }); 139 140 $('#cs-title-'+el.id).mouseout(function(){ 141 $('#cs-navigation-'+el.id).hide(); 142 }); 143 144 if(params[el.id].hoverPause){ 145 $('.cs-'+el.id).mouseover(function(){ 146 params[el.id].pause = true; 147 }); 148 149 $('.cs-'+el.id).mouseout(function(){ 150 params[el.id].pause = false;
151 }); 152 153 $('#cs-title-'+el.id).mouseover(function(){ 154 params[el.id].pause = true; 155 }); 156 157 $('#cs-title-'+el.id).mouseout(function(){ 158 params[el.id].pause = false; 159 }); 160 } 161 162 163 }; 164 165 166 $.transitionCall = function(el){ 167 168 clearInterval(interval[el.id]); 169 delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay; 170 interval[el.id] = setInterval(function() { $.transition(el) }, delay); 171 172 } 173 174 // transitions 175 $.transition = function(el,direction){ 176 177 if(params[el.id].pause == true) return; 178 179 $.effect(el); 180 181 squarePos[el.id] = 0; 182 appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay); 183 184 $(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' }); 185 186 if(typeof(direction) == "undefined") 187 imagePos[el.id]++; 188 else 189 if(direction == 'prev') 190 imagePos[el.id]--; 191 else 192 imagePos[el.id] = direction; 193 194 if (imagePos[el.id] == images[el.id].length) { 195 imagePos[el.id] = 0; 196 } 197 198 if (imagePos[el.id] == -1){ 199 imagePos[el.id] = images[el.id].length-1; 200 } 201 202 $('.cs-button-'+el.id).removeClass('cs-active'); 203 $('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active'); 204 205 if(titles[el.id][imagePos[el.id]]){ 206 $('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed); 207 $('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]); 208 } else { 209 $('#cs-title-'+el.id).css('opacity',0); 210 } 211 212 }; 213 214 $.appereance = function(el,sid){ 215 216 $('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]); 217 218 if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) { 219 clearInterval(appInterval[el.id]); 220 return; 221 } 222 223 $('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' }); 224 $('#cs-'+el.id+sid).animate({ opacity: 1 }, 300); 225 squarePos[el.id]++; 226 227 }; 228 229 // navigation 230 $.setNavigation = function(el){ 231 // create prev and next 232 $(el).append("<div id='cs-navigation-"+el.id+"'></div>"); 233 $('#cs-navigation-'+el.id).hide(); 234 235 $('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>"); 236 $('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>"); 237 $('#cs-prev-'+el.id).css({ 238 'position' : 'absolute', 239 'top' : params[el.id].height/2 - 15, 240 'left' : 0, 241 'z-index' : 1001, 242 'line-height': '30px', 243 'opacity' : params[el.id].opacity 244 }).click( function(e){ 245 e.preventDefault(); 246 $.transition(el,'prev'); 247 $.transitionCall(el); 248 }).mouseover( function(){ $('#cs-navigation-'+el.id).show() }); 249 250 $('#cs-next-'+el.id).css({ 251 'position' : 'absolute', 252 'top' : params[el.id].height/2 - 15, 253 'right' : 0, 254 'z-index' : 1001, 255 'line-height': '30px', 256 'opacity' : params[el.id].opacity 257 }).click( function(e){ 258 e.preventDefault(); 259 $.transition(el); 260 $.transitionCall(el); 261 }).mouseover( function(){ $('#cs-navigation-'+el.id).show() }); 262 263 // image buttons 264 $("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id)); 265 266 267 for(k=1;k<images[el.id].length+1;k++){ 268 $('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>"); 269 } 270 271 $.each($('.cs-button-'+el.id), function(i,item){ 272 $(item).click( function(e){ 273 $('.cs-button-'+el.id).removeClass('cs-active'); 274 $(this).addClass('cs-active'); 275 e.preventDefault(); 276 $.transition(el,i); 277 $.transitionCall(el); 278 }) 279 }); 280 281 $('#cs-navigation-'+el.id+' a').mouseout(function(){ 282 $('#cs-navigation-'+el.id).hide(); 283 params[el.id].pause = false; 284 }); 285 286 $("#cs-buttons-"+el.id).css({ 287 'left' : '467px', 288 'margin' : '-35px 0 0 18px', 289 'position' : 'absolute' 290 291 }); 292 293 294 } 295 296 297 298 299 // effects 300 $.effect = function(el){ 301 302 effA = ['random','swirl','rain','straight']; 303 if(params[el.id].effect == '') 304 eff = effA[Math.floor(Math.random()*(effA.length))]; 305 else 306 eff = params[el.id].effect; 307 308 order[el.id] = new Array(); 309 310 if(eff == 'random'){ 311 counter = 0; 312 for(i=1;i <= params[el.id].sph;i++){ 313 for(j=1; j <= params[el.id].spw; j++){ 314 order[el.id][counter] = i+''+j; 315 counter++; 316 } 317 } 318 $.random(order[el.id]); 319 } 320 321 if(eff == 'rain') { 322 $.rain(el); 323 } 324 325 if(eff == 'swirl') 326 $.swirl(el); 327 328 if(eff == 'straight') 329 $.straight(el); 330 331 reverse[el.id] *= -1; 332 if(reverse[el.id] > 0){ 333 order[el.id].reverse(); 334 } 335 336 } 337 338 339 // shuffle array function 340 $.random = function(arr) { 341 342 var i = arr.length; 343 if ( i == 0 ) return false;
344 while ( --i ) { 345 var j = Math.floor( Math.random() * ( i + 1 ) ); 346 var tempi = arr[i]; 347 var tempj = arr[j]; 348 arr[i] = tempj; 349 arr[j] = tempi; 350 } 351 } 352 353 //swirl effect by milos popovic 354 $.swirl = function(el){ 355 356 var n = params[el.id].sph; 357 var m = params[el.id].spw; 358 359 var x = 1; 360 var y = 1; 361 var going = 0; 362 var num = 0; 363 var c = 0; 364 365 var dowhile = true; 366 367 while(dowhile) { 368 369 num = (going==0 || going==2) ? m : n; 370 371 for (i=1;i<=num;i++){ 372 373 order[el.id][c] = x+''+y; 374 c++; 375 376 if(i!=num){ 377 switch(going){ 378 case 0 : y++; break; 379 case 1 : x++; break; 380 case 2 : y--; break; 381 case 3 : x--; break; 382 383 } 384 } 385 } 386 387 going = (going+1)%4; 388 389 switch(going){ 390 case 0 : m--; y++; break; 391 case 1 : n--; x++; break; 392 case 2 : m--; y--; break; 393 case 3 : n--; x--; break; 394 } 395 396 check = $.max(n,m) - $.min(n,m); 397 if(m<=check && n<=check) 398 dowhile = false; 399 400 } 401 } 402 403 // rain effect 404 $.rain = function(el){ 405 var n = params[el.id].sph; 406 var m = params[el.id].spw; 407 408 var c = 0; 409 var to = to2 = from = 1; 410 var dowhile = true; 411 412 413 while(dowhile){ 414 415 for(i=from;i<=to;i++){ 416 order[el.id][c] = i+''+parseInt(to2-i+1); 417 c++; 418 } 419 420 to2++; 421 422 if(to < n && to2 < m && n<m){ 423 to++; 424 } 425 426 if(to < n && n>=m){ 427 to++; 428 } 429 430 if(to2 > m){ 431 from++; 432 } 433 434 if(from > to) dowhile= false; 435 436 } 437 438 } 439 440 // straight effect 441 $.straight = function(el){ 442 counter = 0; 443 for(i=1;i <= params[el.id].sph;i++){ 444 for(j=1; j <= params[el.id].spw; j++){ 445 order[el.id][counter] = i+''+j; 446 counter++; 447 } 448 449 } 450 } 451 452 $.min = function(n,m){ 453 if (n>m) return m; 454 else return n; 455 } 456 457 $.max = function(n,m){ 458 if (n<m) return m; 459 else return n; 460 } 461 462 this.each ( 463 function(){ init(this); } 464 ); 465 466 467 }; 468 469 470 // default values 471 $.fn.coinslider.defaults = { 472 width: 728, // width of slider panel 473 height: 315, // height of slider panel 474 spw: 7, // squares per width 475 sph: 5, // squares per height 476 delay: 3000, // delay between images in ms 477 sDelay: 30, // delay beetwen squares in ms 478 opacity: 0.7, // opacity of title and navigation 479 titleSpeed: 500, // speed of title appereance in ms 480 effect: 'rain', // random, swirl, rain, straight 481 navigation: true, // prev next and buttons 482 links : true, // show images as links 483 hoverPause: true // pause on hover 484 }; 485 486})(jQuery); 487
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.