Jumat, 28 Februari 2014
Kamis, 27 Februari 2014
Slide show
/**
* @preserve Flux Slider v1.4.4
* http://www.joelambert.co.uk/flux
*
* Copyright 2011, Joe Lambert.
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
// Flux namespace
window.flux = {
version: '1.4.4'
};
(function($){
flux.slider = function(elem, opts) {
// Setup the flux.browser singleton to perform feature detection
flux.browser.init();
if(!flux.browser.supportsTransitions)
{
if(window.console && window.console.error)
console.error("Flux Slider requires a browser that supports CSS3 transitions");
}
var _this = this;
this.element = $(elem);
// Make a list of all available transitions
this.transitions = [];
for(var fx in flux.transitions)
this.transitions.push(fx);
this.options = $.extend({
autoplay: true,
transitions: this.transitions,
delay: 4000,
pagination: true,
controls: false,
captions: false,
width: null,
height: null,
onTransitionEnd: null
}, opts);
// Set the height/width if given [EXPERIMENTAL!]
this.height = this.options.height ? this.options.height : null;
this.width = this.options.width ? this.options.width : null;
// Filter out non compatible transitions
var newTrans = [];
$(this.options.transitions).each(function(index, tran){
var t = new flux.transitions[tran](this),
compatible = true;
if(t.options.requires3d && !flux.browser.supports3d)
compatible = false;
if(t.options.compatibilityCheck)
compatible = t.options.compatibilityCheck();
if(compatible)
newTrans.push(tran);
});
this.options.transitions = newTrans;
this.images = new Array();
this.imageLoadedCount = 0;
this.currentImageIndex = 0;
this.nextImageIndex = 1;
this.playing = false;
this.container = $('
').appendTo(this.element); this.surface = $('
').appendTo(this.container);
// Listen for click events as we may want to follow a link
this.container.bind('click', function(event) {
if($(event.target).hasClass('hasLink'))
window.location = $(event.target).data('href');
});
this.imageContainer = $('
').css({
'position': 'relative',
'overflow': 'hidden',
'min-height': '100px'
}).appendTo(this.surface);
// If the height/width is already set then resize the container
if(this.width && this.height)
{
this.imageContainer.css({
width: this.width+'px',
height: this.height+'px'
});
}
// Create the placeholders for the current and next image
this.image1 = $('
').appendTo(this.imageContainer);
this.image2 = $('
').appendTo(this.imageContainer);
$(this.image1).add(this.image2).css({
'position': 'absolute',
'top': '0px',
'left': '0px'
});
// Get a list of the images to use
this.element.find('img, a img').each(function(index, found_img){
var imgClone = found_img.cloneNode(false),
link = $(found_img).parent();
// If this img is directly inside a link then save the link for later use
if(link.is('a'))
$(imgClone).data('href', link.attr('href'));
_this.images.push(imgClone);
// Remove the images from the DOM
$(found_img).remove();
});
// Load the images afterwards as IE seems to load images synchronously
for(var i=0; i= _this.images.length)
{
_this.finishedLoading();
_this.setupImages();
}
};
// Load the image to ensure its cached by the browser
image.src = this.images[i].src;
}
// Catch when a transition has finished
this.element.bind('fluxTransitionEnd', function(event, data) {
// If the slider is currently playing then set the timeout for the next transition
// if(_this.isPlaying())
// _this.start();
// Are we using a callback instead of events for notifying about transition ends?
if(_this.options.onTransitionEnd) {
event.preventDefault();
_this.options.onTransitionEnd(data);
}
});
// Should we auto start the slider?
if(this.options.autoplay)
this.start();
// Handle swipes
this.element.bind('swipeLeft', function(event){
_this.next(null, {direction: 'left'});
}).bind('swipeRight', function(event){
_this.prev(null, {direction: 'right'});
});
// Under FF7 autoplay breaks when the current tab loses focus
setTimeout(function(){
$(window).focus(function(){
if(_this.isPlaying())
_this.next();
});
}, 100);
};
flux.slider.prototype = {
constructor: flux.slider,
playing: false,
start: function() {
var _this = this;
this.playing = true;
this.interval = setInterval(function() {
console.log('play');
_this.transition();
}, this.options.delay);
},
stop: function() {
this.playing = false;
clearInterval(this.interval);
this.interval = null;
},
isPlaying: function() {
return this.playing;
//return this.interval != null;
},
next: function(trans, opts) {
opts = opts || {};
opts.direction = 'left';
this.showImage(this.currentImageIndex+1, trans, opts);
},
prev: function(trans, opts) {
opts = opts || {};
opts.direction = 'right';
this.showImage(this.currentImageIndex-1, trans, opts);
},
showImage: function(index, trans, opts) {
this.setNextIndex(index);
// Temporarily stop the transition interval
//clearInterval(this.interval);
//this.interval = null;
this.setupImages();
this.transition(trans, opts);
},
finishedLoading: function() {
var _this = this;
this.container.css({
width: this.width+'px',
height: this.height+'px'
});
this.imageContainer.removeClass('loading');
// Should we setup a pagination view?
if(this.options.pagination)
{
// TODO: Attach to touch events if appropriate
this.pagination = $('
'+(index+1)+'
').css({
display: 'inline-block',
'margin-left': '0.5em',
'cursor': 'pointer'
}).appendTo(_this.pagination);
if(index == 0)
li.css('margin-left', 0).addClass('current');
});
this.container.append(this.pagination);
}
// Resize
$(this.imageContainer).css({
width: this.width+'px',
height: this.height+'px'
});
$(this.image1).css({
width: this.width+'px',
height: this.height+'px'
});
$(this.image2).css({
width: this.width+'px',
height: this.height+'px'
});
this.container.css({
width: this.width+'px',
height: this.height+(this.options.pagination?this.pagination.height():0)+'px'
});
// Should we add prev/next controls?
if(this.options.controls)
{
var css = {
padding: '4px 10px 10px',
'font-size': '60px',
'font-family': 'arial, sans-serif',
'line-height': '1em',
'font-weight': 'bold',
color: '#FFF',
'text-decoration': 'none',
background: 'rgba(0,0,0,0.5)',
position: 'absolute',
'z-index': 2000
};
this.nextButton = $('»').css(css).css3({
'border-radius': '4px'
}).appendTo(this.surface).bind('click', function(event){
event.preventDefault();
_this.next();
});
this.prevButton = $('«').css(css).css3({
'border-radius': '4px'
}).appendTo(this.surface).bind('click', function(event){
event.preventDefault();
_this.prev();
});
var top = (this.height - this.nextButton.height())/2;
this.nextButton.css({
top: top+'px',
right: '10px'
});
this.prevButton.css({
top: top+'px',
left: '10px'
});
}
// Should we use captions?
if(this.options.captions)
{
this.captionBar = $('
').css({
background: 'rgba(0,0,0,0.6)',
color: '#FFF',
'font-size': '16px',
'font-family': 'helvetica, arial, sans-serif',
'text-decoration': 'none',
'font-weight': 'bold',
padding: '1.5em 1em',
opacity: 0,
position: 'absolute',
'z-index': 110,
width: '100%',
bottom: 0
}).css3({
'transition-property': 'opacity',
'transition-duration': '800ms',
'box-sizing': 'border-box'
}).prependTo(this.surface);
}
this.updateCaption();
},
setupImages: function() {
var img1 = this.getImage(this.currentImageIndex),
css1 = {
'background-image': 'url("'+img1.src+'")',
'z-index': 101,
'cursor': 'auto'
};
// Does this image have an associated link?
if($(img1).data('href'))
{
css1.cursor = 'pointer';
this.image1.addClass('hasLink');
this.image1.data('href', $(img1).data('href'));
}
else
{
this.image1.removeClass('hasLink');
this.image1.data('href', null);
}
this.image1.css(css1).children().remove();
this.image2.css({
'background-image': 'url("'+this.getImage(this.nextImageIndex).src+'")',
'z-index': 100
}).show();
if(this.options.pagination && this.pagination)
{
this.pagination.find('li.current').removeClass('current');
$(this.pagination.find('li')[this.currentImageIndex]).addClass('current');
}
},
transition: function(transition, opts) {
// Allow a transition to be picked from ALL available transitions (not just the reduced set)
if(transition == undefined || !flux.transitions[transition])
{
// Pick a transition at random from the (possibly reduced set of) transitions
var index = Math.floor(Math.random()*(this.options.transitions.length));
transition = this.options.transitions[index];
}
var tran = null;
try {
tran = new flux.transitions[transition](this, $.extend(this.options[transition] ? this.options[transition] : {}, opts));
}
catch(e) {
// If an invalid transition has been provided then use the fallback (default is to just switch the image)
tran = new flux.transition(this, {fallback: true});
}
tran.run();
this.currentImageIndex = this.nextImageIndex;
this.setNextIndex(this.currentImageIndex+1);
this.updateCaption();
},
updateCaption: function() {
var str = $(this.getImage(this.currentImageIndex)).attr('title');
if(this.options.captions && this.captionBar)
{
if(str !== "")
this.captionBar.html(str);
this.captionBar.css('opacity', str === "" ? 0 : 1);
}
},
getImage: function(index) {
index = index % this.images.length;
return this.images[index];
},
setNextIndex: function(nextIndex)
{
if(nextIndex == undefined)
nextIndex = this.currentImageIndex+1;
this.nextImageIndex = nextIndex;
if(this.nextImageIndex > this.images.length-1)
this.nextImageIndex = 0;
if(this.nextImageIndex < 0)
this.nextImageIndex = this.images.length-1;
},
increment: function() {
this.currentImageIndex++;
if(this.currentImageIndex > this.images.length-1)
this.currentImageIndex = 0;
}
};
})(window.jQuery || window.Zepto);
/**
* Helper object to determine support for various CSS3 functions
* @author Joe Lambert
*/
(function($) {
flux.browser = {
init: function() {
// Have we already been initialised?
if(flux.browser.supportsTransitions !== undefined)
return;
var div = document.createElement('div'),
prefixes = ['-webkit', '-moz', '-o', '-ms'],
domPrefixes = ['Webkit', 'Moz', 'O', 'Ms'];
// Does the current browser support CSS Transitions?
if(window.Modernizr && Modernizr.csstransitions !== undefined)
flux.browser.supportsTransitions = Modernizr.csstransitions;
else
{
flux.browser.supportsTransitions = this.supportsCSSProperty('Transition');
}
// Does the current browser support 3D CSS Transforms?
if(window.Modernizr && Modernizr.csstransforms3d !== undefined)
flux.browser.supports3d = Modernizr.csstransforms3d;
else
{
// Custom detection when Modernizr isn't available
flux.browser.supports3d = this.supportsCSSProperty("Perspective");
if ( flux.browser.supports3d && 'webkitPerspective' in $('body').get(0).style ) {
// Double check with a media query (similar to how Modernizr does this)
var div3D = $('
');
var mq = $('');
$('body').append(div3D);
$('head').append(mq);
flux.browser.supports3d = div3D.get(0).offsetLeft == 9;
div3D.remove();
mq.remove();
}
}
},
supportsCSSProperty: function(prop) {
var div = document.createElement('div'),
prefixes = ['-webkit', '-moz', '-o', '-ms'],
domPrefixes = ['Webkit', 'Moz', 'O', 'Ms'];
var support = false;
for(var i=0; i 0)
{
var add = colRemainder >= colAddPerLoop ? colAddPerLoop : colRemainder;
thisColWidth += add;
colRemainder -= add;
}
for(var j=0; j 0)
{
var add = thisRowRemainder >= rowAddPerLoop ? rowAddPerLoop : thisRowRemainder;
thisRowHeight += add;
thisRowRemainder -= add;
}
var tile = $('
').css({
width: thisColWidth+'px',
height: thisRowHeight+'px',
position: 'absolute',
top: totalTop+'px',
left: totalLeft+'px'
});
this.options.renderTile.call(this, tile, i, j, thisColWidth, thisRowHeight, totalLeft, totalTop);
fragment.appendChild(tile.get(0));
totalTop += thisRowHeight;
}
totalLeft += thisColWidth;
}
// Append the fragement to the surface
this.slider.image1.get(0).appendChild(fragment);
},
execute: function() {
var _this = this,
height = this.slider.image1.height(),
bars = this.slider.image1.find('div.barcontainer');
this.slider.image2.hide();
// Get notified when the last transition has completed
bars.last().transitionEnd(function(event){
_this.slider.image2.show();
_this.finished();
});
bars.css3({
'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2)
});
},
renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.bars = function(fluxslider, opts) {
return new flux.transition_grid(fluxslider, $.extend({
columns: 10,
rows: 1,
delayBetweenBars: 40,
renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
$(elem).css({
'background-image': this.slider.image1.css('background-image'),
'background-position': '-'+leftOffset+'px 0px'
}).css3({
'transition-duration': '400ms',
'transition-timing-function': 'ease-in',
'transition-property': 'all',
'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms'
});
},
execute: function() {
var _this = this;
var height = this.slider.image1.height();
var bars = this.slider.image1.find('div.tile');
// Get notified when the last transition has completed
$(bars[bars.length-1]).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
bars.css({
'opacity': '0.5'
}).css3({
'transform': flux.browser.translate(0, height)
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.bars3d = function(fluxslider, opts) {
return new flux.transition_grid(fluxslider, $.extend({
requires3d: true,
columns: 7,
rows: 1,
delayBetweenBars: 150,
perspective: 1000,
renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
var bar = $('
').css({
width: colWidth+'px',
height: '100%',
position: 'absolute',
top: '0px',
left: '0px',
'z-index': 200,
'background-image': this.slider.image1.css('background-image'),
'background-position': '-'+leftOffset+'px 0px',
'background-repeat': 'no-repeat'
}).css3({
'backface-visibility': 'hidden'
}),
bar2 = $(bar.get(0).cloneNode(false)).css({
'background-image': this.slider.image2.css('background-image')
}).css3({
'transform': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -rowHeight/2, rowHeight/2)
}),
left = $('
').css({
width: rowHeight+'px',
height: rowHeight+'px',
position: 'absolute',
top: '0px',
left: '0px',
background: '#222',
'z-index': 190
}).css3({
'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(rowHeight/2, 0, -rowHeight/2) + ' ' + flux.browser.rotateY(180),
'backface-visibility': 'hidden'
}),
right = $(left.get(0).cloneNode(false)).css3({
'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(rowHeight/2, 0, colWidth-rowHeight/2)
});
$(elem).css({
width: colWidth+'px',
height: '100%',
position: 'absolute',
top: '0px',
left: leftOffset+'px',
'z-index': colIndex > this.options.columns/2 ? 1000-colIndex : 1000 // Fix for Chrome to ensure that the z-index layering is correct!
}).css3({
'transition-duration': '800ms',
'transition-timing-function': 'linear',
'transition-property': 'all',
'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms',
'transform-style': 'preserve-3d'
}).append(bar).append(bar2).append(left).append(right);
},
execute: function() {
this.slider.image1.css3({
'perspective': this.options.perspective,
'perspective-origin': '50% 50%'
}).css({
'-moz-transform': 'perspective('+this.options.perspective+'px)',
'-moz-perspective': 'none',
'-moz-transform-style': 'preserve-3d'
});
var _this = this,
height = this.slider.image1.height(),
bars = this.slider.image1.find('div.tile');
this.slider.image2.hide();
// Get notified when the last transition has completed
bars.last().transitionEnd(function(event){
_this.slider.image1.css3({
'transform-style': 'flat'
});
_this.slider.image2.show();
_this.finished();
});
setTimeout(function(){
bars.css3({
'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2)
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.blinds = function(fluxslider, opts) {
return new flux.transitions.bars(fluxslider, $.extend({
execute: function() {
var _this = this;
var height = this.slider.image1.height();
var bars = this.slider.image1.find('div.tile');
// Get notified when the last transition has completed
$(bars[bars.length-1]).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
bars.css({
'opacity': '0.5'
}).css3({
'transform': 'scalex(0.0001)'
});
}, 50);
}
}, opts));
}
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.blinds3d = function(fluxslider, opts) {
return new flux.transitions.tiles3d(fluxslider, $.extend({
forceSquare: false,
rows: 1,
columns: 6
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.zip = function(fluxslider, opts) {
return new flux.transitions.bars(fluxslider, $.extend({
execute: function() {
var _this = this;
var height = this.slider.image1.height();
var bars = this.slider.image1.find('div.tile');
// Get notified when the last transition has completed
$(bars[bars.length-1]).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
bars.each(function(index, bar){
$(bar).css({
'opacity': '0.3'
}).css3({
'transform': flux.browser.translate(0, (index%2 ? '-'+(2*height) : height))
});
});
}, 20);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.blocks = function(fluxslider, opts) {
return new flux.transition_grid(fluxslider, $.extend({
forceSquare: true,
delayBetweenBars: 100,
renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
var delay = Math.floor(Math.random()*10*this.options.delayBetweenBars);
$(elem).css({
'background-image': this.slider.image1.css('background-image'),
'background-position': '-'+leftOffset+'px -'+topOffset+'px'
}).css3({
'transition-duration': '350ms',
'transition-timing-function': 'ease-in',
'transition-property': 'all',
'transition-delay': delay+'ms'
});
// Keep track of the last elem to fire
if(this.maxDelay === undefined)
this.maxDelay = 0;
if(delay > this.maxDelay)
{
this.maxDelay = delay;
this.maxDelayTile = elem;
}
},
execute: function() {
var _this = this;
var blocks = this.slider.image1.find('div.tile');
// Get notified when the last transition has completed
this.maxDelayTile.transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
blocks.each(function(index, block){
$(block).css({
'opacity': '0'
}).css3({
'transform': 'scale(0.8)'
});
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.blocks2 = function(fluxslider, opts) {
return new flux.transition_grid(fluxslider, $.extend({
cols: 12,
forceSquare: true,
delayBetweenDiagnols: 150,
renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
var delay = Math.floor(Math.random()*10*this.options.delayBetweenBars);
$(elem).css({
'background-image': this.slider.image1.css('background-image'),
'background-position': '-'+leftOffset+'px -'+topOffset+'px'
}).css3({
'transition-duration': '350ms',
'transition-timing-function': 'ease-in',
'transition-property': 'all',
'transition-delay': (colIndex+rowIndex)*this.options.delayBetweenDiagnols+'ms',
'backface-visibility': 'hidden' // trigger hardware acceleration
});
},
execute: function() {
var _this = this;
var blocks = this.slider.image1.find('div.tile');
// Get notified when the last transition has completed
blocks.last().transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
blocks.each(function(index, block){
$(block).css({
'opacity': '0'
}).css3({
'transform': 'scale(0.8)'
});
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.concentric = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
blockSize: 60,
delay: 150,
alternate: false,
setup: function() {
var w = this.slider.image1.width(),
h = this.slider.image1.height(),
largestLength = Math.sqrt(w*w + h*h), // Largest length is the diagonal
// How many blocks do we need?
blockCount = Math.ceil(((largestLength-this.options.blockSize)/2) / this.options.blockSize) + 1, // 1 extra to account for the round border
fragment = document.createDocumentFragment();
for(var i=0; i
').css({
width: width+'px',
height: height+'px',
position: 'relative'
}).css3({
'transition-duration': '800ms',
'transition-timing-function': 'linear',
'transition-property': 'all',
'transform-style': 'preserve-3d'
});
var css = {
height: '100%',
width: '100%',
position: 'absolute',
top: '0px',
left: '0px'
};
var currentFace = $('
').css($.extend(css, {
background: this.slider.image1.css('background-image')
})).css3({
'backface-visibility': 'hidden'
});
this.cubeContainer.append(currentFace);
var nextFace = $('
').css($.extend(css, {
background: this.slider.image2.css('background-image')
})).css3({
'transform' : this.options.transitionStrings.call(this, this.options.direction, 'nextFace'),
'backface-visibility': 'hidden'
});
this.cubeContainer.append(nextFace);
this.slider.image1.append(this.cubeContainer);
},
execute: function() {
var _this = this;
var width = this.slider.image1.width();
var height = this.slider.image1.height();
this.slider.image2.hide();
this.cubeContainer.transitionEnd(function(){
_this.slider.image2.show();
_this.finished();
});
setTimeout(function(){
_this.cubeContainer.css3({
'transform' : _this.options.transitionStrings.call(_this, _this.options.direction, 'container')
});
}, 50);
},
transitionStrings: function(direction, elem) {
var width = this.slider.image1.width();
var height = this.slider.image1.height();
// Define the various transforms that are required to perform various cube rotations
var t = {
'up' : {
'nextFace': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2),
'container': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height/2, height/2)
},
'down' : {
'nextFace': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height/2, height/2),
'container': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2)
},
'left' : {
'nextFace': flux.browser.rotateY(90) + ' ' + flux.browser.translate(width/2, 0, width/2),
'container': flux.browser.rotateY(-90) + ' ' + flux.browser.translate(-width/2, 0, width/2)
},
'right' : {
'nextFace': flux.browser.rotateY(-90) + ' ' + flux.browser.translate(-width/2, 0, width/2),
'container': flux.browser.rotateY(90) + ' ' + flux.browser.translate(width/2, 0, width/2)
}
};
return (t[direction] && t[direction][elem]) ? t[direction][elem] : false;
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.tiles3d = function(fluxslider, opts) {
return new flux.transition_grid(fluxslider, $.extend({
requires3d: true,
forceSquare: true,
columns: 5,
perspective: 600,
delayBetweenBarsX: 200,
delayBetweenBarsY: 150,
renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
var tile = $('
').css({
width: colWidth+'px',
height: rowHeight+'px',
position: 'absolute',
top: '0px',
left: '0px',
//'z-index': 200, // Removed to make compatible with FF10 (Chrome bug seems to have been fixed)
'background-image': this.slider.image1.css('background-image'),
'background-position': '-'+leftOffset+'px -'+topOffset+'px',
'background-repeat': 'no-repeat',
'-moz-transform': 'translateZ(1px)'
}).css3({
'backface-visibility': 'hidden'
});
var tile2 = $(tile.get(0).cloneNode(false)).css({
'background-image': this.slider.image2.css('background-image')
//'z-index': 190 // Removed to make compatible with FF10 (Chrome bug seems to have been fixed)
}).css3({
'transform': flux.browser.rotateY(180),
'backface-visibility': 'hidden'
});
$(elem).css({
'z-index': (colIndex > this.options.columns/2 ? 500-colIndex : 500) + (rowIndex > this.options.rows/2 ? 500-rowIndex : 500) // Fix for Chrome to ensure that the z-index layering is correct!
}).css3({
'transition-duration': '800ms',
'transition-timing-function': 'ease-out',
'transition-property': 'all',
'transition-delay': (colIndex*this.options.delayBetweenBarsX+rowIndex*this.options.delayBetweenBarsY)+'ms',
'transform-style': 'preserve-3d'
}).append(tile).append(tile2);
},
execute: function() {
this.slider.image1.css3({
'perspective': this.options.perspective,
'perspective-origin': '50% 50%'
});
var _this = this;
var tiles = this.slider.image1.find('div.tile');
this.slider.image2.hide();
// Get notified when the last transition has completed
tiles.last().transitionEnd(function(event){
_this.slider.image2.show();
_this.finished();
});
setTimeout(function(){
tiles.css3({
'transform': flux.browser.rotateY(180)
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.turn = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
requires3d: true,
perspective: 1300,
direction: 'left',
setup: function() {
var tab = $('
').css({
width: '50%',
height: '100%',
position: 'absolute',
top: '0px',
left: this.options.direction == 'left' ? '50%' : '0%',
'z-index':101
}).css3({
'transform-style': 'preserve-3d',
'transition-duration': '1000ms',
'transition-timing-function': 'ease-out',
'transition-property': 'all',
'transform-origin': this.options.direction == 'left' ? 'left center' : 'right center'
}),
front = $('
').appendTo(tab).css({
'background-image': this.slider.image1.css('background-image'),
'background-position': (this.options.direction == 'left' ? '-'+(this.slider.image1.width()/2) : 0)+'px 0',
width: '100%',
height: '100%',
position: 'absolute',
top: '0',
left: '0',
'-moz-transform': 'translateZ(1px)'
}).css3({
'backface-visibility': 'hidden'
}),
back = $('
').appendTo(tab).css({
'background-image': this.slider.image2.css('background-image'),
'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0',
width: '100%',
height: '100%',
position: 'absolute',
top: '0',
left: '0'
}).css3({
transform: flux.browser.rotateY(180),
'backface-visibility': 'hidden'
}),
current = $('
').css({
position: 'absolute',
top: '0',
left: this.options.direction == 'left' ? '0' : '50%',
width: '50%',
height: '100%',
'background-image': this.slider.image1.css('background-image'),
'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0',
'z-index':100
}),
overlay = $('
').css({ position: 'absolute', top: '0', left: this.options.direction == 'left' ? '50%' : '0', width: '50%', height: '100%', background: '#000', opacity: 1 }).css3({ 'transition-duration': '800ms', 'transition-timing-function': 'linear', 'transition-property': 'opacity' }), container = $('
').css3({
width: '100%',
height: '100%'
}).css3({
'perspective': this.options.perspective,
'perspective-origin': '50% 50%'
}).append(tab).append(current).append(overlay);
this.slider.image1.append(container);
},
execute: function() {
var _this = this;
this.slider.image1.find('div.tab').first().transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
_this.slider.image1.find('div.tab').css3({
// 179 not 180 so that the tab rotates the correct way in Firefox
transform: flux.browser.rotateY(_this.options.direction == 'left' ? -179 : 179)
});
_this.slider.image1.find('div.overlay').css({
opacity: 0
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.slide = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
direction: 'left',
setup: function() {
var width = this.slider.image1.width(),
height = this.slider.image1.height(),
currentImage = $('
').css({
height: height+'px',
width: width+'px',
position: 'absolute',
top: '0px',
left: '0px',
background: this.slider[this.options.direction == 'left' ? 'image1' : 'image2'].css('background-image')
}).css3({
'backface-visibility': 'hidden'
}),
nextImage = $('
').css({
height: height+'px',
width: width+'px',
position: 'absolute',
top: '0px',
left: width+'px',
background: this.slider[this.options.direction == 'left' ? 'image2' : 'image1'].css('background-image')
}).css3({
'backface-visibility': 'hidden'
});
this.slideContainer = $('
').css({ width: (2*width)+'px', height: height+'px', position: 'relative', left: this.options.direction == 'left' ? '0px' : -width+'px', 'z-index': 101 }).css3({ 'transition-duration': '600ms', 'transition-timing-function': 'ease-in', 'transition-property': 'all' }); this.slideContainer.append(currentImage).append(nextImage); this.slider.image1.append(this.slideContainer); }, execute: function() { var _this = this, delta = this.slider.image1.width(); if(this.options.direction == 'left') delta = -delta; this.slideContainer.transitionEnd(function(){ _this.finished(); }); setTimeout(function(){ _this.slideContainer.css3({ 'transform' : flux.browser.translate(delta) }); }, 50); } }, opts)); }; })(window.jQuery || window.Zepto); (function($) { flux.transitions.swipe = function(fluxslider, opts) { return new flux.transition(fluxslider, $.extend({ setup: function() { var img = $('
').css({
width: '100%',
height: '100%',
'background-image': this.slider.image1.css('background-image')
}).css3({
'transition-duration': '1600ms',
'transition-timing-function': 'ease-in',
'transition-property': 'all',
'mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,1) 52%, rgba(0,0,0,1) 100%)',
'mask-position': '70%',
'mask-size': '400%'
});
this.slider.image1.append(img);
},
execute: function() {
//return;
var _this = this,
img = this.slider.image1.find('div');
// Get notified when the last transition has completed
$(img).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
$(img).css3({
'mask-position': '30%'
});
}, 50);
},
compatibilityCheck: function() {
return flux.browser.supportsCSSProperty('MaskImage');
}
}, opts));
};
})(window.jQuery || window.Zepto);
(function($) {
flux.transitions.dissolve = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
setup: function() {
var img = $('
').css({
width: '100%',
height: '100%',
'background-image': this.slider.image1.css('background-image')
}).css3({
'transition-duration': '600ms',
'transition-timing-function': 'ease-in',
'transition-property': 'opacity'
});
this.slider.image1.append(img);
},
execute: function() {
var _this = this,
img = this.slider.image1.find('div.image');
// Get notified when the last transition has completed
$(img).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
$(img).css({
'opacity': '0.0'
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);
').appendTo(this.element); this.surface = $('
').css({ position: 'absolute', top: '0', left: this.options.direction == 'left' ? '50%' : '0', width: '50%', height: '100%', background: '#000', opacity: 1 }).css3({ 'transition-duration': '800ms', 'transition-timing-function': 'linear', 'transition-property': 'opacity' }), container = $('
').css({ width: (2*width)+'px', height: height+'px', position: 'relative', left: this.options.direction == 'left' ? '0px' : -width+'px', 'z-index': 101 }).css3({ 'transition-duration': '600ms', 'transition-timing-function': 'ease-in', 'transition-property': 'all' }); this.slideContainer.append(currentImage).append(nextImage); this.slider.image1.append(this.slideContainer); }, execute: function() { var _this = this, delta = this.slider.image1.width(); if(this.options.direction == 'left') delta = -delta; this.slideContainer.transitionEnd(function(){ _this.finished(); }); setTimeout(function(){ _this.slideContainer.css3({ 'transform' : flux.browser.translate(delta) }); }, 50); } }, opts)); }; })(window.jQuery || window.Zepto); (function($) { flux.transitions.swipe = function(fluxslider, opts) { return new flux.transition(fluxslider, $.extend({ setup: function() { var img = $('
Selasa, 18 Februari 2014
Langganan:
Postingan (Atom)