/************************************************************************** * jquery.themepunch.kenburn.js - jQuery Plugin for kenburn Slider * @version: 2.0 (09.02.2012) * @requires jQuery v1.2.2 or later * @author Krisztian Horvath **************************************************************************/ (function($,undefined){ //////////////////////////// // THE PLUGIN STARTS HERE // //////////////////////////// $.fn.extend({ // OUR PLUGIN HERE :) kenburn: function(options) { //////////////////////////////// // SET DEFAULT VALUES OF ITEM // //////////////////////////////// var defaults = { width: 876, // width of banner height: 300, // height of banner thumbWidth:90, thumbHeight:50, thumbAmount:6, thumbSpaces:4, thumbPadding:4, thumbStyle:"bullet", // bullet, image,thumb,none bulletXOffset:0, bulletYOffset:0, shadow:'true', timer:2000, touchenabled:"on", pauseOnRollOverThumbs:'off', pauseOnRollOverMain:'on', preloadedSlides:50, googleFonts:'PT+Sans+Narrow:400,700', googleFontJS:'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', debug:"no" }; options = $.extend({}, $.fn.kenburn.defaults, options); WebFontConfig = { google: { families: [ options.googleFonts ] }, active: function() { jQuery('body').data('googlefonts','loaded');}, inactive: function() { jQuery('body').data('googlefonts','loaded');} }; return this.each(function() { var opt=options; if (opt.bulletXOffset==undefined) opt.bulletXOffset=0; if (opt.bulletYOffset==undefined) opt.bulletYOffset=0; // GOOGLE FONT HANDLING if (opt.googleFonts!=undefined && opt.googleFonts.length>0) { var wf = document.createElement('script'); wf.src = opt.googleFontJS; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); jQuery('body').data('googlefonts','wait'); } else { jQuery('body').data('googlefonts','loaded'); } opt.savedTimer=opt.timer; var top_container=$(this); // DEBUGGING INFORMATIONS HERE if (opt.debug==="on") $('body').append('
'); top_container.css({'width':opt.width+"px",'height':opt.height+"px"}); top_container.append('
'); $('body').find('.khinfo').html('Start Slider'); prepareSlidesContainer(top_container,opt); $('body').find('.khinfo').html('Prepared Container'); prepareSlides(top_container,opt); $('body').find('.khinfo').html('Prepared Preloaded Slides'); prepareShadows(top_container,opt); $('body').find('.khinfo').html('Prepared Shadows'); $('body').find('.khinfo').html('Waiting for Images...'); opt.loadedImages=0; top_container.waitForImages( function() { $('body').find('.khinfo').html('Preloaded Images has been loaded'); var waitForWF = setInterval(function() { $('body').find('.khinfo').html('Waiting for Google Fonts'); // IF THE GOOGLE FONT IS LOADED WE CAN START TO ROTATE THE IMAGES if ($('body').data('googlefonts') != undefined && $('body').data('googlefonts')=="loaded") { // CREATE THE THUMBNAILS HERE if (opt.thumbStyle=="image" || opt.thumbStyle=="both" || opt.thumbStyle=="thumb") createThumbnails(top_container,opt); if (opt.thumbStyle=="bullet" || opt.thumbStyle=="both") createBullets(top_container,opt); $('body').find('.khinfo').html('Google Fonts are here'); clearInterval(waitForWF); startRotation(top_container,opt); $('body').find('.khinfo').html('Rotation Started'); prepareRestSlides(top_container,opt); } },10); }, function() { $('body').find('.khinfo').html(opt.loadedImages+'. Image has been Loaded'); opt.loadedImages=opt.loadedImages+1; }); startTimer(top_container,opt); // TOUCH ENABLED SCROLL if (opt.touchenabled=="on") top_container.swipe( {data:top_container, swipeLeft:function() { var newitem = top_container.data('currentSlide'); if (newitem.index()0) { var next=top_container.find('ul li:eq('+(newitem.index()-1)+')'); } else { var next=top_container.find('ul li:eq('+(opt.maxitem-1)+')'); } swapBanner(newitem,next,top_container,opt); }, allowPageScroll:"auto"} ); }) } }) /////////////////////////////// // -- LOCALE FUNCTIONS -- // /////////////////////////////// /////////////////////////////////////////// // -- Set the Containers of Slides -- // /////////////////////////////////////////// function prepareSlides(top,opt) { top.find('iframe').attr("frameborder",0); top.find('ul').wrap('
'); top.find('ul .slide_mainmask').css({'opacity':'0.0'}); opt.maxitem=0; top.find('ul >li').each(function(i) { opt.maxitem=opt.maxitem+1; var $this=$(this); var img = $this.find('img:first'); img.data('src',img.attr('src')); img.attr('src',""); }); for (var i=0;ili').each(function(i) { if (i==nr) { var $this = $(this); $this.find('.creative_layer').wrap('
'); $this.wrapInner('
'); var ie_old = ( $.browser.msie ) && ($.browser.version<9); // PREPARE THE BLACK AND WHITE IMAGES HERE if ($this.find('img:first').data('bw') != undefined && $this.find('img:first').data('bw').length>0 && !ie_old) $this.find('.kb_container').append(''); $this.find('img:first').attr('src',$this.find('img:first').data('src')); /******************************* ################################ THE STRUCTUE: ->slide_container ->parallax_container ->kb_container ################################ ********************************/ $this.find('.slide_container').css({'opacity':'0.0'}); $this.find('.slide_container .parallax_container .kb_container .video_container').each(function() { var $this=$(this); $this.closest('.slide_container').append('
'); $this.closest('.slide_container').append('
'); $this.closest('.slide_container').data('video',1); var pbutton = $this.closest('.slide_container').parent().find('.kenburn-video-button'); var over = $this.closest('.slide_container').parent().find('.kenburn-video-overlay'); var _width = parseInt(pbutton.css('width'),0); var _height = parseInt(pbutton.css('height'),0); var mwidth = parseInt($this.closest('.slide_container').css('width'),0); var mheight = parseInt($this.closest('.slide_container').css('height'),0); pbutton.css({'left':(mwidth/2-_width/2)+'px','top':(mheight/2-_height/2)+'px'}); pbutton.data('top',top); pbutton.data('url',$this.html()); $this.remove(); over.data('origopa',over.css('opacity')); // VIDEO IS DEFINED, SO HOVER ON VIDEO BUTTON SHOULD MAKE SOME EFFECT pbutton.hover( function() { var $this = $(this); var $over = $this.parent().find('.kenburn-video-overlay'); if ( $.browser.msie ) $over.animate({'opacity':'0.5'},{duration:100}); else $over.cssAnimate({'opacity':'0.5'},{duration:100}); if ($.browser.version > 7 && $.browser.version < 9) { $over.css({'display':'block'}); } }, function() { var $this = $(this); var $over = $this.parent().find('.kenburn-video-overlay'); if ( $.browser.msie ) $over.animate({'opacity':$over.data('origopa')},{duration:100}); else $over.cssAnimate({'opacity':$over.data('origopa')},{duration:100}); if ($.browser.msie && $.browser.version > 7 && $.browser.version < 9) { $over.css({'display':'none'}); } }); // VIDEO IS DEFINED, SO CLICK ON VIDEO BUTTON SHOULD START TO PLAY THE VIDEO HERE pbutton.click( function() { var $this=$(this); var top=$this.data('top'); var slidemask = top.find('.slide_mainmask'); slidemask.addClass("videoon"); top.data('currentSlide').animate({'top':opt.height+"px"},{duration:500,queue:false}); top.find('.slide_mainmask').append('
'+$this.data('url')+'
'); var video = top.find('.slide_mainmask .video_container'); video.css({'top':(0-opt.height)+"px"}); video.animate({'top':'0px'},{duration:500,queue:false}); video.find('* .close').click( function() { var slidemask = top.find('.slide_mainmask'); slidemask.removeClass("videoon"); top.data('currentSlide').animate({'top':"0px"},{duration:600,queue:false}); video.animate({'top':(0-opt.height)+'px'},{duration:600,queue:false}); setTimeout(function() {video.remove()},600); }); }); }); } }); } //////////////////////////////////////////////// // -- BACKGROUND AND DEFAULT VALUES -- // ////////////////////////////////////////////// function prepareSlidesContainer(top,opt) { top.append('
'); var bg=top.find('.kenburn-bg'); opt.padtop = 0; opt.padleft=0; opt.padright=0; opt.padbottom=0; opt.bordertop = 0; opt.borderleft=0; opt.borderright=0; opt.borderbottom=0; try { opt.padtop=parseInt(bg.css('paddingTop'),0) || 0; } catch(e) {} try { opt.padleft=parseInt(bg.css('paddingLeft'),0) || 0; } catch(e) {} try { opt.padright=parseInt(bg.css('paddingRight'),0) || 0; } catch(e) {} try { opt.padbottom=parseInt(bg.css('paddingBottom'),0) || 0; } catch(e) {} try { opt.bordertop=parseInt(bg.css('border-top-width'),0) || 0; } catch(e) {} try { opt.borderleft=parseInt(bg.css('border-left-width'),0) || 0; } catch(e) {} try { opt.borderright=parseInt(bg.css('border-right-width'),0) || 0; } catch(e) {} try { opt.borderbottom=parseInt(bg.css('border-bottom-width'),0) || 0; } catch(e) {} opt.width = opt.width - opt.padleft - opt.padright - opt.borderleft - opt.borderright; opt.height = opt.height - opt.padtop - opt.padbottom - opt.bordertop - opt.borderbottom; bg.width(opt.width); bg.height(opt.height); var full = opt.width + opt.padleft + opt.padright + opt.borderleft + opt.borderright; top.closest('.kb_slider_wrapper').width(full); } //////////////////////////////////////////////// // -- ADD THE SHADOWS IN CASE WE NEED -- // ////////////////////////////////////////////// function prepareShadows(top,opt) { if (opt.shadow=="true" || opt.shadow==true || opt.shadow=="on") { // CALCULATE THE SIZES OF THE SHADOWS var full = opt.width + opt.padleft + opt.padright + opt.borderleft + opt.borderright; top.closest('.kb_slider_wrapper').width(full); var fifty = full/2; if (fifty>50) fifty=50; full = full - 2*fifty; // CREATE LEFT, MIDDLE AND RIGHT SHADOWS var leftshadow=$('
'); var rightshadow=$('
'); var repeatshadow=$('
'); // APPEND THE SHADOWS top.append(leftshadow); top.append(repeatshadow); top.append(rightshadow); } else { var thc=top.find('.kenburn_thumb_container'); //alert(thc); } } /////////////////////////// // CREATE THE THUMBNAILS // ////////////////////////// function createThumbnails(top,opt) { var maxitem = top.find('ul >li').length; // CALCULATE THE MAX WIDTH OF THE THUMB HOLDER if (maxitem'); // CREATE THE WHITE HOLDER var thc=top.find('.kenburn_thumb_container'); if (opt.thumbAmount==0) thc.css({'visibility':'hidden'}); thc.append('
'); thc.find('.kenburn_thumb_container_bg').append('
'); // CREATE THE MASK INSIDE thc.append('
'); var thma=thc.find('#thumbmask'); // CREATE THE SLIDER CONTAINER thma.append('
'); var thbg=thma.find('.thumbsslide'); /********************************************** ############################################## STRUCTURE OF THUMBNAILS ->.kenburn_thumb_container ->#thumbmask ->.thumbsslide ->thumb (thumb"i") ->.kenburn_thumb_container_bg ############################################## *********************************************/ // GO THROUGHT THE ITEMS, AND CREATE AN THUMBNAIL AS WE NEED top.find('ul >li').each(function(i) { var $this=$(this); // READ OUT THE DATA INFOS var img=$this.find('img:first'); var bgsrc=img.data('thumb_bw'); var src=img.data('thumb'); var isvideo = $this.find('.slide_container').data('video')==9; //1 // CREATE THE THUMBS var thumb=$('
'); thumb.data('id',i); if (i==maxitem) thumb.css({'margin-right':'0px'}); thbg.append(thumb); // CREATE THE IMG ON IT var new_img=$('
'); thumb.append(new_img); var ovv=thumb.find('#over'); ovv.css({'opacity':'0.0'}); if ($.browser.msie && $.browser.version > 7 && $.browser.version < 9) { //ovv.css("filter","alpha(opacity=0)"); ovv.css({'display':'none'}); } ovv.css({'overflow':'hidden','position':'absolute','left':'0px','opacity':'0.0','height':opt.thumbHeight+"px",'width':opt.thumbWidth+"px"}); ovv.find('img').css({'position':'absolute','left':'0px'}); if ( $.browser.msie ) { ovv.animate({'left':'0px','opacity':'0.0','height':opt.thumbHeight+"px",'width':opt.thumbWidth+"px"},{duration:50,queue:false}); ovv.find('img').animate({'left':'0px'},{duration:50,queue:false}); } else { ovv.cssAnimate({'left':'0px','opacity':'0.0','height':opt.thumbHeight+"px",'width':opt.thumbWidth+"px"},{duration:50,queue:false}); ovv.find('img').cssAnimate({'left':'0px'},{duration:50,queue:false}); } // CREATE VIDEO BUTTON ON THE THUMBNAIL if (isvideo) { var new_video=$('
'); thumb.append(new_video); thumb.find('.video').css({'position':'absolute', 'top':opt.thumbHeight/2+'px', 'left':opt.thumbWidth/2+'px', 'z-index':'1000'}); } // ADD SHADOWS if (opt.shadow=="true" || opt.shadow==true || opt.shadow=="on") { var repeatshadow=$('
'); thumb.append(repeatshadow); } /////////////////////////////////////// // SHOW THE COLORED THUMBNAIL HERE // ////////////////////////////////////// var thumbnail = thbg.find('#thumb'+i); thumbnail.hover( function() { var $this=$(this).find('#over'); if (!$this.parent().hasClass("selected")) { //$this.stop(); if ( $.browser.msie ) { if ($.browser.msie && $.browser.version > 7 && $.browser.version < 9) $this.css({'display':'block'}); else $this.animate({'opacity':'1.0'},{duration:300,queue:false}); } else { $this.css({'left':'0px','display':'block'}); $this.find("img").css({'display':'block','opacity':'1.0','left':'0px'}); $this.cssAnimate({'opacity':'1.0'},{duration:300,queue:false}); } } }, function() { var $this=$(this).find('#over'); if (!$this.parent().hasClass("selected")) { if ( $.browser.msie ) { if ($.browser.msie && $.browser.version > 7 && $.browser.version < 9) $this.css({'display':'none'}); else $this.animate({'opacity':'0'},{duration:300,queue:false}); } else { $this.cssAnimate({'opacity':'0.0'},{duration:300,queue:false}); } } }); thumbnail.click(function() { var $this=$(this); if (!$this.hasClass("selected")) { var newslide = top.find('ul li:eq('+$this.data('id')+')'); swapBanner(top.data('currentSlide'),newslide,top,opt); } }); }); //////////////////////// // SLIDE TO POSITION // //////////////////////// if (maxwidth0) pos =0; if (pos<0-diff) pos=0-diff; if (opt.pauseOnRollOverMain != "off") $this.addClass("overon"); $this.find('.thumbsslide').css({'position':'absolute'}); if ( $.browser.msie ) $this.find('.thumbsslide').animate({'left':pos+'px'},{duration:200,queue:false}); else $this.find('.thumbsslide').cssAnimate({'left':pos+'px'},{duration:200,queue:false}); }); thma.mousemove(function() { var $this=$(this); if (opt.pauseOnRollOverThumbs != "off") $this.addClass('overme'); var offset = $this.offset(); var x = $('body').data('mousex')-offset.left; x=x-$this.data('thw')/2; // STEPS AND ETC var steps=$this.data('steps'); //ANIMATE TO POSITION var pos=(0-steps*x); if (pos>0) pos =0; if (pos<0-diff) pos=0-diff; if (!$this.hasClass("overon")) { $this.find('.thumbsslide').css({'position':'absolute'}); //$this.find('.thumbsslide').stop(); if ( $.browser.msie ) $this.find('.thumbsslide').animate({'left':pos+'px'},{duration:0,queue:false}); else $this.find('.thumbsslide').cssAnimate({'left':pos+'px'},{duration:0,queue:false}); } else { setTimeout(function() {$this.removeClass('overon');},100); } }); thma.mouseout(function() { var $this=$(this); $this.removeClass('overme'); }); } // ADDED FROM PARADIGM !!! if ( opt.thumbAmount==0 || opt.thumbStyle=="none") { thc.css({'visibility':'hidden'}); top.css({'width':full+"px"}); } else { top.css({'width':full+"px",'height':(opt.height+bgheight)+"px"}); } } /////////////////////////// // CREATE THE BULLETS // ////////////////////////// function createBullets(top,opt) { var maxitem = top.find('ul >li').length; // CALCULATE THE MAX WIDTH OF THE THUMB HOLDER var full = opt.width + opt.padleft + opt.padright; // Create BULLET CONTAINER top.append('
'); var leftb = top.find('.leftarrow'); var rightb = top.find('.rightarrow'); rightb.click(function() { var newitem = top.data('currentSlide'); if (newitem.index()0) { var next=top.find('ul li:eq('+(newitem.index()-1)+')'); } else { var next=top.find('ul li:eq('+(opt.maxitem-1)+')'); } swapBanner(newitem,next,top,opt); }); var minithumbs = top.find('.thumbs'); // GO THROUGHT THE ITEMS, AND CREATE AN THUMBNAIL AS WE NEED top.find('ul >li').each(function(i) { var $this=$(this); var thumb_mini=$('
'); thumb_mini.data('id',i); minithumbs.append(thumb_mini); thumb_mini.click(function() { var $this=$(this); if (!$this.hasClass("selected")) { var newslide = top.find('ul li:eq('+$this.data('id')+')'); swapBanner(top.data('currentSlide'),newslide,top,opt); } }); }); minithumbs.waitForImages(function() { var tp = parseInt(minithumbs.parent().parent().position().top,0); minithumbs.parent().parent().css({'top':(tp+opt.bulletYOffset)+"px",'left':((full/2 - parseInt(minithumbs.parent().width(),0)/2)+opt.bulletXOffset)+"px"}); }); } ///////////////////////////////////////////// // - START THE ROTATION OF THE BANNER HERE // ///////////////////////////////////////////// function startRotation(item,opt) { if ( $.browser.msie ) { item.find('.kenburn-preloader').animate({'opacity':'0.0'},{duration:300,queue:false}); } else { item.find('.kenburn-preloader').cssAnimate({'opacity':'0.0'},{duration:300,queue:false}); } setTimeout(function() {item.find('.kenburn-preloader').remove();},300); var first_slide = item.find('ul li:first') ; swapBanner(first_slide,first_slide,item,opt); startParallax(item,opt); opt.loaded=1; } ///////////////////////////////// // - START THE PARALLAX EFFECT // //////////////////////////////// function startParallax(slidertop,opt) { // FIND THE RIGHT OBJECT var top = slidertop.find('.slide_mainmask'); // SET WIDTH AND HEIGHT top.data('maxwidth',opt.width+opt.padleft+opt.padright); top.data('maxheight',opt.height+opt.padtop+opt.padbottom); top.data('pdistance',opt.parallaxX); top.data('pdistancey',opt.parallaxY); top.data('cdistance',opt.captionParallaxX); top.data('cdistancey',opt.captionParallaxY); top.data('opt',opt); // SOME HELP DIV IF WE NEED TO DEBUG // //top.append('
'); $('body').append('
'); // KEN BURN ANIMATION var slide = top.parent().data('currentSlide'); var par = top.find('.parallax_container'); var layers = slide.find('.layer_container'); // THE FIRST MOUSE OVER ON THE TOP top.mouseenter(function(e) { var $this = $(this); // FIND THE RIGHT THUMBNAIL HOLDER OBJECT var thma = $this.parent().find('.kenburn_thumb_container #thumbmask'); // IF MOUSE IS NOT OVER THE THUMBS AND START ANIMATION NOT RUNNING var slide = $this.parent().data('currentSlide'); var par = slide.find('.parallax_container'); var layers = slide.find('.layer_container'); $this.addClass('overon'); }); // BACK TO CENTER AFTER LEAVE top.mouseleave(function(e) { var $this = $(this); var slide = $this.parent().data('currentSlide'); var par = slide.find('.parallax_container'); var layers = slide.find('.layer_container'); $this.removeClass("overme"); $this.addClass('overon'); }); // HERE COME THE DIRECT PARALLAX HANDLING FOR QUICK ANIMATIONS top.mousemove(function(e) { var $this = $(this); if (opt.pauseOnRollOverMain != "off") $this.addClass("overme"); // FIND THE RIGHT THUMBNAIL HOLDER OBJECT var thma = $this.parent().find('.kenburn_thumb_container #thumbmask'); // IF MOUSE IS NOT OVER THE THUMBS AND START ANIMATION NOT RUNNING if (!thma.hasClass('overme') && !$this.hasClass('overon')) { var slide = $this.parent().data('currentSlide'); var par = slide.find('.parallax_container'); var layers = slide.find('.layer_container'); } else { setTimeout(function() {$this.removeClass('overon')},100); } }); } ///////////////////////////// // RANDOM ALIGN GENERATOR // //////////////////////////// function randomAlign() { var align=""; var a=Math.floor(Math.random()*3); var b=Math.floor(Math.random()*3); if (a==0) align="left"; else if (a==1) align="center" else align="right"; if (b==0) align=align+",top" else if (b==1) align=align+",center" else align=align+",bottom"; return align; } //////////////////////////////////////////////////// // - THE BANNER SWAPPER, ONE AGAINST THE OTHER :) // //////////////////////////////////////////////////// function swapBanner(item,newitem,slider_container,opt) { var trans=false; slider_container.find('ul >li').each(function(i) { var $this=$(this); if ($this.index() !=item.index() && $this.index() !=newitem.index()) { $this.css({'display':'none','position':'absolute','left':'0px','z-index':'994'}); } }); var video = slider_container.find('.slide_mainmask .video_container'); setTimeout(function() {video.remove()},600); var slidemask = slider_container.find('.slide_mainmask'); slidemask.removeClass("videoon"); item.css({'position':'absolute','top':'0px','left':'0px','z-index':'900'}); newitem.css({'position':'absolute','top':'0px','left':'0px','z-index':'1000'}); newitem.css({'display':'block'}); //Lets find the Image var sour=newitem.find('img:first'); var sourbw=newitem.find('.bw-main-image'); // Lets Save the Size of the IMG first in the DATA if (newitem.data('ww') == undefined) { var oldW=newitem.find('img').width(); //Read out the Width var oldH=newitem.find('img').height(); //Read out the Width if (oldW!=0) { // If the Width is not 0 (the image is loaded) // Let See if the KenBurn Img is smaller than the stage (width). If yes, we need to scale it first ! if (sour.width()>0 && sour.width()0 && sour.height()'); sour.css({'display':'none'}); var canvas=sour.parent().find('.canvas-now-canvas')[0]; var context = canvas.getContext('2d'); if (sourbw.length>0) { sour.parent().append('
'); sourbw.css({'display':'none'}); var canvasbw=sour.parent().find('.canvas-now-canvas-bw')[0]; var contextbw = canvasbw.getContext('2d'); } } else { } // LETS GET THE TIME var time=newitem.data('panduration'); // DEFAULT VALUES FOR SCALING AND MOVING THE IMAGE var scalerX=0; var scalerY=0; var newW=oldW; var newH=oldH; // READ OUT THE ZOOMFACTOR var zoomfact=newitem.data('zoomfact') var zoom = newitem.data('zoom'); if (zoom=="random") { if (Math.floor(Math.random()*2) == 0) zoom="out" else zoom="in"; } if (newitem.data('zoomfact')=="random") { zoomfact=(Math.random()*1 + 1); } // IF WE ZOOM OUT, WE NEED TO RESET THE ZOOM FIRST TO "BIG" if (zoom == "out") { newW=newW*zoomfact; newH=newH*zoomfact; newL=newL*zoomfact; newT=newT*zoomfact; } // NOW LETS CALCULATE THE STEPS HERE var movX = (endL-newL) / (time*25); var movY = (endT-newT) / (time*25); var opaStep = 1/(time*25); // STANDARD ZOOM STEPS scalerX=(oldW*zoomfact) / (time*25)/10; scalerY=(oldH*zoomfact) / (time*25)/10; // IF ZOOM OUT, WE INVERT THE ZOOM STEPS if (zoom == "out") { scalerX=scalerX*-1; scalerY=scalerY*-1; } // Lets compute the End Zoom Offsets depending on the End Align if (newitem.data('endalign') != undefined) { var ealignh = newitem.data('endalign'); var horiz = ealignh.split(',')[0]; var vert = ealignh.split(',')[1]; if (horiz == "left") movX = movX + scalerX/4; else if (horiz == "center") movX = movX - scalerX/2; else if (horiz == "right") movX = movX - scalerX; if (vert == "top") movY = movY + scalerY/4; else if (vert == "center") movY = movY - scalerY/2; else if (vert == "bottom") movY = movY - scalerY; } // IF THE TIMER IS SMALLER THAN THE BASIC TIMER, THAN THE MAIN TIMER NEED TO BE REDUCED TO if (opt.timer>parseInt(newitem.data('panduration'),0)*10) { opt.timer=parseInt(newitem.data('panduration'),0)*10 } else { opt.timer=opt.savedTimer*10; } if (hasCanvas) { context.drawImage(sour[0],newL,newT,newW,newH); if (sourbw.length>0) { contextbw.drawImage(sourbw[0],newL,newT,newW,newH); setTimeout(function() { sour.parent().find('.canvas-now-bw').cssAnimate({'opacity':'0.0'},{duration:newitem.data('colortransition')*1000,queue:false}); },500); } } sour.cssStop(true,true); sourbw.cssStop(true,true); sour.css({ 'position':'absolute', 'left':newL+"px", 'top':newT+"px", 'width':newW+"px", 'height':newH+"px", 'opacity':1.0}); sourbw.css({'position':'absolute', 'left':newL+"px", 'top':newT+"px", 'width':newW+"px", 'height':newH+"px", 'opacity':1.0}); var oldL = newL; var oldT = newT; var oldWW = newW; step=0; // NOW WE CAN CREATE AN INTERVAL, WHICH WILL SHOW 25 FRAMES PER SEC (TO MINIMIZE THE CPU STEPS) newitem.data('interval',setInterval(function() { if (!slider_container.parent().parent().find('.kenburn_thumb_container #thumbmask').hasClass('overme') && !slider_container.find('.slide_mainmask').hasClass('overme') && !slider_container.find('.slide_mainmask').hasClass('videoon')) { newW=newW+scalerX; //CHANGE THE SCALING PARAMETES newH=newH+scalerY; newL=newL+movX; // MOVE THE POSITION OF THE IMAGES newT=newT+movY; if (newL>0) newL=0; if (newT>0) newT=0; if (newL<(opt.width - newW)) newL=opt.width-newW; if (newT<(opt.height - newH)) newT=opt.height-newH; if (hasCanvas) { context.drawImage(sour[0],newL,newT,newW,newH); if (sourbw.length>0) contextbw.drawImage(sourbw[0],newL,newT,newW,newH); } else { var s=newW/oldWW; var p1=newL - oldL; var p2=newT - oldT; if( jQuery.browser.msie ) { sour.css({'filter': 'progid:DXImageTransform.Microsoft.Matrix(FilterType="bilinear",M11=' + s + ',M12=0,M21=0,M22=' + s + ',Dx=' + p1 + ',Dy=' + p2 + ')'}); sour.css({'-ms-filter': 'progid:DXImageTransform.Microsoft.Matrix(FilterType="bilinear",M11=' + s + ',M12=0,M21=0,M22=' + s + ',Dx=' + p1 + ',Dy=' + p2 + ')'}); sourbw.remove(); } else { sour.cssAnimate({ 'left':newL+"px", 'top':newT+"px", 'width':newW+"px", 'height':newH+"px"}, { duration:38, easing:'linear',queue:false}); if (sourbw.length>0 && sourbw.css('opacity')>0) { sourbw.cssAnimate({ 'left':newL+"px", 'top':newT+"px", 'width':newW+"px", 'height':newH+"px"}, { duration:38, easing:'linear',queue:false}); sourbw.css({'opacity':(sourbw.css('opacity')-opaStep)}); } } } } },40)); var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() ); if(is_chrome && opt.repairChromeBug=="on") { newitem.data('transition','slide'); } // TRANSITION OF THE SLIDES if (newitem.data('transition')=="slide") { if (trans==false) { var left=true; if (item.index()>newitem.index()) left = false; if (left) { video.animate({'left':(0-opt.width)+'px'},{duration:600,queue:false}); newitem.find('.slide_container').stop(true,true); newitem.find('.slide_container').css({'opacity':'1.0','left':opt.width+"px"}); //setTimeout(function() { //if ( $.browser.msie ) { item.find('.slide_container').animate({'left':0-opt.width+'px'},{duration:600,queue:false}); newitem.find('.slide_container').animate({'left':'0px','top':'0px','opacity':'1.0'},{duration:600,queue:false}); /*} else { item.find('.slide_container').cssAnimate({'left':0-opt.width+'px'},{duration:600,queue:false}); newitem.find('.slide_container').cssAnimate({'left':'0px','top':'0px','opacity':'1.0'},{duration:600,queue:false}); }*/ //},600); } else { video.animate({'left':(opt.width)+'px'},{duration:600,queue:false}); newitem.find('.slide_container').stop(true,true); newitem.find('.slide_container').css({'opacity':'1.0','position':'absolute','top':'0px','left':0-opt.width+'px'}); //if ( $.browser.msie ) { item.find('.slide_container').animate({'left':opt.width+'px'},{duration:600,queue:false}); newitem.find('.slide_container').animate({'left':'0px','top':'0px','opacity':'1.0'},{duration:600,queue:false}); //} else { //item.find('.slide_container').cssAnimate({'left':opt.width+'px'},{duration:600,queue:false}); //newitem.find('.slide_container').cssAnimate({'left':'0px','top':'0px','opacity':'1.0'},{duration:600,queue:false}); //} } } } else { //if ( $.browser.msie ) item.find('.slide_container').stop(true,true); item.find('.slide_container').animate({'opacity':0},{duration:600,queue:false}); //else //item.find('.slide_container').cssAnimate({'opacity':'0'},{duration:600,queue:false}); video.animate({'opacity':'0.0'},{duration:600,queue:false}); //if ( $.browser.msie ) newitem.find('.slide_container').stop(true,true); newitem.find('.slide_container').css({'opacity':0,'left':'0px','top':'0px'}); newitem.find('.slide_container').animate({'opacity':1},{duration:600,queue:false}); //else //newitem.find('.slide_container').cssAnimate({'opacity':'1.0'},{duration:600,queue:false}); } // SET THE THUMBNAIL if (slider_container.find('.kenburn_thumb_container').length>0) { var thumb = slider_container.find('.kenburn_thumb_container #thumbmask .thumbsslide #thumb'+newitem.index()+' #over'); slider_container.find('.kenburn_thumb_container #thumbmask .thumbsslide #thumb'+item.index()).each(function(i) { var $this=$(this); if ($this.attr('id')!="thumb"+newitem.index()) { $this.removeClass('selected'); var over=$this.find('#over'); over.stop(); over.css({'position':'absolute','opacity':'0.0'}); setTimeout(function() { over.find('img').css({'position':'absolute','left':'0px'}); },30); if ( $.browser.msie ) { over.animate({'left':'0px','height':opt.thumbHeight+"px",'width':opt.thumbWidth+"px"},{duration:1,queue:false}); } else { over.cssAnimate({'left':'0px','height':opt.thumbHeight+"px",'width':opt.thumbWidth+"px"},{duration:1,queue:false}); } if ($.browser.msie && $.browser.version > 7 && $.browser.version < 9) over.css({'display':'none'}); } }); thumb.parent().addClass('selected'); thumb.animate({'opacity':'1.0'},{duration:300,queue:false}); if ($.browser.msie && $.browser.version > 7 && $.browser.version < 9) thumb.css({'display':'block'}); // SET THE CURRENT ITEM IN DATA slider_container.data('currentThumb',thumb); } if (slider_container.find('.minithumb').length>0) { var thumb = slider_container.find('#minithumb'+newitem.index()); slider_container.find('.minithumb').removeClass('selected'); thumb.addClass('selected'); if (opt.thumbStyle!="both") slider_container.data('currentThumb',thumb); } //SAVE THE LAST SLIDE slider_container.data('currentSlide',newitem); // START textanim(newitem,100,slider_container); opt.cd=0; } ////////////////////////////////////////// // CHECK IF CANCAS (HTML5) IS SUPPORTED // ////////////////////////////////////////// function isCanvasSupported(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } //////////////////////////////////// // AUTOMATIC COUNTDOWN FOR SLIDER // //////////////////////////////////// function startTimer(top,opt) { opt.cd=0; if (opt.thumbStyle=="image" || opt.thumbStyle=="both" || opt.thumbStyle=="thumb") { //opt.timer=opt.timer*10; if ( $.browser.msie ) top.find('.kenburn_thumb_container #thumbmask .thumbsslide').cssAnimate({'left':'0px'},{duration:300,queue:false}); else top.find('.kenburn_thumb_container #thumbmask .thumbsslide').animate({'left':'0px'},{duration:300,queue:false}); var tmask = top.find('.kenburn_thumb_container #thumbmask'); var tslide = tmask.find('.thumbsslide'); var slidemask = top.find('.slide_mainmask'); // HIER COMES THE INTERVAL ES IT SHOULD setInterval(function() { if (opt.loaded==1) { var newitem = top.data('currentSlide'); var thumb = top.data('currentThumb'); if (!tmask.hasClass('overme') && !slidemask.hasClass('overme') && !slidemask.hasClass('videoon')) { opt.cd=opt.cd+1; var offsetme = Math.floor(opt.thumbWidth * ((opt.cd/opt.timer))) if ( $.browser.msie ) { thumb.find('img').animate({'left':(0-offsetme)+'px'},{duration:10,queue:false}); thumb.animate({'left':offsetme+'px'},{duration:10,queue:false}); } else { thumb.find('img').cssAnimate({'left':(0-offsetme)+'px'},{duration:10,queue:false}); thumb.cssAnimate({'left':offsetme+'px'},{duration:10,queue:false}); } if (opt.cd==opt.timer) { opt.cd=0; tslide.find('.kenburn-thumbs').each(function() { var $this=$(this); if ( $.browser.msie ) { $this.stop(); $this.find('img').stop(true,true); } else { $this.cssStop(true,true); $this.find('img').cssStop(true,true); } $this.find('img').css({'left':'0px'}); tslide.css({'left':'0px'}); }); if (newitem.index()
'); $this.prepend('
'); $this.css({'background':'none'}); } var params = $this.data('params'); // STOP ANIMATION, AND RESTORE ORIGINAL POSITION $this.stop(true,true).find('.wipermode-origin') $this.stop(true,true); $this.find('.wipermode').stop(true,true); // REGISTER THE BG AND TEXT AT THE RIGHT POSITION (START POSITION) if ($this.hasClass('wipeup')) { $this.find('.wipermode-origin').css({'top':(-1*params.hh)+"px",'left':params.padleft}); $this.find('.wipermode').css({'top':(params.hh)+"px"}); } else { if ($this.hasClass('wipedown')) { $this.find('.wipermode-origin').css({'top':(params.hh)+"px",'left':params.padleft}); $this.find('.wipermode').css({'top':(-1*params.hh)+"px"}); } else { if ($this.hasClass('wipeleft')) { $this.find('.wipermode-origin').css({'top':params.padtop,'left':(-1*params.ww)+"px"}); $this.find('.wipermode').css({'left':(params.ww)+"px"}); } else { $this.find('.wipermode-origin').css({'top':params.padtop,'left':(params.ww)+"px"}); $this.find('.wipermode').css({'left':(-1*params.ww)+"px"}); } } } $this.animate({'opacity':'1.0'},{duration:300,queue:false}); $this.find('.wipermode-origin').animate({'top':params.padtop, 'left':params.padleft},{duration:500,easing:'easeOutSine', queue:false}); $this.find('.wipermode').animate({'top':'0px','left':'0px'},{duration:500,easing:'easeOutExpo', queue:false}); },(edelay + (counter+1)*350)); counter++; } //// - masklesswipe UP/DOWN/LEFT/RIGHT - //// if ($this.hasClass('masklesswipeup') || $this.hasClass('masklesswipedown') || $this.hasClass('masklesswipeleft') || $this.hasClass('masklesswiperight')) { $this.animate({'opacity':0},{duration:0,queue:false}); setTimeout(function() { if ($this.find('.masklesswipemode').length==0) { var actww=$this.outerWidth(); var acthh=$this.outerHeight(); var params={ color:$this.css('backgroundColor'), border:$this.css('border'), borderradiusmoz:$this.css('-moz-border-radius-topleft'), borderradiusweb:$this.css('-webkit-border-top-left-radius'), borderradius:$this.css('borderTopLeftRadius'), boxmoz:$this.css('-moz-box-shadow'), boxweb:$this.css('-webkit-box-shadow'), box:$this.css('box-shadow'), padtop:$this.css('paddingTop'), padleft:$this.css('paddingLeft') }; $this.data('params',params); $this.wrapInner('
'); $this.prepend('
'); $this.css({'background':'none'}); } var params = $this.data('params'); // STOP ANIMATION, AND RESTORE ORIGINAL POSITION $this.stop(true,true).find('.masklesswipemode-origin') $this.stop(true,true); $this.find('.masklesswipemode').stop(true,true); var distance=50; // REGISTER THE BG AND TEXT AT THE RIGHT POSITION (START POSITION) if ($this.hasClass('wipeup')) { $this.find('.masklesswipemode-origin').css({'top':(-1*distance)+"px",'left':params.padleft}); $this.find('.masklesswipemode').css({'top':(distance)+"px"}); } else { if ($this.hasClass('masklesswipedown')) { $this.find('.masklesswipemode-origin').css({'top':(distance)+"px",'left':params.padleft}); $this.find('.masklesswipemode').css({'top':(-1*distance)+"px"}); } else { if ($this.hasClass('masklesswipeleft')) { $this.find('.masklesswipemode-origin').css({'top':params.padtop,'left':(-1*distance)+"px"}); $this.find('.masklesswipemode').css({'left':(distance)+"px"}); } else { $this.find('.masklesswipemode-origin').css({'top':params.padtop,'left':(distance)+"px"}); $this.find('.masklesswipemode').css({'left':(-1*distance)+"px"}); } } } $this.animate({'opacity':'1.0'},{duration:800,queue:false}); $this.find('.masklesswipemode-origin').animate({'top':params.padtop, 'left':params.padleft},{duration:800,easing:'easeInExpo', queue:false}); $this.find('.masklesswipemode').animate({'top':'0px','left':'0px'},{duration:800,easing:'easeOutExpo', queue:false}); },(edelay + (counter+1)*350)); counter++; } }); // END OF TEXT ANIMS ON DIVS } })(jQuery);