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+"'><div class='cs-title-inner'></div><a class='cs-title-trigger'></a></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 if(params[el.id].hoverPause){ 128 $('.cs-'+el.id).mouseover(function(){ 129 params[el.id].pause = true; 130 }); 131 132 $('.cs-'+el.id).mouseout(function(){ 133 params[el.id].pause = false; 134 }); 135 136 $('#cs-title-'+el.id).mouseover(function(){ 137 params[el.id].pause = true; 138 }); 139 140 $('#cs-title-'+el.id).mouseout(function(){ 141 params[el.id].pause = false; 142 }); 143 } 144 145 146 }; 147 148 149 $.transitionCall = function(el){ 150 151 clearInterval(interval[el.id]); 152 delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay; 153 interval[el.id] = setInterval(function() { $.transition(el) }, delay); 154 155 } 156 157 // transitions 158 $.transition = function(el,direction){ 159 160 if(params[el.id].pause == true) return; 161 162 $.effect(el); 163 164 squarePos[el.id] = 0; 165 appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay); 166 167 $(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' }); 168 169 if(typeof(direction) == "undefined") 170 imagePos[el.id]++; 171 else 172 if(direction == 'prev') 173 imagePos[el.id]--; 174 else 175 imagePos[el.id] = direction; 176 177 if (imagePos[el.id] == images[el.id].length) { 178 imagePos[el.id] = 0; 179 } 180 181 if (imagePos[el.id] == -1){ 182 imagePos[el.id] = images[el.id].length-1; 183 } 184 185 $('.cs-button-'+el.id).removeClass('cs-active'); 186 $('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active'); 187 188 if(titles[el.id][imagePos[el.id]]){ 189 190 $('#cs-title-'+el.id).css('display', 'block'); 191 $('#cs-title-'+el.id).find('.cs-title-inner').html(titles[el.id][imagePos[el.id]]+""); 192 } else { 193 $('#cs-title-'+el.id).css('display', 'block'); 194 } 195 196 }; 197
198 $.appereance = function(el,sid){ 199 200 $('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]); 201 202 if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) { 203 clearInterval(appInterval[el.id]); 204 return; 205 } 206 207 $('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' }); 208 $('#cs-'+el.id+sid).animate({ opacity: 1 }, 300); 209 squarePos[el.id]++; 210 211 }; 212 213 // navigation 214 $.setNavigation = function(el){ 215 // create prev and next 216 $(el).append("<div id='cs-navigation-"+el.id+"'></div>"); 217 $('#cs-navigation-'+el.id).show(); 218 219 $('#cs-navigation-'+el.id).append("<a id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>"); 220 $('#cs-navigation-'+el.id).append("<a id='cs-next-"+el.id+"' class='cs-next'>next</a>"); 221 $('#cs-prev-'+el.id).css({ 222 'position' : 'absolute', 223 'top' : params[el.id].height/2 - 15, 224 'left' : 0, 225 'z-index' : 1001, 226 'line-height': '30px', 227 'opacity' : params[el.id].opacity 228 }).click( function(e){ 229 e.preventDefault(); 230 $.transition(el,'prev'); 231 $.transitionCall(el); 232 }).mouseover( function(){ $('#cs-navigation-'+el.id).show() }); 233 234 $('#cs-next-'+el.id).css({ 235 'position' : 'absolute', 236 'top' : params[el.id].height/2 - 15, 237 'right' : 0, 238 'z-index' : 1001, 239 'line-height': '30px', 240 'opacity' : 1 241 }).click( function(e){ 242 e.preventDefault(); 243 $.transition(el); 244 $.transitionCall(el); 245 }).mouseover( function(){ $('#cs-navigation-'+el.id).show() }); 246 247 // image buttons 248 $("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id)); 249 250 251 for(k=1;k<images[el.id].length+1;k++){ 252 $('#cs-buttons-'+el.id).append("<a class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'></a>"); 253 } 254 255 $.each($('.cs-button-'+el.id), function(i,item){ 256 $(item).click( function(e){ 257 if($(this).hasClass('cs-active')){return false} 258 else{$('.cs-button-'+el.id).removeClass('cs-active'); 259 $(this).addClass('cs-active'); 260 e.preventDefault(); 261 $.transition(el,i); 262 $.transitionCall(el)} 263 264 }) 265 }); 266 } 267 268 269 270 271 // effects 272 $.effect = function(el){ 273 274 effA = ['random','swirl','rain','straight']; 275 if(params[el.id].effect == '') 276 eff = effA[Math.floor(Math.random()*(effA.length))]; 277 else 278 eff = params[el.id].effect; 279 280 order[el.id] = new Array(); 281 282 if(eff == 'random'){ 283 counter = 0; 284 for(i=1;i <= params[el.id].sph;i++){ 285 for(j=1; j <= params[el.id].spw; j++){ 286 order[el.id][counter] = i+''+j; 287 counter++; 288 } 289 } 290 $.random(order[el.id]); 291 } 292 293 if(eff == 'rain') { 294 $.rain(el); 295 } 296 297 if(eff == 'swirl') 298 $.swirl(el); 299 300 if(eff == 'straight') 301 $.straight(el); 302 303 reverse[el.id] *= -1; 304 if(reverse[el.id] > 0){ 305 order[el.id].reverse(); 306 } 307 308 } 309 310 311 // shuffle array function 312 $.random = function(arr) { 313 314 var i = arr.length; 315 if ( i == 0 ) return false; 316 while ( --i ) { 317 var j = Math.floor( Math.random() * ( i + 1 ) ); 318 var tempi = arr[i]; 319 var tempj = arr[j]; 320 arr[i] = tempj; 321 arr[j] = tempi; 322 } 323 } 324 325 //swirl effect by milos popovic 326 $.swirl = function(el){ 327 328 var n = params[el.id].sph; 329 var m = params[el.id].spw; 330 331 var x = 1; 332 var y = 1; 333 var going = 0; 334 var num = 0; 335 var c = 0; 336 337 var dowhile = true; 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 // rain effect 376 $.rain = function(el){ 377 var n = params[el.id].sph; 378 var m = params[el.id].spw; 379 380 var c = 0; 381 var to = to2 = from = 1; 382 var dowhile = true; 383 384 385 while(dowhile){ 386 387 for(i=from;i<=to;i++){ 388 order[el.id][c] = i+''+parseInt(to2-i+1); 389 c++; 390 } 391 392 to2++; 393 394 if(to < n && to2 < m && n<m){ 395 to++; 396 } 397 398 if(to < n && n>=m){ 399 to++; 400 } 401 402 if(to2 > m){ 403 from++; 404 } 405 406 if(from > to) dowhile= false;
407 408 } 409 410 } 411 412 // straight effect 413 $.straight = function(el){ 414 counter = 0; 415 for(i=1;i <= params[el.id].sph;i++){ 416 for(j=1; j <= params[el.id].spw; j++){ 417 order[el.id][counter] = i+''+j; 418 counter++; 419 } 420 421 } 422 } 423 424 $.min = function(n,m){ 425 if (n>m) return m; 426 else return n; 427 } 428 429 $.max = function(n,m){ 430 if (n<m) return m; 431 else return n; 432 } 433 434 this.each ( 435 function(){ init(this); } 436 ); 437 438 439 }; 440 441 442 // default values 443 $.fn.coinslider.defaults = { 444 width: 880, // width of slider panel 445 height: 330, // height of slider panel 446 spw: 9, // squares per width 447 sph: 6, // squares per height 448 delay: 6000, // delay between images in ms 449 sDelay: 25, // delay beetwen squares in ms 450 opacity: 1, // opacity of title and navigation 451 titleSpeed: 500, // speed of title appereance in ms 452 effect: 'random', // random, swirl, rain, straight 453 navigation: true, // prev next and buttons 454 links : true, // show images as links 455 hoverPause: true // pause on hover 456 }; 457 458})(jQuery); 459
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.