Jumat, 19 Desember 2014
Minggu, 26 Oktober 2014
Jumat, 02 Mei 2014
Minggu, 20 April 2014
Selasa, 25 Maret 2014
Sabtu, 01 Maret 2014
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
Sabtu, 18 Januari 2014
Sabtu, 11 Januari 2014
Langganan:
Postingan (Atom)