/** * jQuery Li Slider * Copyright (c) 2010 Spotnil (http://spotnil.com) * Version: 2.0 (5/21/2011) */ (function($) { var methods = { init : function( options ) { var default_settings = { width : '', height : '', auto_play : true, repeat : true, repeatRe : '', description : 'Custom', caption : false, caption_position : 'Bottom', caption_animation : 'Slide-Up', caption_show_time : 200, caption_delay : 100, goToSlideOnStart : 1, lightBoxDisplay : 'off', modalMode : 'off', timer : 'no', pauseOnMouseOver : false, tooltip : 'none', tooltipSize : 15, shuffle : false, auto_hide : true, delay : 3000, trans_period : 1000, animation : "Fade", effect : false, vert_sections : 15, new_vert_sections : '', sqr_sections_Y : 5, sqr_sections_X : 0, new_sqr_sections : '', buttons_show : true, play_pause_show : true, next_prev_show : true, transitions : '', active_links : true, buttons_hide_time : 3000, buttons_hide_delay : 500, buttons_show_time : 500, buttons_show_delay : 500 }; var settings = $.extend({}, default_settings, options); return this.each( function() { slider = new Slider(this,settings); slider.init(); } ); }, goToSlide: function(value){ slider.stopRealSlider(); slider.togglePlay(); slider.showSpecImage(value); }, Stop: function(value){ $(this).find('.pause-btn').trigger('click'); }, Play: function(value){ $(this).find('.play-btn').trigger('click'); }, Next: function(value){ slider.stopRealSlider(); slider.togglePlay(); slider.showNextImage(); }, Prev: function(value){ slider.stopRealSlider(); slider.showPrevImage(); slider.togglePlay(); } }; $.fn.sp_Li_Slider = function(method) { var slider; // Method calling logic if ( methods[method] ) { return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.sp_Li_Slider' ); } }; // Class Description function Description(slide, settings) { var point = [];//new Array(); var lastPoint = []; this.width; this.height; this.left; this.top; this.bottom; this.right; this.opacity; this.animation = null; this.position = null; this.cur_position = null; var $slide = $(slide); this.init_base = function(){ var $div = $slide.data('div'); this.width = $div.css('width'); this.height = $div.css('height'); this.left = $div.css('left'); this.right = $div.css('right'); this.top = $div.css('top'); this.bottom = $div.css('bottom'); this.opacity = $div.css('opacity'); this.animation = $div.attr('anim'); this.cur_position = $div.attr('position'); if (this.cur_position && this.cur_position != "") this.position = this.cur_position; else this.position = settings.caption_position; var $wDiv = $('
'); $wDiv.attr('style',$div.attr('style')); $wDiv.css('opacity',''); $wDiv.addClass('caption_'+this.position); var $cDiv = $(''); $cDiv.css('visibility','hidden'); $cDiv.html($div.html()); var $bDiv = $(''); // $bDiv.css('opacity',this.opacity); if (this.opacity && this.opacity!= 1) $bDiv.css('opacity',this.opacity); else $bDiv.css('opacity',settings.caption_opacity); $slide.append($wDiv); $wDiv.append($cDiv); if (this.width == "0px" ) this.width = parseInt($wDiv.css('width'),10); if (this.height == "0px") this.height = parseInt($wDiv.css('height'),10); $wDiv.append($bDiv); }; this.init_anim = function(){ var animation = this.animation; if (!animation) animation = settings.caption_animation; switch (animation){ case 'Fade': this.fade(); break; case 'Slide-Up': this.slide_up(); break; case 'Slide-Down': this.slide_down(); break; case 'Slide-Right': this.slide_right(); break; case 'Slide-Left': this.slide_left(); break; case 'Fade': this.fade(); break; }; }; this.init_position = function(){ switch (this.position){ case 'Bottom': case 'Top': this.ver(); break; case 'Left': case 'Right': this.hor(); break; }; }; this.getDelay = function(){ var maxDelay = 0; for ( var i=0; i < lastPoint.length; i++){ if (point[i]){ if (maxDelay < lastPoint[i][4]) maxDelay = lastPoint[i][4]; } }; return 0; }; this.fade = function(){ $slide.find('div').eq(1).css('visibility','visible'); $slide.find('div:first').hide().delay(settings.caption_delay).fadeIn(settings.caption_show_time); }; this.slide_up = function(){ var height = parseInt($slide.find('div').eq(1).css('height'),10); var position = $slide.find('div:first').position(); $slide.find('div:first').css({'top':settings.height}).show().delay(settings.caption_delay).animate({ top: position.top+'px' }, settings.caption_show_time); $slide.find('div').eq(1).hide().css('visibility','visible').delay(settings.caption_show_time).fadeIn('fast'); }; this.slide_down = function(){ var height = parseInt($slide.find('div').eq(1).css('height'),10); var position = $slide.find('div:first').position(); $slide.find('div:first').css({'top':-settings.height}).show().delay(settings.caption_delay).animate({ top: position.top+'px' }, settings.caption_show_time); $slide.find('div').eq(1).hide().css('visibility','visible').delay(settings.caption_show_time).fadeIn('fast'); }; this.slide_right = function(){ var width = parseInt($slide.find('div').eq(1).css('width'),10); var position = $slide.find('div:first').position(); $slide.find('div:first').css({'left':-width}).show().delay(settings.caption_delay).animate({ left: position.left+'px' }, settings.caption_show_time); $slide.find('div').eq(1).hide().css('visibility','visible').delay(settings.caption_show_time).fadeIn('fast'); }; this.slide_left = function(){ var width = parseInt($slide.find('div').eq(1).css('width'),10); var position = $slide.find('div:first').position(); $slide.find('div:first').css({'left':settings.width}).show().delay(settings.caption_delay).animate({ left: position.left+'px' }, settings.caption_show_time); $slide.find('div').eq(1).hide().css('visibility','visible').delay(settings.caption_show_time).fadeIn('fast'); }; this.ver = function(){ if (parseInt(this.height,10)>0){ $slide.find('div:first').css({'height':this.height}); $slide.find('div.caption_background').css({'height':this.height}); }else{ $slide.find('div:first').css({'height':settings.caption_size}); $slide.find('div.caption_background').css({'height':settings.caption_size}); } }; this.hor = function(){ if (parseInt(this.width,10)>0){ $slide.find('div:first').css({'width':this.width}); $slide.find('div.caption_background').css({'width':this.width}); }else{ $slide.find('div:first').css({'width':settings.caption_size}); $slide.find('div.caption_background').css({'width':settings.caption_size}); } }; this.animate_end = function(){ $slide.find('div:first').delay(settings.caption_delay).fadeOut(settings.caption_show_time, function() { $(this).remove(); }) }; this.init_base(); this.init_position(); this.init_anim(); }; // class Slider function Slider($newSlider,settings) { var oSlider = this; this.settings = settings; var $slider = $($newSlider); this.slide = $slider; settings.width = parseInt($slider.css('width'),10); settings.height = parseInt($slider.css('height'),10); this.prefix = $slider.attr('id'); var $sliderImage = $slider.find('ul').first().children(); var container; this.currentImage, this.prevPosition; var numberImages; var playSliderRec = null, playSliderHtml = null; var activeButtons = $( [] ) ; var $play_btn, $pause_btn; var sections = ''; var animRandom = 0, animCons = 0; var animList; var showContent; var inTransition; var pauseSlider; var html, curPoint; this.width4, this.height4, this.width2, this.height2; var easing = new Array("linear","swing","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInSine","easeOutSine","easeInOutSine","easeInExpo","easeOutExpo","easeInOutExpo","easeInCirc","easeOutCirc","easeInOutCirc","easeInElastic","easeOutElastic","easeInOutElastic","easeInBack","easeOutBack","easeInOutBack","easeInBounce","easeOutBounce","easeInOutBounce"); var easingNumber=0; // init class Slider this.init = function() { numberImages = $sliderImage.length; var goToSlide;// = $(document).getUrlParam('sp_slide'); if (goToSlide & goToSlide!=''& goToSlide>0 & goToSlide <= numberImages) settings.goToSlideOnStart = goToSlide; oSlider.currentImage = settings.goToSlideOnStart -1; if(settings.shuffle) shuffledLi(); initFirstImg(); this.manageLi(); if (settings.modalMode == 'lightBox') this.fixLiLightBox(); else if (settings.modalMode == 'prettyPhoto') this.fixLiPrettyPhoto(); if(settings.buttons_show){ this.initButtonsPlayPause(); this.initButtonsNextPrev(); this.initPointers(); this.initActiveButtons(); this.initTooltip(); }else{ initPlayPause(); this.initPauseOnMouseOver(); } initAttributes(); if(!settings.active_links) this.fixLi(); else this.initLinks(); initStructure(); initAnimation(); if (!isNaN(settings.repeat)){ if (settings.repeat== false) settings.repeat = 0; settings.repeatRe = settings.repeat; } if (settings.caption) html = new Description($sliderImage[oSlider.currentImage],settings); if (settings.auto_play){ // html.animate_all(); playSlider(); }//else // html.animate_first(); }; // check animation in progress var inProgres = function(fun){ if (inTransition) { }else{ var del = 0; if (settings.caption){ html.animate_end(); del = html.getDelay(); } setTimeout(fun,del); // fun(); } }; // check animation in progress var inProgresSpec = function(){ if (inTransition) { }else { var time = $($sliderImage[settings.curPoint]).data('time'); if (!time) time = settings.trans_period; // html.animate_end(); // var del = html.getDelay() // setTimeout("oSlider.showSpecImage(pos);",del); oSlider.showSpecImage(settings.curPoint); // showContent(pos,time); } }; // init Buttons this.initButtonsPlayPause = function() { if(settings.play_pause_show){ $play_btn = $(''); $pause_btn = $(''); $play_btn .click(function(event){event.preventDefault(); activeButtons = activeButtons.add( $pause_btn.show()).not( $play_btn.hide()); pauseSlider = false; if (oSlider.currentImage==(numberImages-1)) settings.repeatRe = settings.repeat+1; // playOnMouseOver(); oSlider.startSlider();}) .css('display', 'none'); $pause_btn .click(function(event){event.preventDefault(); stopSlider(true); pauseSlider = false; oSlider.pauseTimer();}) .css('display', 'none'); $slider.append($play_btn); $slider.append($pause_btn); if (settings.auto_play) activeButtons = activeButtons.add( $pause_btn ); else activeButtons = activeButtons.add( $play_btn ); } }; // init Buttons this.initButtonsNextPrev = function() { if(settings.next_prev_show){ var $prev_btn = $(''); $prev_btn.addClass("prev-btn"); var $next_btn = $(''); $next_btn.addClass("next-btn"); $prev_btn .click(function(event){event.preventDefault(); stopSlider(true); pauseSlider = false; inProgres(oSlider.showPrevImage);}) .css('display', 'none'); $next_btn .click(function(event){event.preventDefault(); stopSlider(true); pauseSlider = false; inProgres(oSlider.showNextImage);}) .css('display', 'none'); $slider.append($prev_btn); $slider.append($next_btn); activeButtons = activeButtons.add( $prev_btn ).add( $next_btn ); } }; //init Play Pause for outside use var initPlayPause = function() { $play_btn = $(''); $pause_btn = $(''); $play_btn .click(function(event){event.preventDefault(); oSlider.startSlider();}) .css('display', 'none'); $pause_btn .click(function(event){event.preventDefault(); stopSliderDistance();}) .css('display', 'none'); $slider.append($play_btn); $slider.append($pause_btn); }; //init Pointers this.initPointers = function() { var allPointers = $('').css('display', 'none'); for ( var i=1;i<=numberImages;i++){ var $pointer = $(''); // showTooltip($pointer); $pointer.click(function(event) { event.preventDefault(); if (!$(this).hasClass('current-slide')){ stopSlider(true); pauseSlider = false; settings.curPoint = $(this).index(); var del = 0; if (settings.caption){ html.animate_end(); del = html.getDelay(); } setTimeout(inProgresSpec,del); // inProgresSpec($(this).index()); hideTooltip();}}) .mouseover(function(event) { if (settings.tooltip && !$(this).hasClass('current-slide')){ showTooltip(this); }}) .mouseout(function(){hideTooltip()}); $($pointer).appendTo(allPointers); } activeButtons = activeButtons.add( allPointers); $slider.append(allPointers); $($(".nav-btns",$slider).find('.nav-btn')[oSlider.currentImage]).addClass('current-slide'); }; this.initTooltip = function() { var dim = settings.tooltipSize; if (isNaN(dim)) dim = 15; var width = parseInt(settings.width,10)*dim/100; if (settings.tooltip == 'image'){ var tooltip = $("").css({'display': 'none', 'z-index': 150 , 'position': 'absolute', 'opacity': 0}); $slider.append(tooltip); }else if ( settings.tooltip == 'text'){ var tooltip = $('').css({'display': 'none', 'z-index': 150 , 'position': 'absolute', 'opacity': 0}); var tooltip_text = $('').css({'width':width}); $slider.append(tooltip); tooltip.append(tooltip_text); } }; var showTooltip = function(pointer) { var showTooltip = $('.tooltip',$slider); if (showTooltip){ var position = $(pointer).position(), left_tooltip =0; var left_pointer = parseInt($(pointer).css('width'),10)/2; if (settings.tooltip == 'text'){ var text = $('img',$sliderImage[$(pointer).index()]).attr('alt'); $('.tooltip-text').html(text); left_tooltip = parseInt($(".tooltip-text").css('width'),10)/2; }else { var url = $('img',$sliderImage[$(pointer).index()]).attr('thumb'); if (!url) url = $('img',$sliderImage[$(pointer).index()]).attr('src'); $(showTooltip).find('img').attr('src',url); left_tooltip = parseInt($(showTooltip).find('img').css('width'),10)/2; } $(showTooltip).css({'left': position.left+left_pointer-left_tooltip, 'z-index': 150, 'visibility':'visible'}); $(showTooltip).show().animate({ opacity: 1 },300); } }; var hideTooltip = function(pointer) { if ($('.tooltip:visible')){ $('.tooltip:visible').stop(true,true).hide().css({'opacity': 0, 'z-index': -100, 'visibility':'hidden'}); }; }; this.manageLi = function(){ for ( var i=0; i < $sliderImage.size(); i++){ var img = $($sliderImage[i]).find('img:first'); var a = $($sliderImage[i]).children('a').eq(0);//.find('a:first'); var div = $($sliderImage[i]).children('div'); var left = $(div).eq(0).css('left'); var href = a.attr('href'); var target = a.attr('target'); $($sliderImage[i]).html(img); if (a) $($sliderImage[i]).find('img').wrap(a); $($sliderImage[i]).data({'href':href, 'target': target, 'div':div}); } }; this.fixLi = function() { for ( var i=0; i < $sliderImage.size(); i++){ var img = $($sliderImage[i]).find('img:first'); var a = $($sliderImage[i]).find('a:first'); if (a.length>0){ var href = a.attr('href'); var target = a.attr('target'); $($sliderImage[i]).html(img); $($sliderImage[i]).find('img').data({'href':href, 'target': target}); } } }; this.fixLiLightBox = function() { for ( var i=0; i < $sliderImage.size(); i++){ var a = $($sliderImage[i]).find('a:first'); if (a.length>0){ var href = a.attr('href'); var ext = href.split('.').pop().toLowerCase(); if($.inArray(ext, ['gif','png','jpg','jpeg']) != -1) { a.addClass('lightBox'); } } } $('.lightBox',$slider).lightBox(); }; this.fixLiPrettyPhoto = function() { for ( var i=0; i < $sliderImage.size(); i++){ var a = $($sliderImage[i]).find('a:first'); if (a.length>0){ var href = a.attr('href'); var ext = href.split('.').pop().toLowerCase(); if($.inArray(ext, ['gif','png','jpg','jpeg']) != -1) { a.attr('rel','prettyPhoto'); }else if(href.lastIndexOf('youtube.com') != -1) { a.attr('rel','prettyPhoto'); }else if(href.lastIndexOf('vimeo.com') != -1) { a.attr('rel','prettyPhoto'); }else if(href.lastIndexOf('.mov') != -1) { a.attr('rel','prettyPhoto'); } } } $("a[rel^='prettyPhoto']").prettyPhoto(); }; this.reFixLi = function() { for ( var i=0; i < $sliderImage.size(); i++){ var href = $($sliderImage[i]).find('img').data('href'); if (href) var a = $('').attr('href',href); var target = $($sliderImage[i]).find('img').data('target'); if (target) a.attr('target',target); $($sliderImage[i]).find('img').wrap(a); } }; var shuffledLi = function() { var oldVal, newVal; for (var i = 0; i < $sliderImage.size(); i++){ newVal = Math.floor(Math.random()*($sliderImage.size())); oldVal = $sliderImage[i]; $sliderImage[i] = $sliderImage[newVal]; $sliderImage[newVal] = oldVal; } /* $('ul:first',$slider).html(''); for ( var i=0; i < $sliderImage.size(); i++){ $('ul:first',$slider).append($sliderImage[i]);//.first() $($sliderImage[i]).append($($sliderImage[i]).find('a')); } */ }; //init First Image var initFirstImg = function() { $($sliderImage[oSlider.currentImage]).show(); $($slider).css({"background-image": "url('')"}); var info_link = $($sliderImage[oSlider.currentImage]).find('>a').attr('href'); if (info_link) $('div.li-banner-image-wrap',$slider).css({cursor:'pointer'}); if(settings.effect) playEffect(); }; //init Active Buttons this.initActiveButtons = function() { if (settings.auto_hide){ if (settings.auto_play) activeButtons.show().delay(settings.buttons_hide_time).fadeOut(settings.buttons_hide_delay); $slider.not(activeButtons) .mouseenter(function(){ if (settings.pauseOnMouseOver) { // activeButtons = activeButtons.add( $play_btn).not( $pause_btn); activeButtons.stop(true,true).fadeIn(); if (settings.auto_play) pauseSlider = true; stopSlider(false); oSlider.pauseTimer(); }else activeButtons.stop(true,true).delay(settings.buttons_show_delay).fadeIn(settings.buttons_show_time); }) .mouseleave(function(){ if (settings.pauseOnMouseOver && pauseSlider){ // activeButtons = activeButtons.add( $pause_btn.show()).not( $play_btn.hide()); pauseSlider = false; oSlider.startSlider(); } activeButtons.stop(true,true).delay(settings.buttons_hide_time).fadeOut(settings.buttons_hide_delay);}); }else { activeButtons.show(); if (settings.pauseOnMouseOver){ $slider.not(activeButtons) .mouseenter(function(){ // activeButtons = activeButtons.add( $play_btn.show()).not( $pause_btn.hide()); if (settings.auto_play) pauseSlider = true; // stopSlider(false); oSlider.stopRealSlider(); oSlider.pauseTimer();}) .mouseleave(function(){ if (pauseSlider){ // activeButtons = activeButtons.add( $pause_btn.show()).not( $play_btn.hide()); pauseSlider = false; oSlider.startSlider(); }}); } } }; this.unbind = function(){ $slider.not(activeButtons).unbind('mouseenter'); $slider.not(activeButtons).unbind('mouseleave'); }; this.unbindAL = function(){ $slider.unbind('mouseup'); $($sliderImage[oSlider.currentImage]).find('>a').unbind('click'); }; this.initPauseOnMouseOver = function(){ if (settings.pauseOnMouseOver){ $slider .mouseenter(function(){ oSlider.stopRealSlider(); oSlider.pauseTimer();}) .mouseleave(function(){ oSlider.startSlider();}); } }; //init Links this.initLinks = function(){ $sliderImage.mouseup(function(){ if (settings.auto_play){ stopSlider(true); pauseSlider = false; oSlider.pauseTimer(); } }); }; //init Attributes var initAttributes = function() { var image = 0; var nov, custClass, custClasses, transition ='', delay ='', time =''; for ( image; image < $sliderImage.size(); image++){ custClass = $($sliderImage[image]).attr('class'); if(custClass){ custClasses = custClass.split(' '); for ( var i=0; i < custClasses.length; i++){ if( custClasses[i].indexOf('transition_') > -1) transition = custClasses[i].replace('transition_',''); if( custClasses[i].indexOf('delay_') > -1) delay = custClasses[i].replace('delay_',''); if( custClasses[i].indexOf('time_') > -1) time = parseInt(custClasses[i].replace('time_',''),10); } $($sliderImage[image]).find('img').data('href'); $($sliderImage[image]).data({'delay':delay, 'transition': transition, 'time':time}); $($sliderImage[image]).find('img').data('href'); delay = ''; transition = ''; time = ''; } } if (settings.animation == 'Regular' || settings.animation == 'Random'){ animList = new Array(); var i = 0; for ( var key in animations){ animList[i] = key; i++; } animList = animList.slice(0,-6); } if (settings.animation == 'Regular-Exception' || settings.animation == 'Random-Exception'){ animList = new Array(); var animListEx = settings.transitions.split(' '); var i = 0; for ( var key in animations){ if($.inArray(key, animListEx)>=0) continue; animList[i] = key; i++; } animList = animList.slice(0,-6); } if (settings.animation == 'Regular-Custom' || settings.animation == 'Random-Custom'){ animList = settings.transitions.split(' '); } if (settings.animation == 'Random' || settings.animation == 'Random-Custom' || settings.animation == 'Random-Exception'){ var oldVal, newVal; for (var i = 0; i < animList.length; i++){ newVal = Math.floor(Math.random()*(animList.length)); oldVal = animList[i]; animList[i] = animList[newVal]; animList[newVal] = oldVal; } } }; //init Structure var initStructure = function(){ container = $('').css({'position': 'absolute', 'top': '0px', 'left': '0px', 'overflow': 'hidden','height':settings.height, 'width':settings.width, 'z-index': -100}); $('ul',$slider).before(container); if ((settings.animation == 'Random') || (settings.animation == 'Regular')){ initSections(); init_2_X_Sections(); initBgSections(); oSlider.initVertSections(); oSlider.initSqrSections(); }else{ var animStructure = [0,0,0,0,0,0]; for ( var image=0; image < $sliderImage.size(); image++){ var anim = $($sliderImage[image]).data('transition'); if(anim && animations[anim]) { animStructure[animations[anim][2]] ++; } } if (animations[settings.animation]){ animStructure[animations[settings.animation][2]] ++; if (animations[settings.animation][0] >= animations['Regular-Custom'][0]){ for(var i=0; i< animList.length; i++){ if(animations[animList[i]]) animStructure[animations[animList[i]][2]] ++; else animList[i] = 'None'; } } }else settings.animation = 'None'; if(animStructure[1]>0) init_2_X_Sections(); if(animStructure[2]>0) initBgSections(); if(animStructure[3]>0) initSections(); if(animStructure[4]>0) oSlider.initVertSections(); if(animStructure[5]>0) oSlider.initSqrSections(); }; }; //init Sections - 2*2 var initSections = function() { var sqr_sections, sqr_section, image, sectionsX = 2, sectionsY = 2, sectionsZ = 2 ; var url="";// = $('img',$sliderImage[oSlider.currentImage]).attr('src'); var xPos, tOffset; var width = Math.ceil(parseInt(settings.width,10)/sectionsX); oSlider.width4 = width*2; var height = Math.ceil(parseInt(settings.height,10)/sectionsY); oSlider.height4 = height*2; for ( var y=0; y < sectionsY; y++){ for ( var i=0; i < sectionsX; i++){ for ( var z=0; z < sectionsZ; z++){ sqr_section=$('