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