diff options
Diffstat (limited to 'ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js')
| -rw-r--r-- | ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js | 235 |
1 files changed, 235 insertions, 0 deletions
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js new file mode 100644 index 000000000..69ab2cccb --- /dev/null +++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js @@ -0,0 +1,235 @@ +/** + * + * Spacegallery + * Author: Stefan Petre www.eyecon.ro + * + */ + +(function($){ + EYE.extend({ + + spacegallery: { + + //default options (many options are controled via CSS) + defaults: { + border: 6, // border arround the image + perspective: 140, // perpective height + minScale: 0.2, // minimum scale for the image in the back + duration: 800, // aimation duration + loadingClass: null, // CSS class applied to the element while looading images + before: function(){return false}, + after: function(){return false} + }, + + animated: false, + + //position images + positionImages: function(el) { + var top = 0; + EYE.spacegallery.animated = false; + $(el) + .find('a') + .removeClass(el.spacegalleryCfg.loadingClass) + .end() + .find('img') + .removeAttr('height') + .each(function(nr){ + var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr]; + $(this) + .css({ + top: el.spacegalleryCfg.tops[nr] + 'px', + marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px', + opacity: 1 - el.spacegalleryCfg.asins[nr] + }) + .attr('width', parseInt(newWidth)); + this.spacegallery.next = el.spacegalleryCfg.asins[nr+1]; + this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr]; + this.spacegallery.origTop = el.spacegalleryCfg.tops[nr]; + this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr]; + this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next; + this.spacegallery.current = el.spacegalleryCfg.asins[nr]; + this.spacegallery.width = newWidth; + }) + }, + + //animate to nex image + next: function(e) { + if (EYE.spacegallery.animated === false) { + EYE.spacegallery.animated = true; + var el = this.parentNode; + el.spacegalleryCfg.before.apply(el); + $(el) + .css('spacegallery', 0) + .animate({ + spacegallery: 100 + },{ + easing: 'easeOut', + duration: el.spacegalleryCfg.duration, + complete: function() { + $(el) + .find('img:last') + .prependTo(el); + EYE.spacegallery.positionImages(el); + el.spacegalleryCfg.after.apply(el); + }, + step: function(now) { + $('img', this) + .each(function(nr){ + var newWidth, top, next; + if (nr + 1 == el.spacegalleryCfg.images) { + top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100; + newWidth = this.spacegallery.width * top / this.spacegallery.origTop; + $(this) + .css({ + top: top + 'px', + opacity: 0.7 - now/100, + marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px' + }) + .attr('width', newWidth); + } else { + next = this.spacegallery.current - this.spacegallery.increment * now /100; + newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next; + $(this).css({ + top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px', + opacity: 1 - next, + marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px' + }) + .attr('width', newWidth); + } + }); + } + }); + } + + this.blur(); + return false; + }, + + autoNext: function(el) { + + if (EYE.spacegallery.animated === false) { + EYE.spacegallery.animated = true; + el.spacegalleryCfg.before.apply(el); // run the "before" function + $(el) + .css('spacegallery', 0) + .animate({ + spacegallery: 100 + },{ + easing: 'easeOut', + duration: el.spacegalleryCfg.duration, + complete: function() { // after animation is complete, move the front image to the back + $(el) + .find('img:last') // find the last image in this div + .prependTo(el); // and stick it at the beginning + EYE.spacegallery.positionImages(el); // run "position images" + el.spacegalleryCfg.after.apply(el); //run the "after" function + }, + step: function(now) { + $('img', this) + .each(function(nr){ + var newWidth, top, next; + if (nr + 1 == el.spacegalleryCfg.images) { + top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100; + newWidth = this.spacegallery.width * top / this.spacegallery.origTop; + $(this) + .css({ + top: top + 'px', + opacity: 0.7 - now/100, + marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px' + }) + .attr('width', newWidth); + } else { + next = this.spacegallery.current - this.spacegallery.increment * now /100; + newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next; + $(this).css({ + top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px', + opacity: 1 - next, + marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px' + }) + .attr('width', newWidth); + } + }); + } + }); + } + + return false; + }, + + //constructor + init: function(opt) { + opt = $.extend({}, EYE.spacegallery.defaults, opt||{}); + return this.each(function(){ + var el = this; + if ($(el).is('.spacegallery')) { + $('<a href="#"></a>') + .appendTo(this) + .addClass(opt.loadingClass) + .bind('click', EYE.spacegallery.next); + el.spacegalleryCfg = opt; + el.spacegalleryCfg.images = el.getElementsByTagName('img').length; + el.spacegalleryCfg.loaded = 0; + el.spacegalleryCfg.asin = Math.asin(1); + el.spacegalleryCfg.asins = {}; + el.spacegalleryCfg.tops = {}; + el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10); + var top = 0; + $('img', el) + .each(function(nr){ + var imgEl = new Image(); + var elImg = this; + el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin; + top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr]; + el.spacegalleryCfg.tops[nr] = top; + elImg.spacegallery = {}; + imgEl.src = this.src; + if (imgEl.complete) { + el.spacegalleryCfg.loaded ++; + elImg.spacegallery.origWidth = imgEl.width; + elImg.spacegallery.origHeight = imgEl.height + } else { + imgEl.onload = function() { + el.spacegalleryCfg.loaded ++; + elImg.spacegallery.origWidth = imgEl.width; + elImg.spacegallery.origHeight = imgEl.height + if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) { + + EYE.spacegallery.positionImages(el); + } + }; + } + }); + el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3; + el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3; + if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) { + EYE.spacegallery.positionImages(el); + setInterval(function() { EYE.spacegallery.autoNext(el); }, 4000); + } + } + }); + } + } + }); + + $.fn.extend({ + + /** + * Create a space gallery + * @name spacegallery + * @description create a space gallery + * @option int border Images' border. Default: 6 + * @option int perspective Perpective height. Default: 140 + * @option float minScale Minimum scale for the image in the back. Default: 0.2 + * @option int duration Animation duration. Default: 800 + * @option string loadingClass CSS class applied to the element while looading images. Default: null + * @option function before Callback function triggered before going to the next image + * @option function after Callback function triggered after going to the next image + */ + spacegallery: EYE.spacegallery.init + }); + $.extend($.easing,{ + easeOut:function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } + }); +})(jQuery);
\ No newline at end of file |