$(document).ready(function() {
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#Slider .slides').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#Slider').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#Slider_nav ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.m_Item').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.m_Item').length;
$('#Slider').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#Slider_nav ul li.m_Item:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#Slider_nav ul li a').eq(current%$('#Slider_nav ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 10;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
/* End of customizations */
});
// -------------------------------------------------------------------------------------------
// The Main accordion slider - KRICORDION
// Dependencies: equalheight function, kriesi_image_preoloader. jquery easing
//
// -------------------------------------------------------------------------------------------
(function($)
{
$.fn.kricordion = function(options)
{
var defaults =
{
slides: '>div', // wich element inside the container should serve as slide
animationSpeed: 900, // animation duration
autorotation: true, // autorotation true or false?
autorotationSpeed:3, // duration between autorotation switch in Seconds
easing: 'easeOutQuint', // animation easing, more options at the bottom of this file
event: 'mouseover', // event to focus a slide: mouseover or click
imageShadow:true, // should the image get a drop shadow to the left
imageShadowStrength:0.5, // how dark should that shadow be, recommended values: between 0.3 and 0.8, allowed between 0 and 1
fontOpacity: 1, // opacity for font, if set to 1 it will be stronger but most browsers got a small rendering glitch at 1
backgroundOpacity:0.8 // opacity for background
};
// merge default values with the values that were passed with the function call
var options = $.extend(defaults, options);
return this.each(function()
{
// save some jQuery selections into variables, also calculate base values for each slide
var slideWrapper = $(this), // element that holds the slides
slides = slideWrapper.find(options.slides).css('display','block'), // the slides
slide_count = slides.length, // number of slides
slide_width = slideWrapper.width() / slide_count // width of the slides
expand_slide = slides.width(), // size of a slide when expanded, defined in css, class ".featured" by default
minimized_slide = (slideWrapper.width() - expand_slide) / (slide_count - 1), // remaining width is shared among the non-active slides
overlay_modifier = 200 *(1- options.imageShadowStrength), //increases the size of the minimized image div to avoid flickering
excerptWrapper = slideWrapper.find('.feature_excerpt'),
interval = '',
current_slide = 0;
//modify excerptWrapper and re-select it, also add positioning span -------------------------
excerptWrapper.wrap('').removeClass('feature_excerpt').addClass('position_excerpt');
excerptWrapper = slideWrapper.find('.feature_excerpt').css('opacity',options.backgroundOpacity);
// -------------------------------------------------------------------------------------------
//equal heights for all excerpt containers, then hide basic excerpt content -----------------
excerptWrapper.equalHeights().find('.position_excerpt').css({display:'block', opacity:0, position:'absolute'});
var excerptWrapperHeight = excerptWrapper.height();
// -------------------------------------------------------------------------------------------
//iterate each slide and set new base values, also set positions for acitve and inactive states and event handlers
slides.each(function(i)
{
var this_slide = $(this), // current slide element
this_slide_a = this_slide.find('a'), // a tag inside the element
real_excerpt = this_slide.find('.position_excerpt'), // wrapper to center the excerpt content verticaly
real_excerpt_height = real_excerpt.height(), // height of the excerpt content
slide_heading =this_slide.find('.sliderheading'), // slide heading
cloned_heading = slide_heading.clone().appendTo(this_slide_a) // clone heading for heading only view
.addClass('heading_clone')
.css({opacity:options.fontOpacity, width:slide_width-30}),
clone_height = cloned_heading.height(); // height of clone heading, needed to center verticaly as well
this_slide.css('backgroundPosition',parseInt(slide_width/2-8) + 'px ' + parseInt((this_slide.height()- real_excerpt_height)/2 -8) + 'px');
cloned_heading.css({bottom: (excerptWrapperHeight-clone_height)/2 +9}); //center clone heading
real_excerpt.css({bottom: (excerptWrapperHeight-real_excerpt_height)/2 +9}); //center real excerpt
this_slide.data( //save data of each slide via jquerys data method
'data',
{
this_slides_position: i * slide_width, // position if no item is active
pos_active_higher: i * minimized_slide, // position of the item if a higher item is active
pos_active_lower: ((i-1) * minimized_slide) + expand_slide // position of the item if a lower item is active
});
//set base properties
this_slide.css({zIndex:i+1, left: i * slide_width, width:slide_width + overlay_modifier});
//apply the fading div if option is set to do so
if(options.imageShadow)
{
this_slide.find('>a').prepend('');
}
});
// // calls the preloader, kriesi_image_preloader plugin needed
// jQuery('#featured').kriesi_image_preloader({callback:add_functionality});
function add_functionality()
{
//set autorotation ---------------------------------------------------------------------------
if(options.autorotation)
{
interval = setInterval(function() { autorotation(); }, (parseInt(options.autorotationSpeed) * 1000));
}
slides.each(function(i)
{
var this_slide = $(this),
real_excerpt = this_slide.find('.position_excerpt'),
cloned_heading = this_slide.find('.heading_clone');
//set mouseover or click event
this_slide.bind(options.event, function(event, continue_autoslide)
{
//stop autoslide on userinteraction
if(!continue_autoslide)
{
clearInterval(interval)
}
var objData = this_slide.data( 'data' );
//on mouseover expand current slide to full size and fadeIn real content
real_excerpt.stop().animate({opacity:options.fontOpacity},options.animationSpeed, options.easing);
cloned_heading.stop().animate({opacity:0},options.animationSpeed, options.easing);
this_slide.stop().animate({ width: expand_slide + (overlay_modifier * 1.2),
left: objData.pos_active_higher},
options.animationSpeed, options.easing);
//set and all other slides to small size
slides.each(function(j){
if (i !== j)
{
var this_slide = $(this),
real_excerpt = this_slide.find('.position_excerpt'),
cloned_heading = this_slide.find('.heading_clone'),
objData = this_slide.data( 'data' ),
new_pos = objData.pos_active_higher;
if(i < j) { new_pos = objData.pos_active_lower; }
this_slide.stop().animate({left: new_pos, width:minimized_slide + overlay_modifier},options.animationSpeed, options.easing);
real_excerpt.stop().animate({opacity:0},options.animationSpeed, options.easing);
cloned_heading.stop().animate({opacity:options.fontOpacity},options.animationSpeed, options.easing);
}
});
});
});
//set mouseout event: expand all slides to no-slide-active position and width
slideWrapper.bind('mouseleave', function()
{
slides.each(function(i)
{
var this_slide = $(this),
real_excerpt = this_slide.find('.position_excerpt'),
cloned_heading = this_slide.find('.heading_clone'),
objData = this_slide.data( 'data' ),
new_pos = objData.this_slides_position;
this_slide.stop().animate({left: new_pos, width:slide_width + overlay_modifier},options.animationSpeed, options.easing);
real_excerpt.stop().animate({opacity:0},options.animationSpeed, options.easing);
cloned_heading.stop().animate({opacity:options.fontOpacity},options.animationSpeed, options.easing);
});
});
}
// autorotation function for the image slider
function autorotation()
{
if(slide_count == current_slide)
{
slideWrapper.trigger('mouseleave');
current_slide = 0;
}
else
{
slides.filter(':eq('+current_slide+')').trigger(options.event,[true]);
current_slide ++;
}
}
});
};
})(jQuery);
// -------------------------------------------------------------------------------------------
// END KRICORDION
// -------------------------------------------------------------------------------------------