├── README.md ├── coin-slider-styles.css ├── coin-slider.jquery.json ├── coin-slider.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | Coin Slider 2 | =========== 3 | jQuery Image Slider with Unique Transitions Effects 4 | 5 | This is Coin Slider development repository. 6 | 7 | For more information and download of stable version visit: 8 | 9 | http://workshop.rs/projects/coin-slider/ -------------------------------------------------------------------------------- /coin-slider-styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | Coin Slider jQuery plugin CSS styles 3 | http://workshop.rs/projects/coin-slider 4 | */ 5 | 6 | 7 | .coin-slider { overflow: hidden; zoom: 1; position: relative; } 8 | .coin-slider a{ text-decoration: none; outline: none; border: none; } 9 | 10 | .cs-buttons { font-size: 0px; padding: 10px; float: left; } 11 | .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } 12 | .cs-active { background-color: #B8C4CF; color: #FFFFFF; } 13 | 14 | .cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; } 15 | 16 | .cs-prev, 17 | .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; } 18 | -------------------------------------------------------------------------------- /coin-slider.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "coin-slider", 3 | "title" : "Coin Slider", 4 | "version" : "1.0.0", 5 | "author" : { 6 | "name" : "Ivan Lazarevic", 7 | "url" : "http://workshop.rs", 8 | "email": "devet.sest@gmail.com" 9 | }, 10 | "bugs" : "https://github.com/kopipejst/coin-slider/issues", 11 | "demo" : "http://workshop.rs/projects/coin-slider/", 12 | "dependencies" : { 13 | "jquery" : ">=1.2.2" 14 | }, 15 | "description" : "jQuery Image Slider with Unique Effects", 16 | "docs" : "http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/", 17 | "download" : "http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/", 18 | "homepage" : "http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/", 19 | "keywords" : ["slider", "image"], 20 | "licenses" : [ 21 | { 22 | "type" : "MIT", 23 | "url" : "http://www.opensource.org/licenses/mit-license.php" 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /coin-slider.js: -------------------------------------------------------------------------------- 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 | uniqueIDPrefix = "coinsliderUniqueID", 26 | uniqueIDCounter = 0; 27 | 28 | $.fn.coinslider = $.fn.CoinSlider = function (options) { 29 | 30 | // squares positions 31 | var setFields = function (el) { 32 | 33 | var tWidth = parseInt(params[el.id].width / params[el.id].spw), 34 | sWidth = tWidth, 35 | tHeight = parseInt(params[el.id].height / params[el.id].sph), 36 | sHeight = tHeight, 37 | counter = 0, 38 | sLeft = 0, 39 | sTop = 0, 40 | i, 41 | j, 42 | tgapx = params[el.id].width - params[el.id].spw * sWidth, 43 | gapx = tgapx, 44 | tgapy = params[el.id].height - params[el.id].sph * sHeight, 45 | gapy = tgapy; 46 | 47 | for (i = 1; i <= params[el.id].sph; i++) { 48 | gapx = tgapx; 49 | 50 | if (gapy > 0) { 51 | gapy--; 52 | sHeight = tHeight + 1; 53 | } else { 54 | sHeight = tHeight; 55 | } 56 | 57 | for (j = 1; j <= params[el.id].spw; j++) { 58 | 59 | if (gapx > 0) { 60 | gapx--; 61 | sWidth = tWidth + 1; 62 | } else { 63 | sWidth = tWidth; 64 | } 65 | 66 | order[el.id][counter] = i + "" + j; 67 | counter++; 68 | 69 | if (params[el.id].links) { 70 | $('#' + el.id).append(""); 71 | } else { 72 | $('#' + el.id).append("
"); 73 | } 74 | 75 | // positioning squares 76 | $("#cs-" + el.id + i + j).css({ 77 | 'background-position': -sLeft + 'px ' + (-sTop + 'px'), 78 | 'left' : sLeft, 79 | 'top': sTop 80 | }); 81 | 82 | sLeft += sWidth; 83 | } 84 | 85 | sTop += sHeight; 86 | sLeft = 0; 87 | 88 | } 89 | 90 | if (!params[el.id].navigationPrevNextAlwaysShown) { 91 | 92 | $('.cs-' + el.id).mouseover(function(){ 93 | $('#cs-navigation-' + el.id).show(); 94 | }); 95 | 96 | $('.cs-' + el.id).mouseout(function(){ 97 | $('#cs-navigation-' + el.id).hide(); 98 | }); 99 | 100 | $('#cs-title-' + el.id).mouseover(function(){ 101 | $('#cs-navigation-' + el.id).show(); 102 | }); 103 | 104 | $('#cs-title-' + el.id).mouseout(function(){ 105 | $('#cs-navigation-' + el.id).hide(); 106 | }); 107 | } 108 | 109 | if (params[el.id].hoverPause) { 110 | $('.cs-' + el.id).mouseover(function(){ 111 | params[el.id].pause = true; 112 | }); 113 | 114 | $('.cs-' + el.id).mouseout(function(){ 115 | params[el.id].pause = false; 116 | }); 117 | 118 | $('#cs-title-' + el.id).mouseover(function(){ 119 | params[el.id].pause = true; 120 | }); 121 | 122 | $('#cs-title-' + el.id).mouseout(function(){ 123 | params[el.id].pause = false; 124 | }); 125 | } 126 | 127 | }; 128 | 129 | var transitionCall = function (el) { 130 | 131 | clearInterval(interval[el.id]); 132 | var delay = params[el.id].delay + params[el.id].spw * params[el.id].sph * params[el.id].sDelay; 133 | interval[el.id] = setInterval(function() { transition(el); }, delay); 134 | 135 | }; 136 | 137 | // transitions 138 | var transition = function (el, direction) { 139 | 140 | if(params[el.id].pause === true){ 141 | return; 142 | } 143 | 144 | effect(el); 145 | 146 | squarePos[el.id] = 0; 147 | appInterval[el.id] = setInterval(function() { appereance(el,order[el.id][squarePos[el.id]]); },params[el.id].sDelay); 148 | 149 | $(el).css({ 'background-image': 'url("' + images[el.id][imagePos[el.id]] + '")' }); 150 | 151 | if (typeof(direction) == "undefined") { 152 | imagePos[el.id]++; 153 | } else { 154 | if (direction == 'prev') { 155 | imagePos[el.id]--; 156 | } else { 157 | imagePos[el.id] = direction; 158 | } 159 | } 160 | 161 | if (imagePos[el.id] == images[el.id].length) { 162 | imagePos[el.id] = 0; 163 | } 164 | 165 | if (imagePos[el.id] == -1) { 166 | imagePos[el.id] = images[el.id].length-1; 167 | } 168 | 169 | $('.cs-button-' + el.id).removeClass('cs-active'); 170 | $('#cs-button-' + el.id + "-" + (imagePos[el.id] + 1)).addClass('cs-active'); 171 | 172 | if (titles[el.id][imagePos[el.id]]) { 173 | $('#cs-title-' + el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed); 174 | $('#cs-title-' + el.id).html(titles[el.id][imagePos[el.id]]); 175 | } else { 176 | $('#cs-title-' + el.id).css('opacity',0); 177 | } 178 | 179 | }; 180 | 181 | var appereance = function (el, sid) { 182 | 183 | $('.cs-' + el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]); 184 | 185 | if (squarePos[el.id] == params[el.id].spw * params[el.id].sph) { 186 | clearInterval(appInterval[el.id]); 187 | return; 188 | } 189 | 190 | $('#cs-' + el.id + sid).css({ opacity: 0, 'background-image': 'url("' + images[el.id][imagePos[el.id]] + '")' }); 191 | $('#cs-' + el.id + sid).animate({ opacity: 1 }, 300); 192 | squarePos[el.id]++; 193 | 194 | }; 195 | 196 | // navigation 197 | var setNavigation = function (el) { 198 | // create prev and next 199 | if (params[el.id].showNavigationPrevNext) { 200 | $(el).append("
"); 201 | 202 | if (!params[el.id].navigationPrevNextAlwaysShown) { 203 | $('#cs-navigation-' + el.id).hide(); 204 | } 205 | 206 | $('#cs-navigation-' + el.id).append(""+params[el.id].prevText+""); 207 | $('#cs-navigation-' + el.id).append(""+params[el.id].nextText+""); 208 | $('#cs-prev-' + el.id).css({ 209 | 'position' : 'absolute', 210 | 'top' : params[el.id].height / 2 - 15, 211 | 'left' : 0, 212 | 'z-index' : 1001, 213 | 'line-height' : '30px', 214 | 'opacity' : params[el.id].opacity 215 | }).click( function(e){ 216 | e.preventDefault(); 217 | transition(el,'prev'); 218 | transitionCall(el); 219 | }).mouseover( function(){ $('#cs-navigation-' + el.id).show(); }); 220 | 221 | $('#cs-next-' + el.id).css({ 222 | 'position' : 'absolute', 223 | 'top' : params[el.id].height / 2 - 15, 224 | 'right' : 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); 231 | transitionCall(el); 232 | }).mouseover( function(){ $('#cs-navigation-' + el.id).show(); }); 233 | 234 | $('#cs-navigation-' + el.id + ' a').mouseout(function(){ 235 | if (!params[el.id].navigationPrevNextAlwaysShown) 236 | $('#cs-navigation-' + el.id).hide(); 237 | 238 | params[el.id].pause = false; 239 | }); 240 | } 241 | 242 | // image buttons 243 | if (params[el.id].showNavigationButtons) { 244 | $("
").appendTo($('#coin-slider-' + el.id)); 245 | 246 | var k; 247 | for (k = 1; k < images[el.id].length + 1; k++){ 248 | $('#cs-buttons-' + el.id).append("" + k + ""); 249 | } 250 | 251 | $.each($('.cs-button-' + el.id), function(i,item){ 252 | $(item).click( function(e){ 253 | $('.cs-button-' + el.id).removeClass('cs-active'); 254 | $(this).addClass('cs-active'); 255 | e.preventDefault(); 256 | transition(el,i); 257 | transitionCall(el); 258 | }); 259 | }); 260 | 261 | $("#cs-buttons-" + el.id).css({ 262 | 'left' : '50%', 263 | 'margin-left' : -images[el.id].length * 15 / 2 - 5, 264 | 'position' : 'relative' 265 | }); 266 | } 267 | 268 | }; 269 | 270 | // effects 271 | var effect = function (el) { 272 | var effA = ['random','swirl','rain','straight'], 273 | i, 274 | j, 275 | counter, 276 | eff; 277 | 278 | if (params[el.id].effect === '') { 279 | eff = effA[Math.floor(Math.random() * (effA.length))]; 280 | } else { 281 | eff = params[el.id].effect; 282 | } 283 | 284 | order[el.id] = []; 285 | 286 | if (eff == 'random') { 287 | counter = 0; 288 | for (i = 1; i <= params[el.id].sph; i++) { 289 | for (j = 1; j <= params[el.id].spw; j++) { 290 | order[el.id][counter] = i + "" + j; 291 | counter++; 292 | } 293 | } 294 | randomEffect(order[el.id]); 295 | } 296 | 297 | if (eff == 'rain') { 298 | rain(el); 299 | } 300 | 301 | if (eff == 'swirl') { 302 | swirl(el); 303 | } 304 | 305 | if (eff == 'straight') { 306 | straight(el); 307 | } 308 | 309 | reverse[el.id] *= -1; 310 | 311 | if (reverse[el.id] > 0) { 312 | order[el.id].reverse(); 313 | } 314 | 315 | }; 316 | 317 | // shuffle array function 318 | var randomEffect = function (arr) { 319 | 320 | var i = arr.length, 321 | j, 322 | tempi, 323 | tempj; 324 | 325 | if ( i === 0 ) { 326 | return false; 327 | } 328 | 329 | while ( --i ) { 330 | j = Math.floor( Math.random() * ( i + 1 ) ); 331 | tempi = arr[i]; 332 | tempj = arr[j]; 333 | arr[i] = tempj; 334 | arr[j] = tempi; 335 | } 336 | }; 337 | 338 | //swirl effect by milos popovic 339 | var swirl = function (el) { 340 | 341 | var n = params[el.id].sph, 342 | m = params[el.id].spw, 343 | x = 1, 344 | y = 1, 345 | going = 0, 346 | num = 0, 347 | c = 0, 348 | check, 349 | dowhile = true, 350 | i; 351 | 352 | while (dowhile) { 353 | 354 | num = (going === 0 || going === 2) ? m : n; 355 | 356 | for (i = 1; i <= num; i++){ 357 | 358 | order[el.id][c] = x + "" + y; 359 | c++; 360 | 361 | if (i != num) { 362 | switch(going){ 363 | case 0 : y++; break; 364 | case 1 : x++; break; 365 | case 2 : y--; break; 366 | case 3 : x--; break; 367 | 368 | } 369 | } 370 | } 371 | 372 | going = (going + 1) % 4; 373 | 374 | switch (going) { 375 | case 0 : m--; y++; break; 376 | case 1 : n--; x++; break; 377 | case 2 : m--; y--; break; 378 | case 3 : n--; x--; break; 379 | } 380 | 381 | check = max(n,m) - min(n,m); 382 | if (m <= check && n <= check) { 383 | dowhile = false; 384 | } 385 | 386 | } 387 | }; 388 | 389 | // rain effect 390 | var rain = function (el) { 391 | 392 | var n = params[el.id].sph, 393 | m = params[el.id].spw, 394 | c = 0, 395 | to = 1, 396 | to2 = 1, 397 | from = 1, 398 | dowhile = true; 399 | 400 | while (dowhile) { 401 | 402 | for (i = from; i <= to; i++) { 403 | order[el.id][c] = i + '' + parseInt(to2 - i + 1); 404 | c++; 405 | } 406 | 407 | to2++; 408 | 409 | if (to < n && to2 < m && n < m) { 410 | to++; 411 | } 412 | 413 | if (to < n && n >= m) { 414 | to++; 415 | } 416 | 417 | if (to2 > m) { 418 | from++; 419 | } 420 | 421 | if (from > to) { 422 | dowhile= false; 423 | } 424 | 425 | } 426 | 427 | }; 428 | 429 | // straight effect 430 | var straight = function (el) { 431 | var counter = 0, 432 | i, 433 | j; 434 | 435 | for (i = 1; i <= params[el.id].sph; i++) { 436 | for (j = 1; j <= params[el.id].spw; j++) { 437 | order[el.id][counter] = i + '' + j; 438 | counter++; 439 | } 440 | } 441 | }; 442 | 443 | var min = function (n,m) { 444 | if (n > m) { 445 | return m; 446 | } else { 447 | return n; 448 | } 449 | }; 450 | 451 | var max = function (n,m) { 452 | if (n < m) { 453 | return m; 454 | } else { 455 | return n; 456 | } 457 | }; 458 | 459 | var init = function (el) { 460 | 461 | if( el.id === '' ){ 462 | el.id = uniqueIDPrefix + uniqueIDCounter++; 463 | } 464 | 465 | order[el.id] = []; // order of square appereance 466 | images[el.id] = []; 467 | links[el.id] = []; 468 | linksTarget[el.id] = []; 469 | titles[el.id] = []; 470 | imagePos[el.id] = 0; 471 | squarePos[el.id] = 0; 472 | reverse[el.id] = 1; 473 | 474 | params[el.id] = $.extend({}, $.fn.coinslider.defaults, options); 475 | 476 | // create images, links and titles arrays 477 | $.each($('#' + el.id + ' img'), function (i, item) { 478 | images[el.id][i] = $(item).attr('src') || item.src; // ios fix 479 | links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : ''; 480 | linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : ''; 481 | titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : ''; 482 | $(item).hide(); 483 | $(item).next().hide(); 484 | }); 485 | 486 | // set panel 487 | $(el).css({ 488 | 'background-image': 'url("' + images[el.id][0] + '")', 489 | 'width': params[el.id].width, 490 | 'height': params[el.id].height, 491 | 'position': 'relative', 492 | 'background-position': 'top left' 493 | }).wrap("
"); 494 | 495 | // create title bar 496 | $('#' + el.id).append("
"); 497 | 498 | setFields(el); 499 | 500 | if(params[el.id].navigation){ 501 | setNavigation(el); 502 | } 503 | 504 | transition(el,0); 505 | transitionCall(el); 506 | 507 | }; 508 | 509 | this.each ( 510 | function () { 511 | init(this); 512 | } 513 | ); 514 | }; 515 | 516 | // default values 517 | $.fn.coinslider.defaults = { 518 | width: 565, // width of slider panel 519 | height: 290, // height of slider panel 520 | spw: 7, // squares per width 521 | sph: 5, // squares per height 522 | delay: 3000, // delay between images in ms 523 | sDelay: 30, // delay beetwen squares in ms 524 | opacity: 0.7, // opacity of title and navigation 525 | titleSpeed: 500, // speed of title appereance in ms 526 | effect: '', // random, swirl, rain, straight 527 | links : true, // show images as links 528 | hoverPause: true, // pause on hover 529 | prevText: 'prev', 530 | nextText: 'next', 531 | navigation: true, // show/hide prev, next and buttons 532 | showNavigationPrevNext: true, 533 | showNavigationButtons: true, 534 | navigationPrevNextAlwaysShown: false 535 | }; 536 | 537 | })(jQuery); 538 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Coin Slider: jQuery Image Slider Plugin with Unique Effects 12 | 13 | 14 | 15 |
16 | 17 | 18 | Mini Ninjas 19 | 20 | Mini Ninjas
21 | Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your 22 | furious Ninja skills to free your Ninja friends. 23 | 24 | 25 | 26 | 27 | Price of Persia 28 | 29 | 30 | 31 | Spiderman: Shattered Dimensions 32 | 33 | 34 | 35 | Brink 36 | 37 | 38 | 39 | God of War III 40 | 41 | 42 | 43 | Borderlands 44 | 45 | Borderlands
46 | Fun combat and a steady flow of rewards make this journey a massively enjoyable one, especially with some fellow mercenaries along for the ride. 47 | 48 | 49 | 50 | 51 | Star Wars: The Old Republic 52 | 53 | 54 | 55 | Batman: Arkham Asylum 56 | 57 | 58 |
59 | 62 | 63 | 64 | --------------------------------------------------------------------------------