/**
* MooFlow - Image gallery
*
* Dependencies: MooTools 1.2
*
* @version 0.3.0
*
* @license MIT-style license
* @author Tobias Wetzel <info [at] outcut.de>, Benedikt Morschheuser <info [at] bmo-design.de>
* @copyright Author
* @docmentation http://outcut.de/MooFlow/Docmentation.html
*/
var MooFlow = new Class({
Implements: [Events, Options],
options: {
onStart: $empty,
onClickView: $empty,
onAutoPlay: $empty,
onAutoStop: $empty,
onRequest: $empty,
onResized: $empty,
onEmptyinit: $empty,
reflection: 0.4,
heightRatio: 0.6,
offsetY: 0,
startIndex: 0,
interval: 3000,
factor: 115,
bgColor: '#000',
useCaption: false,
useResize: false,
useSlider: false,
useWindowResize: false,
useMouseWheel: true,
useKeyInput: false,
useViewer: false
},
initialize: function(element, options) {
this.MooFlow = element;
this.setOptions(options);
this.foc = 150;
this.factor = this.options.factor;
this.offY = this.options.offsetY;
this.isFull = false;
this.isAutoPlay = false;
this.isLoading = false;
this.inMotion = false;
this.isback = false;
this.MooFlow.addClass('mf').setStyles({
'overflow': 'hidden',
'background-color': this.options.bgColor,
'position': 'relative',
'height': this.MooFlow.getSize().x * this.options.heightRatio,
'opacity': 0
});
if (this.options.useWindowResize) window.addEvent('resize', this.update.bind(this, 'init'));
if (this.options.useMouseWheel || this.options.useSlider) this.MooFlow.addEvent('mousewheel', this.wheelTo.bind(this));
if (this.options.useKeyInput) document.addEvent('keydown', this.keyTo.bind(this));
this.getElements(this.MooFlow);
},
clearInit: function() {
this.fireEvent('emptyinit');
},
getElements: function(el) {
this.master = {
'images': []
};
var els = el.getChildren();
if (!els.length) {
this.clearInit();
return;
}
$$(els).each(function(el) {
var hash = $H(el.getElement('img').getProperties('src', 'title', 'alt', 'longdesc'));
if (el.get('tag') == 'a') hash.combine(el.getProperties('href', 'rel', 'target'));
this.master['images'].push(hash.getClean());
el.dispose();
}, this);
this.clearMain();
},
clearMain: function() {
if (this.cap) {
this.cap.fade(0);
}
if (this.nav) {
new Fx.Tween(this.nav, {
'onComplete': function() {
this.MooFlow.empty();
this.createAniObj();
}.bind(this)
}).start('bottom', -50);
}
if (!this.nav && !this.cap) {
this.MooFlow.empty();
this.createAniObj();
}
},
getMooFlowElements: function(key) {
var els = [];
this.master.images.each(function(el) {
els.push(el[key]);
});
return els;
},
createAniObj: function() {
this.aniFx = new Fx.Value({
'transition': Fx.Transitions.Expo.easeOut,
'link': 'cancel',
'duration': 750,
onMotion: this.process.bind(this),
'onStart': this.flowStart.bind(this),
'onComplete': this.flowComplete.bind(this)
});
this.addLoader();
},
addLoader: function() {
this.MooFlow.store('height', this.MooFlow.getSize().y);
this.loader = new Element('div', {
'class': 'loader'
}).inject(this.MooFlow);
new Fx.Tween(this.MooFlow, {
'duration': 800,
'onComplete': this.preloadImg.bind(this)
}).start('opacity', 1);
},
preloadImg: function() {
this.loadedImages = new Asset.images(this.getMooFlowElements('src'), {
'onComplete': this.loaded.bind(this),
'onProgress': this.createMooFlowElement.bind(this)
});
},
createMooFlowElement: function(counter, i) {
var obj = this.getCurrent(i);
var img = this.loadedImages[i];
obj['width'] = img.width;
obj['height'] = img.height;
img.removeProperties('width', 'height');
obj['div'] = new Element('div').setStyles({
'position': 'absolute',
'display': 'none',
'height': this.MooFlow.getSize().y
}).inject(this.MooFlow);
obj['con'] = new Element('div').inject(obj['div']);
img.setStyles({
'vertical-align': 'bottom',
'width': '100%',
'height': '50%'
});
img.addEvents({
'click': this.clickTo.bind(this, i),
'dblclick': this.viewCallBack.bind(this, i)
});
img.inject(obj['con']);
new Element('div').reflect({
'img': img,
'ref': this.options.reflection,
'height': obj.height,
'width': obj.width,
'color': this.options.bgColor
}).setStyles({
'width': '100%',
'height': '50%',
'background-color': this.options.bgColor
}).inject(obj['con']);
this.loader.set('text', (counter + 1) + ' / ' + this.loadedImages.length);
},
loaded: function() {
this.index = this.options.startIndex;
this.iL = this.master.images.length - 1;
new Fx.Tween(this.loader, {
'duration': 800,
'onComplete': this.createUI.bind(this)
}).start('opacity', 0);
},
createUI: function() {
this.loader.dispose();
if (this.options.useCaption) {
this.cap = new Element('div').addClass('caption').set('opacity', 0).inject(this.MooFlow);
}
this.nav = new Element('div').addClass('mfNav').setStyle('bottom', '-50px');
this.autoPlayCon = new Element('div').addClass('autoPlayCon');
this.sliderCon = new Element('div').addClass('sliderCon');
this.resizeCon = new Element('div').addClass('resizeCon');
if (this.options.useAutoPlay) {
this.autoPlayCon.adopt(
new Element('a', {
'class': 'stop',
'events': {
'click': this.stop.bind(this)
}
}), new Element('a', {
'class': 'play',
'events': {
'click': this.play.bind(this)
}
}));
}
if (this.options.useSlider) {
this.sliPrev = new Element('a', {
'class': 'sliderNext',
'events': {
'click': this.prev.bind(this)
}
});
this.sliNext = new Element('a', {
'class': 'sliderPrev',
'events': {
'click': this.next.bind(this)
}
});
this.knob = new Element('div', {
'class': 'knob'
});
this.knob.adopt(new Element('div', {
'class': 'knobleft'
}));
this.slider = new Element('div', {
'class': 'slider'
}).adopt(this.knob);
this.sliderCon.adopt(this.sliPrev, this.slider, this.sliNext);
this.slider.store('parentWidth', this.sliderCon.getSize().x - this.sliPrev.getSize().x - this.sliNext.getSize().x);
}
if (this.options.useResize) {
this.resizeCon.adopt(new Element('a', {
'class': 'resize',
'events': {
'click': this.setScreen.bind(this)
}
}));
}
this.MooFlow.adopt(this.nav.adopt(this.autoPlayCon, this.sliderCon, this.resizeCon));
this.showUI();
},
showUI: function() {
if (this.cap) this.cap.fade(1);
this.nav.tween('bottom', 20);
this.fireEvent('start');
this.update();
},
update: function(e) {
if (e == 'init') return;
this.oW = this.MooFlow.getSize().x;
this.sz = this.oW * 0.5;
if (this.options.useSlider) {
this.slider.setStyle('width', this.slider.getParent().getSize().x - this.sliPrev.getSize().x - this.sliNext.getSize().x - 1);
this.knob.setStyle('width', (this.slider.getSize().x / this.iL));
this.sli = new SliderEx(this.slider, this.knob, {
steps: this.iL
}).set(this.index);
this.sli.addEvent('onChange', this.glideTo.bind(this));
}
this.glideTo(this.index);
this.isLoading = false;
},
setScreen: function() {
if (this.isFull = !this.isFull) {
this.holder = new Element('div').inject(this.MooFlow, 'after');
this.MooFlow.wraps(new Element('div').inject(document.body));
this.MooFlow.setStyles({
'position': 'absolute',
'z-index': '100',
'top': '0',
'left': '0',
'width': window.getSize().x,
'height': window.getSize().y
});
if (this.options.useWindowResize) {
this._initResize = this.initResize.bind(this);
window.addEvent('resize', this._initResize);
}
} else {
this.MooFlow.wraps(this.holder);
window.removeEvent('resize', this._initResize);
delete this.holder, this._initResize;
this.MooFlow.setStyles({
'position': 'relative',
'z-index': '',
'top': '',
'left': '',
'width': '',
'height': this.MooFlow.retrieve('height')
});
this.slider.setStyle('width', this.slider.retrieve('parentWidth'));
}
this.fireEvent('resized', this.isFull);
this.update();
},
initResize: function() {
this.MooFlow.setStyles({
'width': window.getSize().x,
'height': window.getSize().y
});
this.update();
},
getCurrent: function(index) {
return this.master.images[$chk(index) ? index : this.index];
},
loadJSON: function(url) {
if (!url || this.isLoading) return;
this.isLoading = true;
new Request.JSON({
'onComplete': function(data) {
if ($chk(data)) {
this.master = data;
this.clearMain();
this.fireEvent('request', data);
}
}.bind(this)
}, this).get(url);
},
loadHTML: function(url, filter) {
if (!url || !filter || this.isLoading) return;
this.isLoading = true;
new Request.HTML({
'onSuccess': function(tree, els, htm) {
var result = new Element('div', {
'html': htm
}).getChildren(filter);
this.getElements(result);
this.fireEvent('request', result);
}.bind(this)
}, this).get(url);
},
flowStart: function() {
this.inMotion = true;
},
flowComplete: function() {
this.inMotion = false;
},
viewCallBack: function(index) {
if (this.index != index || this.inMotion) return;
var el = $H(this.getCurrent());
var returnObj = {};
returnObj['coords'] = el.div.getElement('img').getCoordinates();
el.each(function(v, k) {
if ($type(v) == 'number' || $type(v) == 'string') returnObj[k] = v;
}, this);
this.fireEvent('clickView', returnObj);
},
prev: function() {
if (this.index > 0) this.clickTo(this.index - 1);
},
next: function() {
if (this.index < this.iL) this.clickTo(this.index + 1);
},
stop: function() {
$clear(this.autoPlay);
this.isAutoPlay = false;
this.fireEvent('autoStop');
},
play: function() {
this.autoPlay = this.auto.periodical(this.options.interval, this);
this.isAutoPlay = true;
this.fireEvent('autoPlay');
},
auto: function() {
if (this.index < this.iL) this.next();
else if (this.index == this.iL) this.clickTo(0);
},
keyTo: function(e) {
switch (e.code) {
case 37:
e.stop();
this.prev();
break;
case 39:
e.stop();
this.next();
}
},
wheelTo: function(e) {
if (e.wheel > 0) this.prev();
if (e.wheel < 0) this.next();
e.stop().preventDefault();
},
clickTo: function(index) {
if (this.index == index) return;
//this.aniFx.cancel();
if (this.sli) this.sli.set(index);
this.glideTo(index);
},
glideTo: function(index) {
if (this.index < index) this.isback = false;
if (this.index > index) this.isback = true;
this.index = index;
this.aniFx.start(this.aniFx.get(), index * -this.foc);
if (this.cap) this.cap.set('html', this.getCurrent().title);
},
process: function(x) {
var z, W, H, zI = this.iL,
foc = this.foc,
f = this.factor,
sz = this.sz,
oW = this.oW,
offY = this.offY,
div, elh, elw,
isback = this.isback;
this.master.images.each(function(el) {
div = el.div.style;
elw = el.width;
elh = el.height;
if (x > -foc * 6 && x < foc * 6) {
with(Math) {
z = sqrt(10000 + x * x) + 100;
H = round((elh / elw * f) / z * sz);
W = round(elw * H / elh);
if (H >= elw * 0.5) {
W = round(f / z * sz);
}
div.left = round(((x / z * sz) + sz) - (f * 0.5) / z * sz) + 'px';
div.top = round(oW * 0.4 - H) + offY + 'px';
}
el.con.style.height = H * 2 + 'px';
div.width = W + 'px';
if (isback==true)
div.zIndex = x <= -foc ? zI++ : zI--;
else
div.zIndex = x < 0 ? zI++ : zI--;
div.display = 'block';
} else {
div.display = 'none';
}
x += foc;
});
}
});
var SliderEx = new Class({
Extends: Slider,
set: function(step) {
this.step = Math.round(step);
this.fireEvent('tick', this.toPosition(this.step));
return this;
},
clickedElement: function(event) {
var dir = this.range < 0 ? -1 : 1;
var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
position = position.limit(-this.options.offset, this.full - this.options.offset);
this.step = Math.round(this.min + dir * this.toStep(position));
this.checkStep();
this.fireEvent('tick', position);
}
});
Fx.Value = new Class({
Extends: Fx,
compute: function(from, to, delta) {
this.value = Fx.compute(from, to, delta);
this.fireEvent('motion', this.value);
return this.value;
},
get: function() {
return this.value || 0;
}
});
Element.implement({
reflect: function(arg) {
i = arg.img.clone();
if (Browser.Engine.trident) {
i.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=20, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' + 100 * arg.ref + ')';
i.setStyles({
'width': '100%',
'height': '100%'
});
return new Element('div').adopt(i);
} else {
var can = new Element('canvas').setProperties({
'width': arg.width,
'height': arg.height
});
if (can.getContext) {
try {
var ctx = can.getContext("2d");
ctx.save();
ctx.translate(0, arg.height - 1);
ctx.scale(1, -1);
ctx.drawImage(i, 0, 0, arg.width, arg.height);
ctx.restore();
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = arg.color;
ctx.fillRect(0, arg.height * 0.5, arg.width, arg.height);
var gra = ctx.createLinearGradient(0, 0, 0, arg.height * arg.ref);
gra.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gra.addColorStop(0, "rgba(255, 255, 255, " + (1 - arg.ref) + ")");
ctx.fillStyle = gra;
ctx.rect(0, 0, arg.width, arg.height);
ctx.fill();
delete ctx, gra;
} catch(err) {}
}
return can;
}
}
});
window.addEvent('domready', function() {
$$('.MooFlowieze').each(function(mooflow) {
new MooFlow(mooflow);
});
});
/**The script from the html file**/
var myMooFlowPage = {
start: function() {
var mf = new MooFlow($('MooFlow'), {
startIndex: 5,
useSlider: true,
useAutoPlay: true,
useCaption: true,
useResize: true,
useMouseWheel: true,
useKeyInput: true,
factor: 140,
offsetY: 50,
heightRatio: 0.8,
});
}
};
window.addEvent('domready', myMooFlowPage.start);
<div id="MooFlow">
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image1.jpg" title="A image 1" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image2.jpg" title="A image 2" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image3.jpg" title="A image 3" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image4.jpg" title="A image 4" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image5.jpg" title="A image 5" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image6.jpg" title="A image 6" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image7.jpg" title="A image 7" alt="A image" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image8.jpg" title="A image 8" alt="A image?" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image9.jpg" title="A image 9" alt="A image?" /></div>
<div><img src="http://demos.mashitup.de/wp-content/blogs.dir/2/files/main-demogallery/image10.jpg" title="A image 10" alt="A image?" /></div>
</div>
.mf{visibility: hidden; z-index:1; color:#fff; font-size:14px}
.mf * {
outline:none;
border:none;
padding:0;
margin:0;
-moz-user-select: none;
-webkit-user-select: none;
user-select:none;
-o-user-select:none
}
.mf div.loader{
position:absolute;
text-align:center;
z-index:10000;
margin:0 auto;
top:45%;
width:100%;
background:url(http://www.outcut.de/MooFlow/skin/ajax_loader.gif) no-repeat 50% 0;
padding:50px 0;
}
.mf div.caption {
position:absolute;
text-align:center;
z-index:98;
margin:1em auto;
bottom:50px;
width:100%;
}
.mf div.mfNav{
position:absolute;
z-index:99;
margin:0 auto;
text-align:center;
width:100%;
bottom:20px;
font-size:1px;
line-height:1px;
width:100%;
}
.mf div.autoPlayCon{
float:left;
width:10%;
padding-left:3%;
height:24px;
}
.mf a.play, .mf a.stop{
width:27px;
height:24px;
float:left;
cursor:pointer;
}
.mf a.play{
background:url(http://www.outcut.de/MooFlow/skin/play.gif) no-repeat;
}
.mf a.stop{
background:url(http://www.outcut.de/MooFlow/skin/stop.gif) no-repeat;
}
.mf div.sliderCon{
margin-top:5px;
float:left;
width:74%;
}
.mf a.sliderNext{
background:url(http://www.outcut.de/MooFlow/skin/left.gif) no-repeat;
}
.mf a.sliderPrev{
background:url(http://www.outcut.de/MooFlow/skin/right.gif) no-repeat;
}
.mf a.sliderNext, a.sliderPrev{
text-decoration:none;
width:25px;
height:16px;
cursor:pointer;
float:left;
}
.mf div.resizeCon{
float:right;
width:10%;
padding-right:3%;
height:24px;
}
.mf a.resize{
width:34px;
height:24px;
float:right;
cursor:pointer;
background:url(http://www.outcut.de/MooFlow/skin/resize.gif) no-repeat;
}
.mf div.slider{
background:url(http://www.outcut.de/MooFlow/skin/middle.gif) repeat-x;
height:16px;
position:relative;
text-align:left;
float:left;
}
.mf div.knob{
height:16px;
background:url(http://www.outcut.de/MooFlow/skin/middle-slider.gif) repeat-x right center;
}
.mf div.knobleft{
background:url(http://www.outcut.de/MooFlow/skin/left-slider.gif) repeat-x center;
width:8px;
height:16px;
}