249 lines
9.2 KiB
JavaScript
249 lines
9.2 KiB
JavaScript
|
/********************************************
|
||
|
|
* REVOLUTION 5.0+ EXTENSION - SLICED
|
||
|
|
* @version: 1.0 (15.02.2017)
|
||
|
|
* @requires jquery.themepunch.revolution.js
|
||
|
|
* @author ThemePunch
|
||
|
|
*********************************************/
|
||
|
|
|
||
|
|
(function($) {
|
||
|
|
|
||
|
|
var _R = jQuery.fn;
|
||
|
|
|
||
|
|
///////////////////////////////////////////
|
||
|
|
// EXTENDED FUNCTIONS AVAILABLE GLOBAL //
|
||
|
|
///////////////////////////////////////////
|
||
|
|
jQuery.extend(true,_R, {
|
||
|
|
|
||
|
|
revSliderSlicey: function() {
|
||
|
|
|
||
|
|
return this.each(function() {
|
||
|
|
jQuery(this).on('revolution.slide.onloaded',function() {
|
||
|
|
init(this.opt);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//////////////////////////////////////////
|
||
|
|
// - INITIALISATION OF WHITEBOARD - //
|
||
|
|
//////////////////////////////////////////
|
||
|
|
var init = function(opt) {
|
||
|
|
opt.slidecobjects = new Array();
|
||
|
|
|
||
|
|
// PREPARING THE LAYERS
|
||
|
|
opt.c.find('.tp-slicey').each(function(){
|
||
|
|
var sb = jQuery(this),
|
||
|
|
li = sb.closest('.tp-revslider-slidesli'),
|
||
|
|
di = li.find('.defaultimg').first().clone(),
|
||
|
|
shd = li.find('.slotholder').data(),
|
||
|
|
_ = sb.data();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
_.slicey_offset_start = 1;
|
||
|
|
_.slicey_offset_end = _.slicey_offset===undefined ? 1 : 1 + parseInt(_.slicey_offset, 10) * 0.01;
|
||
|
|
|
||
|
|
_.slicey_blurstart = _.slicey_blurstart===undefined || _.slicey_blurstart==="inherit" ? shd.blurstart : _.slicey_blurstart;
|
||
|
|
_.slicey_blurend = _.slicey_blurend===undefined || _.slicey_blurend==="inherit" ? shd.blurend : _.slicey_blurend;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
di.removeClass("tp-bgimg").removeClass("defaultimg").addClass("slicedbox_defmig");
|
||
|
|
|
||
|
|
var wp = jQuery('<div class="slicedbox_wrapper" data-slicey_offset_start="' +
|
||
|
|
_.slicey_offset_start+'" data-slicey_offset_end="'+_.slicey_offset_end+'" data-global_duration="' +
|
||
|
|
shd.duration/1000+'" data-global_ease="'+shd.ease+'" data-slicey_blurstart="'+_.slicey_blurstart+'" data-slicey_blurend="'+_.slicey_blurend+'" data-global_scalestart="' +
|
||
|
|
(shd.scalestart/100)+'" data-global_scaleend="' +
|
||
|
|
(shd.scaleend/100)+'" style="width:100%;height:100%;position:absolute;overflow:hidden;box-shadow:' +
|
||
|
|
li.data('slicey_shadow')+'"></div>');
|
||
|
|
|
||
|
|
|
||
|
|
wp.append(di);
|
||
|
|
sb.append(wp);
|
||
|
|
var tc = wp.closest('.tp-caption');
|
||
|
|
punchgs.TweenLite.set(tc,{background:"transparent", transformStyle:"flat", perspective:"1000px", force3D:"true", transformOrigin:"50% 50%"});
|
||
|
|
opt.slidecobjects.push({caption:tc,li_index:li.data('index')});
|
||
|
|
punchgs.TweenLite.set(di,{opacity:1});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
// UPDATE LAYER SIZES IF SLIDE CHANGE (NEED TO DO -> Only Layer Reset on Current Layers in Slide !!)
|
||
|
|
opt.c.on('revolution.slide.onafterswap',function(event,obj) {
|
||
|
|
var ind = obj.currentslide.data('index');
|
||
|
|
|
||
|
|
for (var i in opt.slidecobjects) {
|
||
|
|
var l = opt.slidecobjects[i].caption,
|
||
|
|
ls = l.data();
|
||
|
|
if (ind===opt.slidecobjects[i].li_index)
|
||
|
|
updateSlicedBox(l,ls,opt);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// ON LAYER ENTERSTAGE START ANIMATION ON LAYER
|
||
|
|
opt.c.on('revolution.layeraction',function(event,obj) {
|
||
|
|
if (obj.eventtype==="enterstage") {
|
||
|
|
updateSlicedBox(obj.layer,obj.layersettings,opt);
|
||
|
|
animateSlicedBox(obj.layer,obj.layersettings,0);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// RECALCULATE SIZE OF ELEMENTS ON RESIZE
|
||
|
|
jQuery(window).resize(function() {
|
||
|
|
clearTimeout(opt.sliced_resize_timer);
|
||
|
|
opt.sliced_resize_timer = setTimeout(function() {
|
||
|
|
for (var i in opt.slidecobjects) {
|
||
|
|
var l = opt.slidecobjects[i].caption,
|
||
|
|
ls = opt.slidecobjects[i].caption.data(),
|
||
|
|
ali = opt.c.find('.active-revslide');
|
||
|
|
|
||
|
|
if (ali.length===0 || ali.data('index')===opt.slidecobjects[i].li_index) {
|
||
|
|
updateSlicedBox(l,ls,opt);
|
||
|
|
animateSlicedBox(l,ls,"update");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},50)
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
// UPDATE THE SLICEBOX SIZES AND CONTENT
|
||
|
|
var updateSlicedBox = function(l,_,opt) {
|
||
|
|
_.slicedbox_wrapper = _.slicedbox_wrapper == undefined ? l.find('.slicedbox_wrapper') : _.slicedbox_wrapper;
|
||
|
|
if (_.slicedbox_wrapper.length>0) {
|
||
|
|
_.slicedbox_defmig = _.slicedbox_defmig == undefined ? l.find('.slicedbox_defmig') : _.slicedbox_defmig;
|
||
|
|
_.origin_offset = {
|
||
|
|
sx : (opt.conw/2 - _.calcx),
|
||
|
|
sy : (opt.conh/2 - _.calcy),
|
||
|
|
x : (opt.conw/2 - (_.calcx+(_.eow/2))),
|
||
|
|
y : (opt.conh/2 - (_.calcy+(_.eoh/2)))
|
||
|
|
}
|
||
|
|
punchgs.TweenLite.set(_.slicedbox_defmig,{opacity:1,left:(0-_.calcx)+"px" , top:(0-_.calcy)+"px", width:opt.conw, height:opt.conh, position:"absolute"});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ANIMATE, RESET PROGRESSED ANIMATION ON LAYER
|
||
|
|
var animateSlicedBox = function(l,ls,prog) {
|
||
|
|
if (ls.slicedbox_wrapper.length>0) {
|
||
|
|
var _ = ls.slicedbox_wrapper.data();
|
||
|
|
if (prog===undefined) prog=0;
|
||
|
|
if (prog==="update" && _.slicedanimation!==undefined) prog = _.slicedanimation.progress();
|
||
|
|
_.slicedanimation = new punchgs.TimelineLite();
|
||
|
|
_.scalestart = _.global_scalestart * _.slicey_offset_start;
|
||
|
|
_.scaleend = _.global_scaleend * _.slicey_offset_end;
|
||
|
|
|
||
|
|
/*_.x = {
|
||
|
|
start: ((ls.eow / (ls.eow * _.scalestart)) * ls.origin_offset.x) - ls.origin_offset.x , //(ls.origin_offset.x - (ls.origin_offset.x*_.scalestart))/2 ,
|
||
|
|
end: ((ls.eow / (ls.eow * _.scaleend)) * ls.origin_offset.x) - ls.origin_offset.x //(ls.origin_offset.x - (ls.origin_offset.x*_.scaleend))/2
|
||
|
|
};
|
||
|
|
|
||
|
|
_.y = {
|
||
|
|
start: ((ls.eoh / (ls.eoh * _.scalestart)) * ls.origin_offset.y) - ls.origin_offset.y , //(ls.origin_offset.y - (ls.origin_offset.y*_.scalestart))/2 ,
|
||
|
|
end: ((ls.eoh / (ls.eoh * _.scaleend)) * ls.origin_offset.y) - ls.origin_offset.y //(ls.origin_offset.y - (ls.origin_offset.y*_.scaleend))/2
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
_.slicedanimation.add(punchgs.TweenLite.fromTo(ls.slicedbox_wrapper,_.global_duration,
|
||
|
|
{ z:0,
|
||
|
|
x:_.x.start,
|
||
|
|
y:_.y.start,
|
||
|
|
transformOrigin:"50% 50%"
|
||
|
|
},
|
||
|
|
{ force3D:"auto",
|
||
|
|
x:_.x.end,
|
||
|
|
y:_.y.end,
|
||
|
|
z:(_.scaleend)*100,
|
||
|
|
ease:_.global_ease
|
||
|
|
}),0);
|
||
|
|
*/
|
||
|
|
_.slicedanimation.add(punchgs.TweenLite.fromTo(ls.slicedbox_wrapper,_.global_duration,
|
||
|
|
{transformOrigin:(ls.origin_offset.sx+"px "+ls.origin_offset.sy+"px"),scale:(_.global_scalestart*_.slicey_offset_start)},
|
||
|
|
{force3D:"auto", scale:(_.global_scaleend*_.slicey_offset_end),ease:_.global_ease}),0);
|
||
|
|
|
||
|
|
|
||
|
|
// ADD BLUR EFFECT ON THE ELEMENTS
|
||
|
|
if (_.slicey_blurstart!==undefined && _.slicey_blurend!==undefined && (_.slicey_blurstart!==0 || _.slicey_blurend!==0)) {
|
||
|
|
_.blurElement = {a:_.slicey_blurstart};
|
||
|
|
_.blurElementEnd = {a:_.slicey_blurend, ease:_.global_ease};
|
||
|
|
_.blurAnimation = new punchgs.TweenLite(_.blurElement, _.global_duration, _.blurElementEnd);
|
||
|
|
|
||
|
|
|
||
|
|
_.blurAnimation.eventCallback("onUpdate", function(_,ls) {
|
||
|
|
punchgs.TweenLite.set(ls.slicedbox_wrapper,{position:"absolute",msFilter:'blur('+_.blurElement.a+'px)',filter:'blur('+_.blurElement.a+'px)',webkitFilter:'blur('+_.blurElement.a+'px)'});
|
||
|
|
},[_,ls]);
|
||
|
|
_.slicedanimation.add(_.blurAnimation,0);
|
||
|
|
}
|
||
|
|
|
||
|
|
_.slicedanimation.progress(prog)
|
||
|
|
_.slicedanimation.play()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
})(jQuery);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var tpj=jQuery;
|
||
|
|
var revapi24;
|
||
|
|
tpj(document).ready(function() {
|
||
|
|
if(tpj("#rev_slider_24_1").revolution == undefined){
|
||
|
|
revslider_showDoubleJqueryError("#rev_slider_24_1");
|
||
|
|
}else{
|
||
|
|
revapi24 = tpj("#rev_slider_24_1").show().revolution({
|
||
|
|
sliderType:"standard",
|
||
|
|
jsFileLocation:"revolution/js/",
|
||
|
|
sliderLayout:"fullscreen",
|
||
|
|
dottedOverlay:"none",
|
||
|
|
delay:9000,
|
||
|
|
navigation: {
|
||
|
|
keyboardNavigation:"off",
|
||
|
|
keyboard_direction: "horizontal",
|
||
|
|
mouseScrollNavigation:"off",
|
||
|
|
mouseScrollReverse:"default",
|
||
|
|
onHoverStop:"off",
|
||
|
|
bullets: {
|
||
|
|
enable:true,
|
||
|
|
hide_onmobile:false,
|
||
|
|
style:"bullet-bar",
|
||
|
|
hide_onleave:false,
|
||
|
|
direction:"horizontal",
|
||
|
|
h_align:"center",
|
||
|
|
v_align:"bottom",
|
||
|
|
h_offset:0,
|
||
|
|
v_offset:50,
|
||
|
|
space:5,
|
||
|
|
tmp:''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
responsiveLevels:[1240,1024,778,480],
|
||
|
|
visibilityLevels:[1240,1024,778,480],
|
||
|
|
gridwidth:[1240,1024,778,480],
|
||
|
|
gridheight:[868,768,960,720],
|
||
|
|
lazyType:"none",
|
||
|
|
shadow:0,
|
||
|
|
spinner:"off",
|
||
|
|
stopLoop:"off",
|
||
|
|
stopAfterLoops:-1,
|
||
|
|
stopAtSlide:-1,
|
||
|
|
shuffle:"off",
|
||
|
|
autoHeight:"off",
|
||
|
|
fullScreenAutoWidth:"off",
|
||
|
|
fullScreenAlignForce:"off",
|
||
|
|
fullScreenOffsetContainer: "",
|
||
|
|
hideThumbsOnMobile:"off",
|
||
|
|
hideSliderAtLimit:0,
|
||
|
|
hideCaptionAtLimit:0,
|
||
|
|
hideAllCaptionAtLilmit:0,
|
||
|
|
debugMode:false,
|
||
|
|
fallbacks: {
|
||
|
|
simplifyAll:"off",
|
||
|
|
nextSlideOnWindowFocus:"off",
|
||
|
|
disableFocusListener:false,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if(revapi24) revapi24.revSliderSlicey();
|
||
|
|
}); /*ready*/
|