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