// JavaScript Document jQuery(function($){ $.fn.vSlider = function(options){ /* ================================================================================================ */ /* ======================================== Plugin Options ======================================== */ /* ================================================================================================ */ var defaults = { time:8000, width:840, height:245, effect:'stripfade', autoplay:true, blocksize: {height:'245',width:'840' }, maskInduration:300, maskOutduration:900, listControls:true, arrowControls:true, customblocksize:{ maskvertical:{ height:100,width:70 }, // image transitions global settings cubegrow:{ height:130,width:130 }, cubesidegrow:{ height:130,width:130 }, stripfade:{ height:100,width:60 }, striphalf:{ height:100,width:40 }, block:80, strip:30 }, callback:function(){ } }; var options = $.extend(defaults, options); /* ================================================================================================ */ /* ==================================== Variables & Precaching ==================================== */ /* ================================================================================================ */ return this.each(function() { var root = $(this).addClass('mainslider'); root.wrap('
'); var parent = root.parent(); var li = root.find("li"); var images = li.find("img"); var pos,random_no,timer,image_timer,counter,arr,wait,index,block,w,h,src,parent,im,override=false,in_animation = false,controls,canvas,html5_flag=false,imageData,canvas,context,root_parent; var current = li.eq(1).toggleClass('active'),prev = li.first().addClass("reset"); var bool = true,first_bool = true; root.css({ width: options.width, height: options.height }); parent.css({ width: options.width, height: options.height }); li.first().find("span").css("display","block"); type= "img"; current.find(type).hide(); canvas = document.createElement('canvas'); if (!canvas.getContext) { options.mode= "default"; if(!isNaN(options.effect)&&parseInt(options.effect)>=7) options.effect='none'; } if(options.listControls==true) appendControls(); if(options.arrowControls==true) appendarrowControls() /* ================================================================================================ */ /* ======================================== Switcher Module ======================================= */ /* ================================================================================================ */ function switcher() { prev = (current.prev().length>0) ? current.prev() : li.last(); prev.removeClass("reset"); current.toggleClass("active reset"); current = (current.next().length>0) ? current.next() : li.first(); current.find(type).hide(); current.addClass("active"); options.callback(current.find(type)[0]); } /* ================================================================================================ */ /* ======================================== Custom Effects ======================================== */ /* ================================================================================================ */ function Maskvertical(image) { in_animation =true; im = image; if(options.blocksize.width!=''){ w = Math.floor(options.blocksize.width); h = Math.floor(options.blocksize.height); } else { w = Math.floor(options.customblocksize.maskvertical.width); h = Math.floor(options.customblocksize.maskvertical.height); } parent = im.parent(); arr = new Array(); i =0; j =0; index = 0; block = $("
",{ css:{ position:"absolute", width:w, height:options.height, 'background-color':"#fff", 'border':options.maskborder, zIndex:99, display:'none' } }).addClass('disblock'); while(i=arr.length) { clearInterval(timer); var wait = setInterval(function() { if( ! parent.find(".disblock").is(":animated") ) { clearInterval(wait); endeffect(image); } }, 80); return; } arr[random_no[i]].stop(true,true).fadeOut({duration:options.maskOutduration,easing:'easeInSine'}); i++; },90); } }; function striphalf(image) { in_animation = true; w = (options.blocksize.width!='') ? Math.floor(options.blocksize.width) : Math.floor(options.customblocksize.striphalf.width); h = options.height; parent = image.parent(); arr = new Array(); i =0; j =0; src = image.attr("src"); block = $("
",{ css:{ position:"absolute", width:w, height:h/2, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99, display:'block', opacity:0 } }).addClass('disblock'); counter = 60; while(i",{ css:{ position:"absolute", width:w, height:h, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99, display:'block', opacity:0 } }).addClass('disblock'); counter = 10; while(i",{ css:{ position:"absolute", width:0, height:0, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99 } }).addClass('disblock'); counter = 40; while(i",{ css:{ position:"absolute", width:0, height:0, opacity:0, top:options.height, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99 } }).addClass('disblock'); while(i=arr.length) { wait = setInterval(function() { if( ! parent.find(".disblock").is(":animated") ) { clearInterval(wait); endeffect(image); } }, 40); clearInterval(timer); return; } arr[random_no[i++]].animate({height:h,width:w,opacity:1}, options.maskOutduration); },60); }; function randombricks(image) { in_animation =true; im = image; if(options.blocksize.width!=''){ w = Math.floor(options.blocksize.width); h = Math.floor(options.blocksize.height); } else { w = Math.floor(options.customblocksize.block); h = Math.floor(options.customblocksize.block); } parent = im.parent(); arr = new Array(); i =0; j =0; index = 0; src = im.attr("src"); block = $("
",{ css:{ position:"absolute", width:w, height:h, opacity:0, top:options.height, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99 } }).addClass('disblock'); while(i=arr.length) { wait = setInterval(function() { if( ! parent.find(".disblock").is(":animated") ) { clearInterval(wait); endeffect(image); } }, 80); clearInterval(timer); return; } arr[random_no[i++]].animate({opacity:1},{duration:1100, easing:'easeOutCubic'}); },30); }; function curtainsright(image) { in_animation = true; if(options.blocksize.width!='') w = Math.floor(options.blocksize.width); else w = Math.floor(options.customblocksize.stripfade.width); h = options.height; parent = image.parent(); i = options.width; src = image.attr("src"); var css,flag=true; block = $("
",{ css:{ position:"absolute", width:w, height:h, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99, marginTop:options.height, opacity:0 } }).addClass('disblock'); counter = 0; while(i>-w) { css = {left:i ,backgroundPosition:-i+"px 0px",marginTop:-options.height }; flag = true; parent.append(block.clone().css(css).delay(counter).animate({marginTop:0,opacity:1},options.maskOutDuration)); i = i - w; counter = counter + 60; } wait = setInterval(function() { if( ! parent.find(".disblock").is(":animated") ) { clearInterval(wait); endeffect(image); } }, 40); }; function stripfade(image) { in_animation = true; if(options.blocksize.width!='') w = Math.floor(options.blocksize.width); else w = Math.floor(options.customblocksize.stripfade.width); h = options.height; parent = image.parent(); arr = new Array(); i =0; j =0; index = 0; src = image.attr("src"); block = $("
",{ css:{ position:"absolute", width:w, height:h, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99, opacity:0 } }).addClass('disblock'); counter = 0; while(i",{ css:{ position:"absolute", width:0, height:h, 'background-image':'url('+src+')', 'background-color':options.maskbg, 'border':options.maskborder, zIndex:99, opacity:0 } }).addClass('disblock'); counter = 0; while(i").addClass('q-prev'); parent.append(prev); var next = jQuery("").addClass('q-next'); parent.append(next); parent.find(".q-prev").bind("click",function(e){ var index = current.index()-1; if(first_bool==true&&index==0) index = 4; if(index<0) index = li.length-1; setImage(index); e.preventDefault(); }); parent.find(".q-next").bind("click",function(e){ var index = current.index()+1; if(first_bool==true&&index==2) index = 1; if(index>li.length-1) index = 0; setImage(index); e.preventDefault(); }); } function appendControls() { var str = "
    "; for(var i=0;i"+(i+1)+""; str = str+"
"; root.after(str); controls = parent.find(".controls li"); controls.first().addClass("control_active"); controls.bind({ click:function(){ setImage($(this).index()); }, mouseover:function(){ $(this).toggleClass("control_hover"); }, mouseout:function(){ $(this).toggleClass("control_hover"); } }); } /* ================================================================================================ */ /* ======================================== Image Settings ======================================== */ /* ================================================================================================ */ function setImage(index) { if(first_bool==true) { if(in_animation==true||current.index()-1==index) return; } else if(in_animation==true||current.index()==index) return; li.removeClass("reset active"); current.find("span").hide(); clearTimeout(image_timer); // Manual Override... if(first_bool==true) li.first().addClass("reset"); current.addClass("reset"); prev = current; current = li.eq(index).addClass("active"); current.find('img').hide(); override = true; effects(); } if(options.autoplay==true) image_timer = setTimeout(function() { effects(); },options.time); // Starting the Slideshow }); }; function random_array(maxn) { var array = new Array(); var temp,i,flag=true; var index =0; while(index