// 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