// Camera slideshow v1.4.0 - a jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready, based on jQuery 1.9.1+ // Copyright (c) 2012 by Manuel Masia - www.pixedelic.com // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php ;(function($){$.fn.camera = function(opts, callback) { var defaults = { alignment : 'center', //topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight autoAdvance : true, //true, false mobileAutoAdvance : true, //true, false. Auto-advancing for mobile devices barDirection : 'leftToRight', //'leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop' barPosition : 'bottom', //'bottom', 'left', 'top', 'right' cols : 6, easing : 'easeInOutExpo', //for the complete list http://jqueryui.com/demos/effect/easing.html mobileEasing : '', //leave empty if you want to display the same easing on mobile devices and on desktop etc. fx : 'random', //'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight' //you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom' mobileFx : '', //leave empty if you want to display the same effect on mobile devices and on desktop etc. gridDifference : 250, //to make the grid blocks slower than the slices, this value must be smaller than transPeriod height : '50%', //here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or 'auto' imagePath : 'images/', //he path to the image folder (it serves for the blank.gif, when you want to display videos) hover : true, //true, false. Puase on state hover. Not available for mobile devices loader : 'pie', //pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar) loaderColor : '#eeeeee', loaderBgColor : '#222222', loaderOpacity : .8, //0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1 loaderPadding : 2, //how many empty pixels you want to display between the loader and its background loaderStroke : 7, //the thickness both of the pie loader and of the bar loader. Remember: for the pie, the loader thickness must be less than a half of the pie diameter minHeight : '200px', //you can also leave it blank navigation : true, //true or false, to display or not the navigation buttons navigationHover : true, //if true the navigation button (prev, next and play/stop buttons) will be visible on hover state only, if false they will be visible always mobileNavHover : true, //same as above, but only for mobile devices opacityOnGrid : false, //true, false. Decide to apply a fade effect to blocks and slices: if your slideshow is fullscreen or simply big, I recommend to set it false to have a smoother effect overlayer : true, //a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer) pagination : true, playPause : true, //true or false, to display or not the play/pause buttons pauseOnClick : true, //true, false. It stops the slideshow when you click the sliders. pieDiameter : 38, piePosition : 'rightTop', //'rightTop', 'leftTop', 'leftBottom', 'rightBottom' portrait : false, //true, false. Select true if you don't want that your images are cropped rows : 4, slicedCols : 12, //if 0 the same value of cols slicedRows : 8, //if 0 the same value of rows slideOn : 'random', //next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide thumbnails : false, time : 7000, //milliseconds between the end of the sliding effect and the start of the nex one transPeriod : 1500, //lenght of the sliding effect in milliseconds ////////callbacks onEndTransition : function() { }, //this callback is invoked when the transition effect ends onLoaded : function() { }, //this callback is invoked when the image on a slide has completely loaded onStartLoading : function() { }, //this callback is invoked when the image on a slide start loading onStartTransition : function() { } //this callback is invoked when the transition effect starts }; function isMobile() { if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ){ return true; } } $.support.borderRadius = false; $.each(['borderRadius','BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() { if(document.body.style[this] !== undefined) $.support.borderRadius = true; }); var opts = $.extend({}, defaults, opts); var wrap = $(this).addClass('camera_wrap'); wrap.wrapInner( '
' ).wrapInner( '
' ); var fakeHover = $('.camera_fakehover',wrap); var fakeHoverSelector = ('.camera_fakehover',wrap); fakeHover.append( '
' ); if(opts.overlayer == true){ fakeHover.append( '
' ) } fakeHover.append( '
' ); var loader; if(opts.loader=='pie' && !$.support.borderRadius){ loader = 'bar'; } else { loader = opts.loader; } if(loader == 'pie'){ fakeHover.append( '
' ) } else if (loader == 'bar') { fakeHover.append( '
' ) } else { fakeHover.append( '' ) } if(opts.playPause==true){ fakeHover.append( '
' ) } if(opts.navigation==true){ fakeHover.append( '
' ).append( '
' ); } if(opts.thumbnails==true){ wrap.append( '
' ); } if(opts.thumbnails==true && opts.pagination!=true){ $('.camera_thumbs_cont',wrap).wrap( '
' ).wrap( '
' ).wrap( '
' ).wrap( '
' ); } if(opts.pagination==true){ wrap.append( '
' ); } wrap.append( '
' ); $('.camera_caption',wrap).each(function(){ $(this).wrapInner('
'); }); var pieID = 'pie_'+wrap.index(), elem = $('.camera_src',wrap), target = $('.camera_target',wrap), content = $('.camera_target_content',wrap), pieContainer = $('.camera_pie',wrap), barContainer = $('.camera_bar',wrap), prevNav = $('.camera_prev',wrap), nextNav = $('.camera_next',wrap), commands = $('.camera_commands',wrap), pagination = $('.camera_pag',wrap), thumbs = $('.camera_thumbs_cont',wrap); var w, h; var allImg = new Array(); $('> div', elem).each( function() { allImg.push($(this).attr('data-src')); }); var allLinks = new Array(); $('> div', elem).each( function() { if($(this).attr('data-link')){ allLinks.push($(this).attr('data-link')); } else { allLinks.push(''); } }); var allTargets = new Array(); $('> div', elem).each( function() { if($(this).attr('data-target')){ allTargets.push($(this).attr('data-target')); } else { allTargets.push(''); } }); var allPor = new Array(); $('> div', elem).each( function() { if($(this).attr('data-portrait')){ allPor.push($(this).attr('data-portrait')); } else { allPor.push(''); } }); var allAlign= new Array(); $('> div', elem).each( function() { if($(this).attr('data-alignment')){ allAlign.push($(this).attr('data-alignment')); } else { allAlign.push(''); } }); var allThumbs = new Array(); $('> div', elem).each( function() { if($(this).attr('data-thumb')){ allThumbs.push($(this).attr('data-thumb')); } else { allThumbs.push(''); } }); var amountSlide = allImg.length; $(content).append('
'); var loopMove; for (loopMove=0;loopMove'); if(allLinks[loopMove]!=''){ //only for Wordpress plugin var dataBox = $('> div ',elem).eq(loopMove).attr('data-box'); if(typeof dataBox !== 'undefined' && dataBox !== false && dataBox != '') { dataBox = 'data-box="'+$('> div ',elem).eq(loopMove).attr('data-box')+'"'; } else { dataBox = ''; } // $('.camera_target_content .cameraContent:eq('+loopMove+')',wrap).append(''); } } $('.camera_caption',wrap).each(function(){ var ind = $(this).parent().index(), cont = wrap.find('.cameraContent').eq(ind); $(this).appendTo(cont); }); target.append('
'); var cameraCont = $('.cameraCont',wrap); var loop; for (loop=0;loop'); var div = $('> div:eq('+loop+')',elem); target.find('.cameraSlide_'+loop).clone(div); } function thumbnailVisible() { var wTh = $(thumbs).width(); $('li', thumbs).removeClass('camera_visThumb'); $('li', thumbs).each(function(){ var pos = $(this).position(), ulW = $('ul', thumbs).outerWidth(), offUl = $('ul', thumbs).offset().left, offDiv = $('> div',thumbs).offset().left, ulLeft = offDiv-offUl; if(ulLeft>0){ $('.camera_prevThumbs',camera_thumbs_wrap).removeClass('hideNav'); } else { $('.camera_prevThumbs',camera_thumbs_wrap).addClass('hideNav'); } if((ulW-ulLeft)>wTh){ $('.camera_nextThumbs',camera_thumbs_wrap).removeClass('hideNav'); } else { $('.camera_nextThumbs',camera_thumbs_wrap).addClass('hideNav'); } var left = pos.left, right = pos.left+($(this).width()); if(right-ulLeft<=wTh && left-ulLeft>=0){ $(this).addClass('camera_visThumb'); } }); } $(window).bind('load resize pageshow',function(){ thumbnailPos(); thumbnailVisible(); }); cameraCont.append('
'); var started; wrap.show(); var w = target.width(); var h = target.height(); var setPause; $(window).bind('resize pageshow',function(){ if(started == true) { resizeImage(); } $('ul', thumbs).animate({'margin-top':0},0,thumbnailPos); if(!elem.hasClass('paused')){ elem.addClass('paused'); if($('.camera_stop',camera_thumbs_wrap).length){ $('.camera_stop',camera_thumbs_wrap).hide() $('.camera_play',camera_thumbs_wrap).show(); if(loader!='none'){ $('#'+pieID).hide(); } } else { if(loader!='none'){ $('#'+pieID).hide(); } } clearTimeout(setPause); setPause = setTimeout(function(){ elem.removeClass('paused'); if($('.camera_play',camera_thumbs_wrap).length){ $('.camera_play',camera_thumbs_wrap).hide(); $('.camera_stop',camera_thumbs_wrap).show(); if(loader!='none'){ $('#'+pieID).fadeIn(); } } else { if(loader!='none'){ $('#'+pieID).fadeIn(); } } },1500); } }); function resizeImage(){ var res; function resizeImageWork(){ w = wrap.width(); if(opts.height.indexOf('%')!=-1) { var startH = Math.round(w / (100/parseFloat(opts.height))); if(opts.minHeight != '' && startH < parseFloat(opts.minHeight)){ h = parseFloat(opts.minHeight); } else { h = startH; } wrap.css({height:h}); } else if (opts.height=='auto') { h = wrap.height(); } else { h = parseFloat(opts.height); wrap.css({height:h}); } $('.camerarelative',target).css({'width':w,'height':h}); $('.imgLoaded',target).each(function(){ var t = $(this), wT = t.attr('width'), hT = t.attr('height'), imgLoadIn = t.index(), mTop, mLeft, alignment = t.attr('data-alignment'), portrait = t.attr('data-portrait'); if(typeof alignment === 'undefined' || alignment === false || alignment === ''){ alignment = opts.alignment; } if(typeof portrait === 'undefined' || portrait === false || portrait === ''){ portrait = opts.portrait; } if(portrait==false||portrait=='false'){ if((wT/hT)<(w/h)) { var r = w / wT; var d = (Math.abs(h - (hT*r)))*0.5; switch(alignment){ case 'topLeft': mTop = 0; break; case 'topCenter': mTop = 0; break; case 'topRight': mTop = 0; break; case 'centerLeft': mTop = '-'+d+'px'; break; case 'center': mTop = '-'+d+'px'; break; case 'centerRight': mTop = '-'+d+'px'; break; case 'bottomLeft': mTop = '-'+d*2+'px'; break; case 'bottomCenter': mTop = '-'+d*2+'px'; break; case 'bottomRight': mTop = '-'+d*2+'px'; break; } t.css({ 'height' : hT*r, 'margin-left' : 0, 'margin-right' : 0, 'margin-top' : mTop, 'position' : 'absolute', 'visibility' : 'visible', 'width' : w }); } else { var r = h / hT; var d = (Math.abs(w - (wT*r)))*0.5; switch(alignment){ case 'topLeft': mLeft = 0; break; case 'topCenter': mLeft = '-'+d+'px'; break; case 'topRight': mLeft = '-'+d*2+'px'; break; case 'centerLeft': mLeft = 0; break; case 'center': mLeft = '-'+d+'px'; break; case 'centerRight': mLeft = '-'+d*2+'px'; break; case 'bottomLeft': mLeft = 0; break; case 'bottomCenter': mLeft = '-'+d+'px'; break; case 'bottomRight': mLeft = '-'+d*2+'px'; break; } t.css({ 'height' : h, 'margin-left' : mLeft, 'margin-right' : mLeft, 'margin-top' : 0, 'position' : 'absolute', 'visibility' : 'visible', 'width' : wT*r }); } } else { if((wT/hT)<(w/h)) { var r = h / hT; var d = (Math.abs(w - (wT*r)))*0.5; switch(alignment){ case 'topLeft': mLeft = 0; break; case 'topCenter': mLeft = d+'px'; break; case 'topRight': mLeft = d*2+'px'; break; case 'centerLeft': mLeft = 0; break; case 'center': mLeft = d+'px'; break; case 'centerRight': mLeft = d*2+'px'; break; case 'bottomLeft': mLeft = 0; break; case 'bottomCenter': mLeft = d+'px'; break; case 'bottomRight': mLeft = d*2+'px'; break; } t.css({ 'height' : h, 'margin-left' : mLeft, 'margin-right' : mLeft, 'margin-top' : 0, 'position' : 'absolute', 'visibility' : 'visible', 'width' : wT*r }); } else { var r = w / wT; var d = (Math.abs(h - (hT*r)))*0.5; switch(alignment){ case 'topLeft': mTop = 0; break; case 'topCenter': mTop = 0; break; case 'topRight': mTop = 0; break; case 'centerLeft': mTop = d+'px'; break; case 'center': mTop = d+'px'; break; case 'centerRight': mTop = d+'px'; break; case 'bottomLeft': mTop = d*2+'px'; break; case 'bottomCenter': mTop = d*2+'px'; break; case 'bottomRight': mTop = d*2+'px'; break; } t.css({ 'height' : hT*r, 'margin-left' : 0, 'margin-right' : 0, 'margin-top' : mTop, 'position' : 'absolute', 'visibility' : 'visible', 'width' : w }); } } }); } if (started == true) { clearTimeout(res); res = setTimeout(resizeImageWork,200); } else { resizeImageWork(); } started = true; } var u, setT; var clickEv, autoAdv, navHover, commands, pagination; var videoHover, videoPresent; if(isMobile() && opts.mobileAutoAdvance!=''){ autoAdv = opts.mobileAutoAdvance; } else { autoAdv = opts.autoAdvance; } if(autoAdv==false){ elem.addClass('paused'); } if(isMobile() && opts.mobileNavHover!=''){ navHover = opts.mobileNavHover; } else { navHover = opts.navigationHover; } if(elem.length!=0){ var selector = $('.cameraSlide',target); selector.wrapInner('
'); var navSlide; var barDirection = opts.barDirection; var camera_thumbs_wrap = wrap; $('iframe',fakeHover).each(function(){ var t = $(this); var src = t.attr('src'); t.attr('data-src',src); var divInd = t.parent().index('.camera_src > div'); $('.camera_target_content .cameraContent:eq('+divInd+')',wrap).append(t); }); function imgFake() { $('iframe',fakeHover).each(function(){ $('.camera_caption',fakeHover).show(); var t = $(this); var cloneSrc = t.attr('data-src'); t.attr('src',cloneSrc); var imgFakeUrl = opts.imagePath+'blank.gif'; var imgFake = new Image(); imgFake.src = imgFakeUrl; if(opts.height.indexOf('%')!=-1) { var startH = Math.round(w / (100/parseFloat(opts.height))); if(opts.minHeight != '' && startH < parseFloat(opts.minHeight)){ h = parseFloat(opts.minHeight); } else { h = startH; } } else if (opts.height=='auto') { h = wrap.height(); } else { h = parseFloat(opts.height); } t.after($(imgFake).attr({'class':'imgFake','width':w,'height':h})); var clone = t.clone(); t.remove(); $(imgFake).bind('click',function(){ if($(this).css('position')=='absolute') { $(this).remove(); if(cloneSrc.indexOf('vimeo') != -1 || cloneSrc.indexOf('youtube') != -1) { if(cloneSrc.indexOf('?') != -1){ autoplay = '&autoplay=1'; } else { autoplay = '?autoplay=1'; } } else if(cloneSrc.indexOf('dailymotion') != -1) { if(cloneSrc.indexOf('?') != -1){ autoplay = '&autoPlay=1'; } else { autoplay = '?autoPlay=1'; } } clone.attr('src',cloneSrc+autoplay); videoPresent = true; } else { $(this).css({position:'absolute',top:0,left:0,zIndex:10}).after(clone); clone.css({position:'absolute',top:0,left:0,zIndex:9}); } }); }); } imgFake(); if(opts.hover==true){ if(!isMobile()){ fakeHover.hover(function(){ elem.addClass('hovered'); },function(){ elem.removeClass('hovered'); }); } } if(navHover==true){ $(prevNav,wrap).animate({opacity:0},0); $(nextNav,wrap).animate({opacity:0},0); $(commands,wrap).animate({opacity:0},0); if(isMobile()){ $(document).on('vmouseover',fakeHoverSelector,function(){ $(prevNav,wrap).animate({opacity:1},200); $(nextNav,wrap).animate({opacity:1},200); $(commands,wrap).animate({opacity:1},200); }); $(document).on('vmouseout',fakeHoverSelector,function(){ $(prevNav,wrap).delay(500).animate({opacity:0},200); $(nextNav,wrap).delay(500).animate({opacity:0},200); $(commands,wrap).delay(500).animate({opacity:0},200); }); } else { fakeHover.hover(function(){ $(prevNav,wrap).animate({opacity:1},200); $(nextNav,wrap).animate({opacity:1},200); $(commands,wrap).animate({opacity:1},200); },function(){ $(prevNav,wrap).animate({opacity:0},200); $(nextNav,wrap).animate({opacity:0},200); $(commands,wrap).animate({opacity:0},200); }); } } camera_thumbs_wrap.on('click','.camera_stop',function(){ autoAdv = false; elem.addClass('paused'); if($('.camera_stop',camera_thumbs_wrap).length){ $('.camera_stop',camera_thumbs_wrap).hide() $('.camera_play',camera_thumbs_wrap).show(); if(loader!='none'){ $('#'+pieID).hide(); } } else { if(loader!='none'){ $('#'+pieID).hide(); } } }); camera_thumbs_wrap.on('click','.camera_play',function(){ autoAdv = true; elem.removeClass('paused'); if($('.camera_play',camera_thumbs_wrap).length){ $('.camera_play',camera_thumbs_wrap).hide(); $('.camera_stop',camera_thumbs_wrap).show(); if(loader!='none'){ $('#'+pieID).show(); } } else { if(loader!='none'){ $('#'+pieID).show(); } } }); if(opts.pauseOnClick==true){ $('.camera_target_content',fakeHover).mouseup(function(){ autoAdv = false; elem.addClass('paused'); $('.camera_stop',camera_thumbs_wrap).hide() $('.camera_play',camera_thumbs_wrap).show(); $('#'+pieID).hide(); }); } $('.cameraContent, .imgFake',fakeHover).hover(function(){ videoHover = true; },function(){ videoHover = false; }); $('.cameraContent, .imgFake',fakeHover).bind('click',function(){ if(videoPresent == true && videoHover == true) { autoAdv = false; $('.camera_caption',fakeHover).hide(); elem.addClass('paused'); $('.camera_stop',camera_thumbs_wrap).hide() $('.camera_play',camera_thumbs_wrap).show(); $('#'+pieID).hide(); } }); } function shuffle(arr) { for( var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x ); return arr; } function isInteger(s) { return Math.ceil(s) == Math.floor(s); } if (loader != 'pie') { barContainer.append(''); $('.camera_bar_cont',barContainer) .animate({opacity:opts.loaderOpacity},0) .css({'position':'absolute', 'left':0, 'right':0, 'top':0, 'bottom':0, 'background-color':opts.loaderBgColor}) .append(''); $('#'+pieID).animate({opacity:0},0); var canvas = $('#'+pieID); canvas.css({'position':'absolute', 'background-color':opts.loaderColor}); switch(opts.barPosition){ case 'left': barContainer.css({right:'auto',width:opts.loaderStroke}); break; case 'right': barContainer.css({left:'auto',width:opts.loaderStroke}); break; case 'top': barContainer.css({bottom:'auto',height:opts.loaderStroke}); break; case 'bottom': barContainer.css({top:'auto',height:opts.loaderStroke}); break; } switch(barDirection){ case 'leftToRight': canvas.css({'left':0, 'right':0, 'top':opts.loaderPadding, 'bottom':opts.loaderPadding}); break; case 'rightToLeft': canvas.css({'left':0, 'right':0, 'top':opts.loaderPadding, 'bottom':opts.loaderPadding}); break; case 'topToBottom': canvas.css({'left':opts.loaderPadding, 'right':opts.loaderPadding, 'top':0, 'bottom':0}); break; case 'bottomToTop': canvas.css({'left':opts.loaderPadding, 'right':opts.loaderPadding, 'top':0, 'bottom':0}); break; } } else { pieContainer.append(''); var G_vmlCanvasManager; var canvas = document.getElementById(pieID); canvas.setAttribute("width", opts.pieDiameter); canvas.setAttribute("height", opts.pieDiameter); var piePosition; switch(opts.piePosition){ case 'leftTop' : piePosition = 'left:0; top:0;'; break; case 'rightTop' : piePosition = 'right:0; top:0;'; break; case 'leftBottom' : piePosition = 'left:0; bottom:0;'; break; case 'rightBottom' : piePosition = 'right:0; bottom:0;'; break; } canvas.setAttribute("style", "position:absolute; z-index:1002; "+piePosition); var rad; var radNew; if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.rotate(Math.PI*(3/2)); ctx.translate(-opts.pieDiameter,0); } } if(loader=='none' || autoAdv==false) { $('#'+pieID).hide(); $('.camera_canvas_wrap',camera_thumbs_wrap).hide(); } if($(pagination).length) { $(pagination).append('
    '); var li; for (li = 0; li < amountSlide; li++){ $('.camera_pag_ul',wrap).append('
  • '+li+'
  • '); } $('.camera_pag_ul li',wrap).hover(function(){ $(this).addClass('camera_hover'); if($('.camera_thumb',this).length){ var wTh = $('.camera_thumb',this).outerWidth(), hTh = $('.camera_thumb',this).outerHeight(), wTt = $(this).outerWidth(); $('.camera_thumb',this).show().css({'top':'-'+hTh+'px','left':'-'+(wTh-wTt)/2+'px'}).animate({'opacity':1,'margin-top':'-3px'},200); $('.thumb_arrow',this).show().animate({'opacity':1,'margin-top':'-3px'},200); } },function(){ $(this).removeClass('camera_hover'); $('.camera_thumb',this).animate({'margin-top':'-20px','opacity':0},200,function(){ $(this).css({marginTop:'5px'}).hide(); }); $('.thumb_arrow',this).animate({'margin-top':'-20px','opacity':0},200,function(){ $(this).css({marginTop:'5px'}).hide(); }); }); } if($(thumbs).length) { var thumbUrl; if(!$(pagination).length) { $(thumbs).append('
    '); $(thumbs).before('
    ').before('
    '); $('> div',thumbs).append('
      '); $.each(allThumbs, function(i, val) { if($('> div', elem).eq(i).attr('data-thumb')!='') { var thumbUrl = $('> div', elem).eq(i).attr('data-thumb'), newImg = new Image(); newImg.src = thumbUrl; $('ul',thumbs).append('
    • '); $('li.pix_thumb_'+i,thumbs).append($(newImg).attr('class','camera_thumb')); } }); } else { $.each(allThumbs, function(i, val) { if($('> div', elem).eq(i).attr('data-thumb')!='') { var thumbUrl = $('> div', elem).eq(i).attr('data-thumb'), newImg = new Image(); newImg.src = thumbUrl; $('li.pag_nav_'+i,pagination).append($(newImg).attr('class','camera_thumb').css({'position':'absolute'}).animate({opacity:0},0)); $('li.pag_nav_'+i+' > img',pagination).after('
      '); $('li.pag_nav_'+i+' > .thumb_arrow',pagination).animate({opacity:0},0); } }); wrap.css({marginBottom:$(pagination).outerHeight()}); } } else if(!$(thumbs).length && $(pagination).length) { wrap.css({marginBottom:$(pagination).outerHeight()}); } var firstPos = true; function thumbnailPos() { if($(thumbs).length && !$(pagination).length) { var wTh = $(thumbs).outerWidth(), owTh = $('ul > li',thumbs).outerWidth(), pos = $('li.cameracurrent', thumbs).length ? $('li.cameracurrent', thumbs).position() : '', ulW = ($('ul > li', thumbs).length * $('ul > li', thumbs).outerWidth()), offUl = $('ul', thumbs).offset().left, offDiv = $('> div', thumbs).offset().left, ulLeft; if(offUl<0){ ulLeft = '-'+ (offDiv-offUl); } else { ulLeft = offDiv-offUl; } if(firstPos == true) { $('ul', thumbs).width($('ul > li', thumbs).length * $('ul > li', thumbs).outerWidth()); if($(thumbs).length && !$(pagination).lenght) { wrap.css({marginBottom:$(thumbs).outerHeight()}); } thumbnailVisible(); /*I repeat this two lines because of a problem with iPhones*/ $('ul', thumbs).width($('ul > li', thumbs).length * $('ul > li', thumbs).outerWidth()); if($(thumbs).length && !$(pagination).lenght) { wrap.css({marginBottom:$(thumbs).outerHeight()}); } /*...*/ } firstPos = false; var left = $('li.cameracurrent', thumbs).length ? pos.left : '', right = $('li.cameracurrent', thumbs).length ? pos.left+($('li.cameracurrent', thumbs).outerWidth()) : ''; if(left<$('li.cameracurrent', thumbs).outerWidth()) { left = 0; } if(right-ulLeft>wTh){ if((left+wTh)
      ').append('
      '); if(autoAdv==true){ $('.camera_play',camera_thumbs_wrap).hide(); $('.camera_stop',camera_thumbs_wrap).show(); } else { $('.camera_stop',camera_thumbs_wrap).hide(); $('.camera_play',camera_thumbs_wrap).show(); } } function canvasLoader() { rad = 0; var barWidth = $('.camera_bar_cont',camera_thumbs_wrap).width(), barHeight = $('.camera_bar_cont',camera_thumbs_wrap).height(); if (loader != 'pie') { switch(barDirection){ case 'leftToRight': $('#'+pieID).css({'right':barWidth}); break; case 'rightToLeft': $('#'+pieID).css({'left':barWidth}); break; case 'topToBottom': $('#'+pieID).css({'bottom':barHeight}); break; case 'bottomToTop': $('#'+pieID).css({'top':barHeight}); break; } } else { ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); } } canvasLoader(); $('.moveFromLeft, .moveFromRight, .moveFromTop, .moveFromBottom, .fadeIn, .fadeFromLeft, .fadeFromRight, .fadeFromTop, .fadeFromBottom',fakeHover).each(function(){ $(this).css('visibility','hidden'); }); opts.onStartLoading.call(this); nextSlide(); /*************************** FUNCTION nextSlide() ***************************/ function nextSlide(navSlide){ elem.addClass('camerasliding'); videoPresent = false; var vis = parseFloat($('div.cameraSlide.cameracurrent',target).index()); if(navSlide>0){ var slideI = navSlide-1; } else if (vis == amountSlide-1) { var slideI = 0; } else { var slideI = vis+1; } var slide = $('.cameraSlide:eq('+slideI+')',target); var slideNext = $('.cameraSlide:eq('+(slideI+1)+')',target).addClass('cameranext'); if( vis != slideI+1 ) { slideNext.hide(); } $('.cameraContent',fakeHover).fadeOut(600); $('.camera_caption',fakeHover).show(); $('.camerarelative',slide).append($('> div ',elem).eq(slideI).find('> div.camera_effected')); $('.camera_target_content .cameraContent:eq('+slideI+')',wrap).append($('> div ',elem).eq(slideI).find('> div')); if(!$('.imgLoaded',slide).length){ var imgUrl = allImg[slideI]; var imgLoaded = new Image(); imgLoaded.src = imgUrl +"?"+ new Date().getTime(); slide.css('visibility','hidden'); slide.prepend($(imgLoaded).attr('class','imgLoaded').css('visibility','hidden')); var wT, hT; if (!$(imgLoaded).get(0).complete || wT == '0' || hT == '0' || typeof wT === 'undefined' || wT === false || typeof hT === 'undefined' || hT === false) { $('.camera_loader',wrap).delay(500).fadeIn(400); imgLoaded.onload = function() { wT = imgLoaded.naturalWidth; hT = imgLoaded.naturalHeight; $(imgLoaded).attr('data-alignment',allAlign[slideI]).attr('data-portrait',allPor[slideI]); $(imgLoaded).attr('width',wT); $(imgLoaded).attr('height',hT); target.find('.cameraSlide_'+slideI).hide().css('visibility','visible'); resizeImage(); nextSlide(slideI+1); }; } } else { if( allImg.length > (slideI+1) && !$('.imgLoaded',slideNext).length ){ var imgUrl2 = allImg[(slideI+1)]; var imgLoaded2 = new Image(); imgLoaded2.src = imgUrl2 +"?"+ new Date().getTime(); slideNext.prepend($(imgLoaded2).attr('class','imgLoaded').css('visibility','hidden')); imgLoaded2.onload = function() { wT = imgLoaded2.naturalWidth; hT = imgLoaded2.naturalHeight; $(imgLoaded2).attr('data-alignment',allAlign[slideI+1]).attr('data-portrait',allPor[slideI+1]); $(imgLoaded2).attr('width',wT); $(imgLoaded2).attr('height',hT); resizeImage(); }; } opts.onLoaded.call(this); if($('.camera_loader',wrap).is(':visible')){ $('.camera_loader',wrap).fadeOut(400); } else { $('.camera_loader',wrap).css({'visibility':'hidden'}); $('.camera_loader',wrap).fadeOut(400,function(){ $('.camera_loader',wrap).css({'visibility':'visible'}); }); } var rows = opts.rows, cols = opts.cols, couples = 1, difference = 0, dataSlideOn, time, transPeriod, fx, easing, randomFx = new Array('simpleFade','curtainTopLeft','curtainTopRight','curtainBottomLeft','curtainBottomRight','curtainSliceLeft','curtainSliceRight','blindCurtainTopLeft','blindCurtainTopRight','blindCurtainBottomLeft','blindCurtainBottomRight','blindCurtainSliceBottom','blindCurtainSliceTop','stampede','mosaic','mosaicReverse','mosaicRandom','mosaicSpiral','mosaicSpiralReverse','topLeftBottomRight','bottomRightTopLeft','bottomLeftTopRight','topRightBottomLeft','scrollLeft','scrollRight','scrollTop','scrollBottom','scrollHorz'); marginLeft = 0, marginTop = 0, opacityOnGrid = 0; if(opts.opacityOnGrid==true){ opacityOnGrid = 0; } else { opacityOnGrid = 1; } var dataFx = $(' > div',elem).eq(slideI).attr('data-fx'); if(isMobile()&&opts.mobileFx!=''&&opts.mobileFx!='default'){ fx = opts.mobileFx; } else { if(typeof dataFx !== 'undefined' && dataFx!== false && dataFx!== 'default'){ fx = dataFx; } else { fx = opts.fx; } } if(fx=='random') { fx = shuffle(randomFx); fx = fx[0]; } else { fx = fx; if(fx.indexOf(',')>0){ fx = fx.replace(/ /g,''); fx = fx.split(','); fx = shuffle(fx); fx = fx[0]; } } dataEasing = $(' > div',elem).eq(slideI).attr('data-easing'); mobileEasing = $(' > div',elem).eq(slideI).attr('data-mobileEasing'); if(isMobile()&&opts.mobileEasing!=''&&opts.mobileEasing!='default'){ if(typeof mobileEasing !== 'undefined' && mobileEasing!== false && mobileEasing!== 'default') { easing = mobileEasing; } else { easing = opts.mobileEasing; } } else { if(typeof dataEasing !== 'undefined' && dataEasing!== false && dataEasing!== 'default') { easing = dataEasing; } else { easing = opts.easing; } } dataSlideOn = $(' > div',elem).eq(slideI).attr('data-slideOn'); if(typeof dataSlideOn !== 'undefined' && dataSlideOn!== false){ slideOn = dataSlideOn; } else { if(opts.slideOn=='random'){ var slideOn = new Array('next','prev'); slideOn = shuffle(slideOn); slideOn = slideOn[0]; } else { slideOn = opts.slideOn; } } var dataTime = $(' > div',elem).eq(slideI).attr('data-time'); if(typeof dataTime !== 'undefined' && dataTime!== false && dataTime!== ''){ time = parseFloat(dataTime); } else { time = opts.time; } var dataTransPeriod = $(' > div',elem).eq(slideI).attr('data-transPeriod'); if(typeof dataTransPeriod !== 'undefined' && dataTransPeriod!== false && dataTransPeriod!== ''){ transPeriod = parseFloat(dataTransPeriod); } else { transPeriod = opts.transPeriod; } if(!$(elem).hasClass('camerastarted')){ fx = 'simpleFade'; slideOn = 'next'; easing = ''; transPeriod = 400; $(elem).addClass('camerastarted') } switch(fx){ case 'simpleFade': cols = 1; rows = 1; break; case 'curtainTopLeft': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainTopRight': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainBottomLeft': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainBottomRight': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainSliceLeft': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainSliceRight': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'blindCurtainTopLeft': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainTopRight': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainBottomLeft': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainBottomRight': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainSliceTop': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainSliceBottom': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'stampede': difference = '-'+transPeriod; break; case 'mosaic': difference = opts.gridDifference; break; case 'mosaicReverse': difference = opts.gridDifference; break; case 'mosaicRandom': break; case 'mosaicSpiral': difference = opts.gridDifference; couples = 1.7; break; case 'mosaicSpiralReverse': difference = opts.gridDifference; couples = 1.7; break; case 'topLeftBottomRight': difference = opts.gridDifference; couples = 6; break; case 'bottomRightTopLeft': difference = opts.gridDifference; couples = 6; break; case 'bottomLeftTopRight': difference = opts.gridDifference; couples = 6; break; case 'topRightBottomLeft': difference = opts.gridDifference; couples = 6; break; case 'scrollLeft': cols = 1; rows = 1; break; case 'scrollRight': cols = 1; rows = 1; break; case 'scrollTop': cols = 1; rows = 1; break; case 'scrollBottom': cols = 1; rows = 1; break; case 'scrollHorz': cols = 1; rows = 1; break; } var cycle = 0; var blocks = rows*cols; var leftScrap = w-(Math.floor(w/cols)*cols); var topScrap = h-(Math.floor(h/rows)*rows); var addLeft; var addTop; var tAppW = 0; var tAppH = 0; var arr = new Array(); var delay = new Array(); var order = new Array(); while(cycle < blocks){ arr.push(cycle); delay.push(cycle); cameraCont.append('