david
3482b736e4
git-svn-id: https://192.168.0.254/svn/Proyectos.EstudioJuridicoAlmagro_Web/trunk@3 c22fe52d-42d7-ba4f-95f7-33effcf65713
803 lines
21 KiB
JavaScript
803 lines
21 KiB
JavaScript
////////////////////////////////////////////////////////////////////////////////
|
|
// //
|
|
// Grid-based Effects //
|
|
// //
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
(function ($, undefined) {
|
|
|
|
function getGrid(cfg) {
|
|
var root = cfg.slider.view;
|
|
var gridLayer = $(".wpv-fx-grid", root);
|
|
|
|
if (!gridLayer.length) {
|
|
gridLayer = $('<div class="wpv-fx-grid" />').css({
|
|
width: "100%",
|
|
height: "100%",
|
|
position: "absolute",
|
|
zIndex: 30
|
|
})
|
|
.bind("click", function(e) {
|
|
cfg.slider.getCurrentSlide().trigger(e);
|
|
})
|
|
.appendTo(root);
|
|
} else {
|
|
gridLayer.unbind().empty();
|
|
}
|
|
|
|
var facetWidth = Math.ceil($(root).width() / cfg.cols);
|
|
var facetHeight = Math.ceil($(root).height() / cfg.rows);
|
|
var i = 0;
|
|
for (var row = 0; row < cfg.rows; row++) {
|
|
for (var col = 0; col < cfg.cols; col++) {
|
|
var facet = $('<div class="wpv-fx-grid-facet" />').css({
|
|
width: facetWidth,
|
|
height: facetHeight,
|
|
left: col * facetWidth,
|
|
top: row * facetHeight,
|
|
position: "absolute",
|
|
overflow: "hidden",
|
|
zIndex: 30
|
|
}).appendTo(gridLayer);
|
|
|
|
facet[0].row = row;
|
|
facet[0].col = col;
|
|
facet[0].facetWidth = facetWidth;
|
|
facet[0].facetHeight = facetHeight;
|
|
facet[0].rows = cfg.rows;
|
|
facet[0].cols = cfg.cols;
|
|
facet[0].index = i++;
|
|
}
|
|
}
|
|
|
|
if (cfg.toShow) {
|
|
cfg.toShow.unbind("fxStop").bind("fxStop", function () {
|
|
gridLayer.find("wpv-fx-grid-facet").andSelf().stop(1, 1);
|
|
});
|
|
}
|
|
|
|
if (cfg.visibleGrid) {
|
|
var gridMask = $(".wpv-fx-grid-mask", root);
|
|
if (!gridMask.length) {
|
|
gridMask = gridLayer.clone().attr("class", "wpv-fx-grid-mask").css({
|
|
position: "absolute",
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
height: "100%",
|
|
zIndex: 31
|
|
})
|
|
.bind("click", function(e) {
|
|
cfg.slider.getCurrentSlide().trigger(e);
|
|
})
|
|
.appendTo(root);
|
|
} else {
|
|
$(".wpv-fx-grid-mask", root).fadeIn(600);
|
|
}
|
|
}
|
|
|
|
return gridLayer;
|
|
}
|
|
|
|
function toNum(x, defaultValue) {
|
|
x = parseFloat(x);
|
|
if (isNaN(x)) {
|
|
return defaultValue || 0;
|
|
}
|
|
return x;
|
|
}
|
|
|
|
function parseCssPrefs(css, slice) {
|
|
var newCss = {};
|
|
|
|
function parse(x) {
|
|
return eval(x.replace(/@(.+?)\b/g, function (a, b) {
|
|
return slice[b];
|
|
}));
|
|
}
|
|
|
|
for (var x in css) {
|
|
if ($.isArray(css[x]) && typeof css[x][0] == "string") {
|
|
newCss[x] = [parse(css[x][0]), css[x][1]];
|
|
} else if (String(css[x]).indexOf("@") != -1) {
|
|
newCss[x] = parse(css[x]);
|
|
} else {
|
|
newCss[x] = css[x];
|
|
}
|
|
}
|
|
return newCss;
|
|
}
|
|
|
|
function wave(grid, cfg, callback) {
|
|
var cnt = cfg.cols * cfg.rows;
|
|
var waveDuration = Math.max(cfg.waveDuration, cnt);
|
|
var subDelay = Math.floor(waveDuration / cnt);
|
|
var done = 0;
|
|
var img = cfg.toShow.show().find("> img");
|
|
|
|
cfg.toShow.show();
|
|
//var top = (toNum(img.css("top")) + toNum(img.css("marginTop"))) - toNum(img.css("marginBottom"));
|
|
//var left = (toNum(img.css("left")) + toNum(img.css("marginLeft"))) - toNum(img.css("marginRight"));
|
|
var top = Math[$.browser.webkit ? "floor" : "round"]((cfg.toShow.parent().height() - $(img).height())/2);
|
|
var left = Math[$.browser.webkit ? "floor" : "round"]((cfg.toShow.parent().width () - $(img).width ())/2);
|
|
cfg.toShow.hide();
|
|
|
|
var facetImage = $('<img src="' + img[0].src + '" />').css({
|
|
width: img[0].style.width,
|
|
height: img[0].style.height
|
|
});
|
|
|
|
var _grid = sortGrid(grid, cfg.waveType);
|
|
|
|
$.each(_grid, function (i, o) {
|
|
var cssFrom = parseCssPrefs(cfg.cssFrom, o);
|
|
var cssTo = parseCssPrefs(cfg.cssTo, o);
|
|
var facet = $(o);
|
|
|
|
facetImage.clone().css({
|
|
marginLeft: left + (o.facetWidth * o.col * -1),
|
|
marginTop: top + (o.facetHeight * o.row * -1)
|
|
}).appendTo(o);
|
|
|
|
facet.stop(1, 0).delay(Math.ceil(subDelay * i)).css(cssFrom).animate(cssTo, cfg.subslideDuration, cfg.easing, function () {
|
|
facet.css("filter", "none");
|
|
cssFrom = cssTo = facet = null;
|
|
if (++done >= cnt) {
|
|
callback();
|
|
}
|
|
});
|
|
});
|
|
|
|
img = facetImage = null;
|
|
}
|
|
|
|
function initGridFx(slider) {
|
|
getGrid($.extend({
|
|
rows: 3,
|
|
cols: 6,
|
|
slider: slider,
|
|
visibleGrid: true
|
|
}, slider.options.effect_settings));
|
|
}
|
|
|
|
function runGridFx(cfg) {
|
|
if (cfg.toShow.data("Slide").type == "image") {
|
|
var _cfg = $.extend(true, {
|
|
rows: 3,
|
|
cols: 6,
|
|
subslideDuration: 300,
|
|
subslideTransition: "fade",
|
|
waveDuration: 900,
|
|
waveType: "natural",
|
|
easing: "easeOutQuint",
|
|
cssFrom: {},
|
|
cssTo: {},
|
|
visibleGrid: false
|
|
}, cfg);
|
|
|
|
var grid = getGrid(_cfg);
|
|
|
|
var w1 = cfg.toHide ? $("> .wpv-slide", cfg.toHide).width() : 0;
|
|
var h1 = cfg.toHide ? $("> .wpv-slide", cfg.toHide).height() : 0;
|
|
var w2 = $("> .wpv-slide", cfg.toShow).width();
|
|
var h2 = $("> .wpv-slide", cfg.toShow).height();
|
|
|
|
wave(grid, _cfg, function () {
|
|
_cfg.toHide.hide();
|
|
_cfg.toShow.show();
|
|
grid.remove();
|
|
_cfg.callback();
|
|
_cfg = grid = null;
|
|
});
|
|
}
|
|
|
|
/*
|
|
* Grid-based effects does not support content other than images thus we
|
|
* need to create a pseudo-fx for this cases
|
|
* (img to html and html to html transitions)
|
|
*/
|
|
else {
|
|
$(".wpv-fx-grid-mask", cfg.slider.view).fadeOut();
|
|
$.WPVSlider.fx.fade.run(cfg);
|
|
}
|
|
}
|
|
|
|
function sortGrid(grid, sorter) {
|
|
var slices = $(".wpv-fx-grid-facet", grid).get();
|
|
if (sorter && sorter != "natural") {
|
|
slices.sort(_sorters[sorter]);
|
|
}
|
|
return slices;
|
|
}
|
|
|
|
// Grid sorting functions ----------------------------------------------------
|
|
var _sorters = {
|
|
R2L: function (a, b) { // right to left
|
|
return a.col === b.col ? _sorters.T2B(a, b) : a.col < b.col ? 1 : -1;
|
|
},
|
|
R2L_SNAKE: function (a, b) { // right to left - snake
|
|
return a.col === b.col ? _sorters[a.col % 2 == 0 ? "B2T" : "T2B"](a, b) : a.col < b.col ? 1 : -1;
|
|
},
|
|
L2R: function (a, b) { // left to right
|
|
return a.col === b.col ? _sorters.T2B(a, b) : a.col < b.col ? -1 : 1;
|
|
},
|
|
L2R_SNAKE: function (a, b) { // left to right - snake
|
|
return a.col === b.col ? _sorters[a.col % 2 == 0 ? "T2B" : "B2T"](a, b) : a.col < b.col ? -1 : 1;
|
|
},
|
|
B2T: function (a, b) { // bottom to top
|
|
return a.row === b.row ? _sorters.L2R(a, b) : a.row < b.row ? 1 : -1;
|
|
},
|
|
B2T_SNAKE: function (a, b) { // bottom to top - snake
|
|
return a.row === b.row ? _sorters[a.row % 2 == 0 ? "L2R" : "R2L"](a, b) : a.row < b.row ? 1 : -1;
|
|
},
|
|
T2B: function (a, b) { // top to bottom
|
|
return a.row === b.row ? _sorters.L2R(a, b) : a.row < b.row ? -1 : 1;
|
|
},
|
|
T2B_SNAKE: function (a, b) { // top to bottom - snake
|
|
return a.row === b.row ? _sorters[a.row % 2 == 0 ? "L2R" : "R2L"](a, b) : a.row < b.row ? -1 : 1;
|
|
},
|
|
BR2TL: function (a, b) { // bottom/right to top/left
|
|
var x = a.col + a.row;
|
|
var y = b.col + b.row;
|
|
return x === y ? _sorters.B2T(a, b) : x < y ? 1 : -1;
|
|
},
|
|
TL2BR: function (a, b) { // top/left to bottom/right
|
|
var x = a.col + a.row;
|
|
var y = b.col + b.row;
|
|
return x === y ? _sorters.T2B(a, b) : x < y ? -1 : 1;
|
|
},
|
|
TR2BL: function (a, b) { // top/right to bottom/left
|
|
var x = a.col - a.row;
|
|
var y = b.col - b.row;
|
|
return x === y ? _sorters.T2B(a, b) : x < y ? 1 : -1;
|
|
},
|
|
BL2TR: function (a, b) { // bottom/left to top/right
|
|
var x = a.col - a.row;
|
|
var y = b.col - b.row;
|
|
return x === y ? _sorters.B2T(a, b) : x < y ? -1 : 1;
|
|
},
|
|
RAND: function (a, b) { // random
|
|
var x = Math.random();
|
|
return x == 0.5 ? 0 : x < 0.5 ? -1 : 1;
|
|
//return _sorters[["R2L", "L2R", "B2T", "T2B", "BR2TL", "TL2BR", "TR2BL", "BL2TR"][Math.floor(Math.random() * 8)]].call(null, a, b);
|
|
}
|
|
}
|
|
|
|
$.WPVSlider.fx.gridFadeQueue = {
|
|
init: initGridFx,
|
|
changeCaptions: $.WPVSlider.captionFx.toggle,
|
|
/* Here cfg contains:
|
|
slider
|
|
toShow
|
|
toHide
|
|
dir
|
|
callback
|
|
duration
|
|
easing
|
|
*/
|
|
run: function (cfg) {
|
|
|
|
runGridFx(
|
|
$.extend({
|
|
easing: "linear",
|
|
waveDuration: 600,
|
|
subslideDuration: 600,
|
|
cssFrom: {
|
|
opacity: 0
|
|
},
|
|
cssTo: {
|
|
opacity: 1
|
|
},
|
|
visibleGrid: true
|
|
}, cfg, cfg.slider.options.effect_settings));
|
|
}
|
|
};
|
|
|
|
$.WPVSlider.fx.gridFadeSlideQueue = {
|
|
init: initGridFx,
|
|
changeCaptions: $.WPVSlider.captionFx.toggle,
|
|
run: function (cfg) {
|
|
runGridFx(
|
|
$.extend({
|
|
easing: "linear",
|
|
waveDuration: 600,
|
|
subslideDuration: 600,
|
|
cssFrom: {
|
|
opacity: 0,
|
|
width : 0
|
|
},
|
|
cssTo: {
|
|
opacity: 1,
|
|
width : "@facetWidth"
|
|
},
|
|
visibleGrid: true
|
|
}, cfg, cfg.slider.options.effect_settings));
|
|
}
|
|
};
|
|
|
|
$.WPVSlider.fx.gridWaveBL2TR = {
|
|
init: initGridFx,
|
|
changeCaptions: $.WPVSlider.captionFx.toggle,
|
|
run: function (cfg) {
|
|
runGridFx(
|
|
$.extend({
|
|
easing: "linear",
|
|
waveType: "BL2TR",
|
|
waveDuration: 200,
|
|
subslideDuration: 300,
|
|
visibleGrid: true,
|
|
rows: 3,
|
|
cols: 6,
|
|
cssFrom: {
|
|
opacity: 0,
|
|
marginTop: "@facetHeight",
|
|
marginLeft: "-@facetWidth"
|
|
},
|
|
cssTo: {
|
|
opacity: [1, "easeInSine"],
|
|
marginTop: 0,
|
|
marginLeft: 0
|
|
}
|
|
}, cfg, cfg.slider.options.effect_settings));
|
|
}
|
|
};
|
|
|
|
$.WPVSlider.fx.gridRandomSlideDown = {
|
|
init: initGridFx,
|
|
changeCaptions: $.WPVSlider.captionFx.toggle,
|
|
run: function (cfg) {
|
|
runGridFx(
|
|
$.extend({
|
|
waveType: "RAND",
|
|
rows: 3,
|
|
cols: 6,
|
|
waveDuration: 600,
|
|
subslideDuration: 600,
|
|
visibleGrid: true,
|
|
easing: "easeOutExpo",
|
|
cssFrom: {
|
|
height: 0,
|
|
marginTop: "-@facetHeight",
|
|
opacity: 0
|
|
},
|
|
cssTo: {
|
|
opacity: 1,
|
|
height: "@facetHeight",
|
|
marginTop: 0
|
|
}
|
|
}, cfg, cfg.slider.options.effect_settings));
|
|
}
|
|
};
|
|
|
|
// effects with subcaptions
|
|
|
|
function getSubcaptionSpeed(subcaption, cfg) {
|
|
var x = parseInt($(subcaption).attr("data-animation-duration"), 10);
|
|
if (isNaN(x) || x < 0) {
|
|
x = cfg.speed;
|
|
}
|
|
return x;
|
|
}
|
|
|
|
// NOTE that the per-subcaption delay is added to the global one!
|
|
|
|
function getSubcaptionDelay(subcaption, cfg) {
|
|
var x = parseInt($(subcaption).attr("data-animation-delay"), 10);
|
|
if (isNaN(x) || x < 0) {
|
|
x = 0;
|
|
}
|
|
return x;
|
|
}
|
|
|
|
function getSubcaptionEasing(subcaption, cfg) {
|
|
return $(subcaption).attr("data-animation-easing") || cfg.slider.options.effect_settings.easing || "easeInOutCirc";
|
|
}
|
|
|
|
$.WPVSlider.fx.slideMultipleCaptions = {
|
|
|
|
// Use the built-in slide transition for main animations
|
|
run: function () {
|
|
return $.WPVSlider.fx.slide.run.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* cfg contains:
|
|
* - oldCaption {jQuery}
|
|
* - newCaption {jQuery}
|
|
* - slider (The instance)
|
|
* - slideToShow {Slide}
|
|
* - slideToHide {Slide}
|
|
*/
|
|
changeCaptions: function (cfg, callback) {
|
|
|
|
// Go deeper in the captions to look for subcaptions to animate
|
|
var oldSubCaptions = cfg.oldCaption.find(".sub-caption");
|
|
var newSubCaptions = cfg.newCaption.find(".sub-caption");
|
|
|
|
if (!oldSubCaptions.length) {
|
|
oldSubCaptions = cfg.oldCaption;
|
|
}
|
|
|
|
if (!newSubCaptions.length) {
|
|
newSubCaptions = cfg.newCaption;
|
|
}
|
|
|
|
$(newSubCaptions).removeClass("visible");
|
|
|
|
var hideFunctions = [];
|
|
oldSubCaptions.each(function (i, o) {
|
|
var speed = getSubcaptionSpeed(o, cfg);
|
|
var easing = getSubcaptionEasing(o, cfg);
|
|
var delay = getSubcaptionDelay(o, cfg);
|
|
if (!cfg.slider.options.effect_settings.caption_queue) {
|
|
hideFunctions.push(function (next) {
|
|
$(o).delay(delay).removeClass("visible", speed, easing);
|
|
next();
|
|
});
|
|
} else {
|
|
hideFunctions.push(function (next) {
|
|
$(o).delay(delay).removeClass("visible", speed, easing, next);
|
|
});
|
|
}
|
|
});
|
|
|
|
hideFunctions.push(function (next) {
|
|
if (cfg.newCaption.length) {
|
|
cfg.newCaption.animate({
|
|
opacity: "show"
|
|
}, 500, "linear");
|
|
}
|
|
next();
|
|
});
|
|
|
|
var showFunctions = [];
|
|
newSubCaptions.each(function (i, o) {
|
|
var speed = getSubcaptionSpeed(o, cfg);
|
|
var easing = getSubcaptionEasing(o, cfg);
|
|
var delay = getSubcaptionDelay(o, cfg);
|
|
if (!cfg.slider.options.effect_settings.caption_queue) {
|
|
showFunctions.push(function (next) {
|
|
$(o).delay(delay).addClass("visible", speed, easing);
|
|
next();
|
|
});
|
|
} else {
|
|
showFunctions.push(function (next) {
|
|
$(o).delay(delay).addClass("visible", speed, easing, next);
|
|
});
|
|
}
|
|
});
|
|
|
|
showFunctions.push(function (next) {
|
|
if (cfg.oldCaption.length) {
|
|
cfg.oldCaption.animate({
|
|
opacity: "hide"
|
|
}, 300, "linear", next);
|
|
} else {
|
|
next();
|
|
}
|
|
});
|
|
|
|
$.WPVSlider.createCaptionFx(
|
|
cfg, hideFunctions, showFunctions, callback || $.noop)();
|
|
}
|
|
};
|
|
|
|
// zoom effects
|
|
$.WPVSlider.fx.zoomIn = {
|
|
|
|
init : function(slider) {
|
|
if (slider.options.captionContainer) {
|
|
var captionContainer = $(slider.options.captionContainer);
|
|
$(slider.view).bind({
|
|
"afterChange" : function() {
|
|
if ($(".wpv-caption:visible", captionContainer).length === 0) {
|
|
captionContainer.hide();
|
|
}
|
|
},
|
|
"beforeChange" : function() {
|
|
captionContainer.show();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
run: function (cfg) {
|
|
|
|
cfg = $.extend({
|
|
duration: 1000,
|
|
easing: "easeOutSine"
|
|
}, cfg);
|
|
|
|
var content = $(cfg.toShow[0].firstChild);
|
|
var targetHeight = cfg.toShow.height();
|
|
var targetWidth = cfg.toShow.width();
|
|
var halfX = targetWidth / 2;
|
|
var halfY = targetHeight / 2;
|
|
var contentHeight = content.height();
|
|
var contentWidth = content.width();
|
|
|
|
cfg.toHide.css({
|
|
zIndex: 2
|
|
});
|
|
|
|
if (content.is("img")) {
|
|
var diffY = Math.abs(parseFloat(content.css("marginTop" )));
|
|
var diffX = Math.abs(parseFloat(content.css("marginLeft")));
|
|
content.css({
|
|
opacity: 0,
|
|
position: "absolute",
|
|
clip: "rect("
|
|
+ (diffY + halfY) + "px "
|
|
+ (diffX + halfX) + "px "
|
|
+ halfY + "px "
|
|
+ halfX + "px)"
|
|
}).show().animate({
|
|
opacity: 1
|
|
}, {
|
|
duration: cfg.duration,
|
|
easing: cfg.easing,
|
|
step: function (cur, fx) {
|
|
content[0].style.clip = "rect( "
|
|
+ (diffY - halfY * fx.pos) + "px "
|
|
+ (diffX + halfX * fx.pos) + "px "
|
|
+ (diffY + halfY * fx.pos) + "px "
|
|
+ (diffX - halfX * fx.pos) + "px)";
|
|
},
|
|
complete: function () {
|
|
cfg.toHide.hide();
|
|
content.css({
|
|
clip: "auto"
|
|
});
|
|
cfg.callback();
|
|
}
|
|
});
|
|
cfg.toShow.css({
|
|
display: "block",
|
|
zIndex: 3
|
|
});
|
|
} else {
|
|
var cssBackup = {
|
|
// top : content.css("top"),
|
|
//left : content.css("left"),
|
|
//marginRight : content.css("marginRight"),
|
|
//marginBottom : content.css("marginBottom")
|
|
};
|
|
|
|
content.css({
|
|
//top : "50%",
|
|
//left : "50%",
|
|
width: "100%",
|
|
height: "100%"
|
|
});
|
|
|
|
cfg.toShow.css({
|
|
opacity: 0,
|
|
zIndex: 3,
|
|
display: "block",
|
|
position: "absolute",
|
|
width: 0,
|
|
height: 0,
|
|
top: "50%",
|
|
left: "50%"
|
|
}).animate({
|
|
opacity: 1,
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%"
|
|
}, {
|
|
duration: cfg.duration,
|
|
easing: cfg.easing,
|
|
//step : function(cur, fx) {
|
|
// if (fx.prop == "opacity") {
|
|
// content[0].style.top = halfY - (halfX * fx.pos) + "px";
|
|
// content[0].style.left = halfX - (halfX * fx.pos) + "px";
|
|
// content[0].style.height = (targetHeight * fx.pos) + "px";
|
|
// content[0].style.width = (targetWidth * fx.pos) + "px";
|
|
// }
|
|
//},
|
|
complete: function () {
|
|
cfg.toHide.hide();
|
|
//content.css(cssBackup);
|
|
cfg.callback();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* cfg contains:
|
|
* - oldCaption {jQuery}
|
|
* - newCaption {jQuery}
|
|
* - slider (The instance)
|
|
* - slideToShow {Slide}
|
|
* - slideToHide {Slide}
|
|
*/
|
|
changeCaptions: function (cfg, callback) {
|
|
|
|
var Z = 200,
|
|
delay = Math.round(cfg.slider.options.animation_time * 0.3),
|
|
time = Math.round(cfg.slider.options.animation_time * 0.4);
|
|
|
|
if (cfg.newCaption.length) {
|
|
cfg.newCaption.css({
|
|
opacity: 0,
|
|
zIndex: Z + 1
|
|
}).show().delay(delay).fadeTo(time, 1, "linear", callback);
|
|
} else {
|
|
callback();
|
|
}
|
|
|
|
// This is FALSE on the first showing of the first slide!
|
|
if (cfg.oldCaption) {
|
|
cfg.oldCaption.css({
|
|
zIndex: Z
|
|
}).delay(delay).fadeTo(time, 0, "linear", function () {
|
|
cfg.oldCaption.hide();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// shrink
|
|
$.WPVSlider.fx.shrink = {
|
|
|
|
init: function(slider) {
|
|
if ($.browser.webkit) {
|
|
$("#container").css("WebkitTransform", "none");
|
|
}
|
|
//console.log(this, arguments);
|
|
},
|
|
|
|
// Use the built-in slide transition for main animations
|
|
run: function (cfg) {
|
|
|
|
var captionToHide, captionToShow = cfg.toShow.data("Slide").getCaption(),
|
|
wI = cfg.toShow.closest(".wpv-wrapper").width(),
|
|
wO = cfg.toShow.closest(".wpv-wrapper").innerWidth();
|
|
|
|
if (cfg.toHide) {
|
|
|
|
captionToHide = cfg.toHide.data("Slide").getCaption();
|
|
|
|
cfg.toHide.css({
|
|
zIndex: 2
|
|
}).animate({
|
|
left: cfg.dir == "prev" ? wO : -wO / 2,
|
|
opacity: 0
|
|
}, cfg.duration, cfg.easing);
|
|
}
|
|
|
|
//w = cfg.toShow.width();
|
|
cfg.toShow.css({
|
|
left: wO * (cfg.dir == "next" ? 1 : -1),
|
|
zIndex: 4,
|
|
opacity: 1
|
|
}).show().animate({
|
|
left: 0
|
|
}, {
|
|
duration: cfg.duration,
|
|
easing: cfg.easing,
|
|
step: function (cur, fx) {
|
|
|
|
if (captionToShow && captionToShow.length) {
|
|
captionToShow.css({
|
|
left: cur + wI,
|
|
opacity: fx.pos
|
|
});
|
|
}
|
|
|
|
if (captionToHide && captionToHide.length) {
|
|
captionToHide.css({
|
|
left: wI - wO * fx.pos * (cfg.dir == "prev" ? -1 : 1),
|
|
opacity: 1 - fx.pos
|
|
});
|
|
}
|
|
},
|
|
complete: function () {
|
|
cfg.toHide.hide();
|
|
cfg.callback();
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Just define an empty function here to get rid of the default one. In this
|
|
* case the caption animations are easier to handle in the main function above
|
|
*/
|
|
changeCaptions: function (cfg, callback) {
|
|
callback();
|
|
}
|
|
};
|
|
|
|
$.WPVSlider.fx.peek = {
|
|
|
|
run: function (cfg) {
|
|
var padd = 20;
|
|
var slide = cfg.toHide;
|
|
var slides = slide.parent().find(".wpv-slide-wrapper").hide();
|
|
var indexToHide = slides.index(cfg.toHide);
|
|
var indexToShow = slides.index(cfg.toShow);
|
|
|
|
cfg.toHide.show().css({
|
|
left: 0
|
|
});
|
|
|
|
if (cfg.dir == "next") {
|
|
cfg.toShow.show().css({
|
|
left: slide.width() + padd
|
|
});
|
|
if (indexToShow == slides.length - 1) {
|
|
slides.eq(0).show().css({
|
|
left: slide.width() + cfg.toShow.width() + padd * 2
|
|
});
|
|
} else {
|
|
cfg.toShow.next().show().css({
|
|
left: slide.width() + cfg.toShow.width() + padd * 2
|
|
});
|
|
}
|
|
} else {
|
|
cfg.toShow.show().css({
|
|
left: -cfg.toShow.width() - padd
|
|
});
|
|
if (indexToHide == slides.length - 1) {
|
|
slides.eq(0).show().css({
|
|
left: cfg.toHide.width() + padd
|
|
});
|
|
} else {
|
|
cfg.toHide.next().show().css({
|
|
left: cfg.toHide.width() + padd
|
|
});
|
|
}
|
|
}
|
|
|
|
slide.parent().css({
|
|
left: 0
|
|
}).animate({
|
|
left: (slide.width() + padd) * (cfg.dir == "next" ? -1 : 1)
|
|
}, cfg.duration, cfg.easing, cfg.callback);
|
|
},
|
|
|
|
changeCaptions: function (cfg, callback) {
|
|
if (cfg.newCaption.parent().length) {
|
|
var startTop = cfg.newCaption.parent()[0].scrollTop;
|
|
var top = cfg.newCaption[0].offsetTop - cfg.newCaption.scrollTop();
|
|
|
|
if (cfg.newCaption.parent().css('opacity') != 0) {
|
|
cfg.newCaption.parent().css({
|
|
dummy: 0
|
|
}).animate({
|
|
dummy: 1
|
|
}, {
|
|
duration: cfg.slider.options.animation_time,
|
|
easing: "easeInOutCubic",
|
|
step: function (cur) {
|
|
this.scrollTop = startTop + (cur * (top - startTop));
|
|
},
|
|
complete: callback
|
|
});
|
|
} else {
|
|
cfg.newCaption.parent().scrollTop = top;
|
|
cfg.newCaption.parent().animate({
|
|
opacity: 1
|
|
}, {
|
|
duration: cfg.slider.options.animation_time,
|
|
easing: "easeInOutCubic",
|
|
complete: callback
|
|
});
|
|
}
|
|
} else {
|
|
if (cfg.oldCaption.length > 0) {
|
|
cfg.oldCaption.parent().animate({
|
|
opacity: 0
|
|
}, {
|
|
duration: cfg.slider.options.animation_time,
|
|
easing: "easeInOutCubic",
|
|
complete: callback
|
|
});
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
})(jQuery); |