/** * Coin Slider - Unique jQuery Image Slider * @version: 1.0 - (2010/04/04) * @requires jQuery v1.2.2 or later * @author Ivan Lazarevic * Examples and documentation at: http://workshop.rs/projects/coin-slider/ * Licensed under MIT licence: * http://www.opensource.org/licenses/mit-license.php **/ (function($) { var params = new Array; var order = new Array; var images = new Array; var links = new Array; var linksTarget = new Array; var titles = new Array; var interval = new Array; var imagePos = new Array; var appInterval = new Array; var squarePos = new Array; var reverse = new Array; $.fn.coinslider= $.fn.CoinSlider = function(options){ init = function(el){ order[el.id] = new Array(); images[el.id] = new Array(); links[el.id] = new Array(); linksTarget[el.id] = new Array(); titles[el.id] = new Array(); imagePos[el.id] = 0; squarePos[el.id] = 0; reverse[el.id] = 1; params[el.id] = $.extend({}, $.fn.coinslider.defaults, options); $.each($('#'+el.id+' img'), function(i,item){ images[el.id][i] = $(item).attr('src'); links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : ''; linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : ''; titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : ''; $(item).hide(); $(item).next().hide(); }); $(el).css({ 'background-image':'url('+images[el.id][0]+')', 'width': params[el.id].width, 'height': params[el.id].height, 'position': 'relative', 'background-position': 'top left' }).wrap("
"); // create title bar $('#'+el.id).append("
"); if(params[el.id].effect =='fade'){ params[el.id].spw=1; params[el.id].sph=1; } $.setFields(el); if(params[el.id].navigation) $.setNavigation(el); $.transition(el,0); $.transitionCall(el); } $.setFields = function(el){ tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw); tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph); counter = sLeft = sTop = 0; tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth; tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight; for(i=1;i <= params[el.id].sph;i++){ gapx = tgapx; if(gapy > 0){ gapy--; sHeight = tHeight+1; } else { sHeight = tHeight; } for(j=1; j <= params[el.id].spw; j++){ if(gapx > 0){ gapx--; sWidth = tWidth+1; } else { sWidth = tWidth; } order[el.id][counter] = i+''+j; counter++; if(params[el.id].links) $('#'+el.id).append(""); else $('#'+el.id).append("
"); // positioning squares $("#cs-"+el.id+i+j).css({ 'background-position': -sLeft +'px '+(-sTop+'px'), 'left' : sLeft , 'top': sTop }); sLeft += sWidth; } sTop += sHeight; sLeft = 0; } if(params[el.id].stickynav){ $('.cs-'+el.id).mouseover(function(){ $('#cs-navigation-'+el.id).show(); }); $('.cs-'+el.id).mouseout(function(){ $('#cs-navigation-'+el.id).show(); }); $('#cs-title-'+el.id).mouseover(function(){ $('#cs-navigation-'+el.id).show(); }); $('#cs-title-'+el.id).mouseout(function(){ $('#cs-navigation-'+el.id).show(); }); }else{ $('.cs-'+el.id).mouseover(function(){ $('#cs-navigation-'+el.id).show(); }); $('.cs-'+el.id).mouseout(function(){ $('#cs-navigation-'+el.id).hide(); }); $('#cs-title-'+el.id).mouseover(function(){ $('#cs-navigation-'+el.id).show(); }); $('#cs-title-'+el.id).mouseout(function(){ $('#cs-navigation-'+el.id).hide(); }); } if(params[el.id].hoverPause){ $('.cs-'+el.id).mouseover(function(){ params[el.id].pause = true; }); $('.cs-'+el.id).mouseout(function(){ params[el.id].pause = false; }); $('#cs-title-'+el.id).mouseover(function(){ params[el.id].pause = true; }); $('#cs-title-'+el.id).mouseout(function(){ params[el.id].pause = false; }); } }; //Note for Fade $.transitionCall = function(el){ clearInterval(interval[el.id]); delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay; interval[el.id] = setInterval(function() { $.transition(el) }, delay); } // transitions $.transition = function(el,direction){ if(params[el.id].pause == true) return; $.effect(el); squarePos[el.id] = 0; appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay); $(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' }); if(typeof(direction) == "undefined") imagePos[el.id]++; else if(direction == 'prev') imagePos[el.id]--; else imagePos[el.id] = direction; if (imagePos[el.id] == images[el.id].length) { imagePos[el.id] = 0; } if (imagePos[el.id] == -1){ imagePos[el.id] = images[el.id].length-1; } $('.cs-button-'+el.id).removeClass('cs-active'); // CHECK $('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active'); if(titles[el.id][imagePos[el.id]]){ $('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed); $('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]); } else { $('#cs-title-'+el.id).css('opacity',0); } }; $.appereance = function(el,sid){ $('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]); if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) { clearInterval(appInterval[el.id]); return; } $('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' }); $('#cs-'+el.id+sid).animate({ opacity: 1 }, params[el.id].sDelay); squarePos[el.id]++; }; // navigation $.setNavigation = function(el){ // create prev and next $(el).append("
"); if(params[el.id].stickynav){ $('#cs-navigation-'+el.id).show();} else{ $('#cs-navigation-'+el.id).hide();} $('#cs-navigation-'+el.id).append("<"); $('#cs-navigation-'+el.id).append(">"); $('#cs-prev-'+el.id).css({ 'position' : 'absolute', 'top' : params[el.id].height/2 - 15, 'left' : '5px', 'z-index' : 1001, 'line-height': '40px', 'opacity' : params[el.id].opacity }).click( function(e){ e.preventDefault(); $.transition(el,'prev'); $.transitionCall(el); }).mouseover( function(){ $('#cs-navigation-'+el.id).show() }); $('#cs-next-'+el.id).css({ 'position' : 'absolute', 'top' : params[el.id].height/2 - 15, 'right' : '5px', 'z-index' : 1001, 'line-height': '40px', 'opacity' : params[el.id].opacity }).click( function(e){ e.preventDefault(); $.transition(el); $.transitionCall(el); }).mouseover( function(){ $('#cs-navigation-'+el.id).show() }); // image buttons $("
").appendTo($('#coin-slider-'+el.id)); for(k=1;k"+k+""); } $.each($('.cs-button-'+el.id), function(i,item){ $(item).click( function(e){ $('.cs-button-'+el.id).removeClass('cs-active'); $(this).addClass('cs-active'); e.preventDefault(); $.transition(el,i); $.transitionCall(el); }) }); $('#cs-navigation-'+el.id+' a').mouseout(function(){ $('#cs-navigation-'+el.id).hide(); params[el.id].pause = false; }); } $.randomize = function(arr) { for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); return arr; }; // effects $.effect = function(el){ effA = ['random','swirl','fade','rain','vertical','altvertical','horizontal','althorizontal','diagonal']; if(params[el.id].effect == '') eff = effA[Math.floor(Math.random()*(effA.length))]; else eff = params[el.id].effect; order[el.id] = new Array(); if(eff == 'random'){ counter = 0; for(i=1;i <= params[el.id].sph;i++){ for(j=1; j <= params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } $.random(order[el.id]); } if(eff == 'rain') { $.rain(el); } if(eff == 'swirl') $.swirl(el); // Added by MR. Vibe from Vibethemes.com if(eff == 'fade') $.fade(el); if(eff == 'vertical') $.vertical(el); if(eff == 'altvertical') $.altvertical(el); if(eff == 'horizontal') $.horizontal(el); if(eff == 'althorizontal') $.althorizontal(el); if(eff == 'diagonal') $.diagonal(el); reverse[el.id] *= -1; if(reverse[el.id] > 0){ order[el.id].reverse(); } } // shuffle array function $.random = function(arr) { var i = arr.length; if ( i == 0 ) return false; while ( --i ) { var j = Math.floor( Math.random() * ( i + 1 ) ); var tempi = arr[i]; var tempj = arr[j]; arr[i] = tempj; arr[j] = tempi; } } //swirl effect by milos popovic $.swirl = function(el){ var n = params[el.id].sph; var m = params[el.id].spw; var x = 1; var y = 1; var going = 0; var num = 0; var c = 0; var dowhile = true; while(dowhile) { num = (going==0 || going==2) ? m : n; for (i=1;i<=num;i++){ order[el.id][c] = x+''+y; c++; if(i!=num){ switch(going){ case 0 : y++; break; case 1 : x++; break; case 2 : y--; break; case 3 : x--; break; } } } going = (going+1)%4; switch(going){ case 0 : m--; y++; break; case 1 : n--; x++; break; case 2 : m--; y--; break; case 3 : n--; x--; break; } check = $.max(n,m) - $.min(n,m); if(m<=check && n<=check) dowhile = false; } } // rain effect $.rain = function(el){ var n = params[el.id].sph; var m = params[el.id].spw; var c = 0; var to = to2 = from = 1; var dowhile = true; while(dowhile){ for(i=from;i<=to;i++){ order[el.id][c] = i+''+parseInt(to2-i+1); c++; } to2++; if(to < n && to2 < m && n=m){ to++; } if(to2 > m){ from++; } if(from > to) dowhile= false; } } //Diagonal effect by MrVibe from VibeThemes $.diagonal = function(el){ counter = 0; for(i=1;i <= params[el.id].sph;i++){ for(j=i; j <= params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } for(i=1;i <= params[el.id].sph;i++){ for(j=1; j <= i-1; j++){ order[el.id][counter] = i+''+j; counter++; } } } // altvertical effect by MrVibe from VibeThemes $.altvertical = function(el){ counter = 0; for(i=1;i <= params[el.id].sph;i=i+2){ for(j=1; j <= params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } for(i=2;i <= params[el.id].sph;i=i+2){ for(j=1; j <= params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } } //vertical effect $.vertical = function(el){ counter = 0; for(i=1;i <= params[el.id].sph;i++){ for(j=1; j <= params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } } $.fade = function(el){ counter = 0; for(i=1;i <= params[el.id].sph;i++){ for(j=1; j <=params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } } // horizontal effect $.horizontal = function(el){ counter = 0; for(j=1; j <= params[el.id].spw; j++){ for(i=1;i <= params[el.id].sph;i++){ order[el.id][counter] = i+''+j; counter++; } } } // althorizontal effect $.althorizontal = function(el){ counter = 0; for(j=1; j <= params[el.id].spw; j=j+2){ for(i=1;i <= params[el.id].sph;i++){ order[el.id][counter] = i+''+j; counter++; } } for(j=2; j <= params[el.id].spw; j=j+2){ for(i=1;i <= params[el.id].sph;i++){ order[el.id][counter] = i+''+j; counter++; } } } $.min = function(n,m){ if (n>m) return m; else return n; } $.max = function(n,m){ if (n