$(document).ready(function() {
//rollover creation when page loads
$('#carousel_ul li a[rev]').append('');
//list item changes when page loads...
$('#carousel_ul li > a > img').css({'width':'185px','height':'142px'});
$('#carousel_ul li:nth-child(3) > a > img').css({'width':'226px','height':'173px'});
$('#carousel_ul li:nth-child(3)').css({'position':'relative','z-index':'10','left':'-20px','top':'-10px'});
$('.rolloverPlay').css({'visibility':'hidden','width':'185px'});
$('#carousel_ul li:nth-child(3) .rolloverPlay').css({'width':'226px'});
var item_text = $('#carousel_ul li:nth-child(3) > a').attr('title');
$('#sliderText').html(item_text);
//mouseover and mouseout
$('#carousel_ul li a[rel]').mouseover(function(){
$(this).children('.rolloverPlay').css('visibility','visible');
});
$('#carousel_ul li a[rel]').mouseout(function(){
$(this).children('.rolloverPlay').css('visibility','hidden');
});
//options( 1 - ON , 0 - OFF)
var auto_slide = 0;
var hover_pause = 0;
var key_slide = 1;
//speed of auto slide(
var auto_slide_seconds = 5000;
/* IMPORTANT: i know the variable is called ...seconds but it's
in milliseconds ( multiplied with 1000) '*/
/*move he last list item before the first item. The purpose of this is
if the user clicks to slide left he will be able to see the last item.*/
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
//check if auto sliding is enabled
if(auto_slide == 1){
/*set the interval (loop) to call function slide with option 'right'
and set the interval time to the variable we declared previously */
var timer = setInterval('slide("right")', auto_slide_seconds);
/*and change the value of our hidden field that hold info about
the interval, setting it to the number of milliseconds we declared previously*/
$('#hidden_auto_slide_seconds').val(auto_slide_seconds);
}
//check if hover pause is enabled
if(hover_pause == 1){
//when hovered over the list
$('#carousel_ul').hover(function(){
//stop the interval
clearInterval(timer)
},function(){
//and when mouseout start it again
timer = setInterval('slide("right")', auto_slide_seconds);
});
}
//check if key sliding is enabled
if(key_slide == 1){
//binding keypress function
$(document).bind('keypress', function(e) {
//keyCode for left arrow is 37 and for right it's 39 '
if(e.keyCode==37){
//initialize the slide to left function
slide('left');
}else if(e.keyCode==39){
//initialize the slide to right function
slide('right');
}
});
}
});
//FUNCTIONS BELOW
//video functions
function video_appear(){
$('#carousel_container').fadeOut("fast", function(){
$('#videoContainer').animate({height: "360px"},1000,function(){
var video_filename = $('li.middle-slide a').attr('rel');
$('#videoContent').html('');
});
});
}
function video_disappear(){
$('#videoContent').html('');
$('#videoContainer').animate({'height':'0px'},1000,function(){
$('#carousel_container').fadeIn("slow");
$('#videoContainer').css('display','none');
});
}
function slide_click(which_click){
switch(which_click){
case '1':
slide('left','double');
var t=setTimeout("slide('left','single')",530);
break;
case '2':
slide('left');
break;
case '3':
var slideaction = $('li.middle-slide a').attr('rev');
var slidelink = $('li.middle-slide a').attr('rel');
if(slideaction == 'video'){
video_appear();
}else{
window.location = slidelink;
}
break;
case '4':
slide('right','single');
break;
case '5':
$('#sliderText').css('display','none');
slide('right','double');
var t=setTimeout("slide('right','single')",530);
break;
}
}
//slide function
function slide(where,moves){
//get the item width
var item_width = $('#carousel_ul li').outerWidth() + 2;
/* using a if statement and the where variable check
we will check where the user wants to slide (left or right)*/
if(where == 'left'){
//...calculating the new left indent of the unordered list (ul) for left sliding
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#sliderText').fadeOut('slow');
$('#carousel_ul li:nth-child(4) > a > img').animate({'width':'185px','height':'142px'},500);
$('#carousel_ul li:nth-child(4)').animate({'left':'0px','top':'0px'});
$('#carousel_ul li:nth-child(4)').css({'z-index':'1'});
$('#carousel_ul li:nth-child(4)').removeClass('middle-slide');
$('#carousel_ul li:nth-child(3) > a > img').animate({'width':'226px','height':'173px'},500);
$('#carousel_ul li:nth-child(3)').animate({'left':'-20px','top':'-10px'});
$('#carousel_ul li:nth-child(3)').css({'position':'relative','z-index':'10'});
$('#carousel_ul li:nth-child(3)').addClass('middle-slide');
}else{
//...calculating the new left indent of the unordered list (ul) for right sliding
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
$('#sliderText').fadeOut('slow');
$('#carousel_ul li:nth-child(4) > a > img').animate({width: "185px", height: "142px"},500);
$('#carousel_ul li:nth-child(4)').animate({'left':'0px','top':'0px'});
$('#carousel_ul li:nth-child(4)').css({'z-index':'1'});
$('#carousel_ul li:nth-child(4)').removeClass('middle-slide');
$('#carousel_ul li:nth-child(5) > a > img').animate({width: "226px", height: "173px"},500);
$('#carousel_ul li:nth-child(5)').animate({'left':'-20px','top':'-10px'});
$('#carousel_ul li:nth-child(5)').css({'position':'relative','z-index':'10'});
$('#carousel_ul li:nth-child(5)').addClass('middle-slide');
}
//make the sliding effect using jQuery's animate function... '
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
/* when the animation finishes use the if statement again, and make an ilussion
of infinity by changing place of last or first item*/
if(where == 'left'){
//...and if it slided to left we put the last item before the first item
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
var item_text = $('#carousel_ul li:nth-child(4) > a').attr('title');
if(moves != 'double'){$('#sliderText').html(item_text).fadeIn('fast');}
var i=0;
$('#carousel_ul li').each(function(){
$(this).children('a').attr("href","javascript:slide_click('"+i+"');");
$(this).children('a').attr("class","current");
i++;
});
}else{
//...and if it slided to right we put the first item after the last item
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
var item_text = $('#carousel_ul li:nth-child(4) > a').attr('title');
if(moves != 'double'){$('#sliderText').html(item_text).fadeIn('fast');}
var i=0;
$('#carousel_ul li').each(function(){
$(this).children('a').attr("href","javascript:slide_click('"+i+"');");
$(this).children('a').attr("class","current");
i++;
});
}
//...and then just get back the default left indent
$('#carousel_ul').css({'left' : '-183px'});
});
}
');
//list item changes when page loads...
$('#carousel_ul li > a > img').css({'width':'185px','height':'142px'});
$('#carousel_ul li:nth-child(3) > a > img').css({'width':'226px','height':'173px'});
$('#carousel_ul li:nth-child(3)').css({'position':'relative','z-index':'10','left':'-20px','top':'-10px'});
$('.rolloverPlay').css({'visibility':'hidden','width':'185px'});
$('#carousel_ul li:nth-child(3) .rolloverPlay').css({'width':'226px'});
var item_text = $('#carousel_ul li:nth-child(3) > a').attr('title');
$('#sliderText').html(item_text);
//mouseover and mouseout
$('#carousel_ul li a[rel]').mouseover(function(){
$(this).children('.rolloverPlay').css('visibility','visible');
});
$('#carousel_ul li a[rel]').mouseout(function(){
$(this).children('.rolloverPlay').css('visibility','hidden');
});
//options( 1 - ON , 0 - OFF)
var auto_slide = 0;
var hover_pause = 0;
var key_slide = 1;
//speed of auto slide(
var auto_slide_seconds = 5000;
/* IMPORTANT: i know the variable is called ...seconds but it's
in milliseconds ( multiplied with 1000) '*/
/*move he last list item before the first item. The purpose of this is
if the user clicks to slide left he will be able to see the last item.*/
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
//check if auto sliding is enabled
if(auto_slide == 1){
/*set the interval (loop) to call function slide with option 'right'
and set the interval time to the variable we declared previously */
var timer = setInterval('slide("right")', auto_slide_seconds);
/*and change the value of our hidden field that hold info about
the interval, setting it to the number of milliseconds we declared previously*/
$('#hidden_auto_slide_seconds').val(auto_slide_seconds);
}
//check if hover pause is enabled
if(hover_pause == 1){
//when hovered over the list
$('#carousel_ul').hover(function(){
//stop the interval
clearInterval(timer)
},function(){
//and when mouseout start it again
timer = setInterval('slide("right")', auto_slide_seconds);
});
}
//check if key sliding is enabled
if(key_slide == 1){
//binding keypress function
$(document).bind('keypress', function(e) {
//keyCode for left arrow is 37 and for right it's 39 '
if(e.keyCode==37){
//initialize the slide to left function
slide('left');
}else if(e.keyCode==39){
//initialize the slide to right function
slide('right');
}
});
}
});
//FUNCTIONS BELOW
//video functions
function video_appear(){
$('#carousel_container').fadeOut("fast", function(){
$('#videoContainer').animate({height: "360px"},1000,function(){
var video_filename = $('li.middle-slide a').attr('rel');
$('#videoContent').html('');
});
});
}
function video_disappear(){
$('#videoContent').html('');
$('#videoContainer').animate({'height':'0px'},1000,function(){
$('#carousel_container').fadeIn("slow");
$('#videoContainer').css('display','none');
});
}
function slide_click(which_click){
switch(which_click){
case '1':
slide('left','double');
var t=setTimeout("slide('left','single')",530);
break;
case '2':
slide('left');
break;
case '3':
var slideaction = $('li.middle-slide a').attr('rev');
var slidelink = $('li.middle-slide a').attr('rel');
if(slideaction == 'video'){
video_appear();
}else{
window.location = slidelink;
}
break;
case '4':
slide('right','single');
break;
case '5':
$('#sliderText').css('display','none');
slide('right','double');
var t=setTimeout("slide('right','single')",530);
break;
}
}
//slide function
function slide(where,moves){
//get the item width
var item_width = $('#carousel_ul li').outerWidth() + 2;
/* using a if statement and the where variable check
we will check where the user wants to slide (left or right)*/
if(where == 'left'){
//...calculating the new left indent of the unordered list (ul) for left sliding
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#sliderText').fadeOut('slow');
$('#carousel_ul li:nth-child(4) > a > img').animate({'width':'185px','height':'142px'},500);
$('#carousel_ul li:nth-child(4)').animate({'left':'0px','top':'0px'});
$('#carousel_ul li:nth-child(4)').css({'z-index':'1'});
$('#carousel_ul li:nth-child(4)').removeClass('middle-slide');
$('#carousel_ul li:nth-child(3) > a > img').animate({'width':'226px','height':'173px'},500);
$('#carousel_ul li:nth-child(3)').animate({'left':'-20px','top':'-10px'});
$('#carousel_ul li:nth-child(3)').css({'position':'relative','z-index':'10'});
$('#carousel_ul li:nth-child(3)').addClass('middle-slide');
}else{
//...calculating the new left indent of the unordered list (ul) for right sliding
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
$('#sliderText').fadeOut('slow');
$('#carousel_ul li:nth-child(4) > a > img').animate({width: "185px", height: "142px"},500);
$('#carousel_ul li:nth-child(4)').animate({'left':'0px','top':'0px'});
$('#carousel_ul li:nth-child(4)').css({'z-index':'1'});
$('#carousel_ul li:nth-child(4)').removeClass('middle-slide');
$('#carousel_ul li:nth-child(5) > a > img').animate({width: "226px", height: "173px"},500);
$('#carousel_ul li:nth-child(5)').animate({'left':'-20px','top':'-10px'});
$('#carousel_ul li:nth-child(5)').css({'position':'relative','z-index':'10'});
$('#carousel_ul li:nth-child(5)').addClass('middle-slide');
}
//make the sliding effect using jQuery's animate function... '
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
/* when the animation finishes use the if statement again, and make an ilussion
of infinity by changing place of last or first item*/
if(where == 'left'){
//...and if it slided to left we put the last item before the first item
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
var item_text = $('#carousel_ul li:nth-child(4) > a').attr('title');
if(moves != 'double'){$('#sliderText').html(item_text).fadeIn('fast');}
var i=0;
$('#carousel_ul li').each(function(){
$(this).children('a').attr("href","javascript:slide_click('"+i+"');");
$(this).children('a').attr("class","current");
i++;
});
}else{
//...and if it slided to right we put the first item after the last item
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
var item_text = $('#carousel_ul li:nth-child(4) > a').attr('title');
if(moves != 'double'){$('#sliderText').html(item_text).fadeIn('fast');}
var i=0;
$('#carousel_ul li').each(function(){
$(this).children('a').attr("href","javascript:slide_click('"+i+"');");
$(this).children('a').attr("class","current");
i++;
});
}
//...and then just get back the default left indent
$('#carousel_ul').css({'left' : '-183px'});
});
}