ONAP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js

   1 /**
   2  *
   3  * Spacegallery
   4  * Author: Stefan Petre www.eyecon.ro
   5  *
   6  */
   7
   8 (function($){
   9         EYE.extend({
  10
  11                 spacegallery: {
  12
  13                         //default options (many options are controled via CSS)
  14                         defaults: {
  15                                 border: 6, // border arround the image
  16                                 perspective: 140, // perpective height
  17                                 minScale: 0.2, // minimum scale for the image in the back
  18                                 duration: 800, // aimation duration
  19                                 loadingClass: null, // CSS class applied to the element while looading images
  20                                 before: function(){return false},
  21                                 after: function(){return false}
  22                         },
  23
  24                         animated: false,
  25
  26                         //position images
  27                         positionImages: function(el) {
  28                                 var top = 0;
  29                                 EYE.spacegallery.animated = false;
  30                                 $(el)
  31                                         .find('a')
  32                                                 .removeClass(el.spacegalleryCfg.loadingClass)
  33                                                 .end()
  34                                         .find('img')
  35                                                 .removeAttr('height')
  36                                                 .each(function(nr){
  37                                                         var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];
  38                                                         $(this)
  39                                                                 .css({
  40                                                                         top: el.spacegalleryCfg.tops[nr] + 'px',
  41                                                                         marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
  42                                                                         opacity: 1 - el.spacegalleryCfg.asins[nr]
  43                                                                 })
  44                                                                 .attr('width', parseInt(newWidth));
  45                                                         this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
  46                                                         this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
  47                                                         this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
  48                                                         this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
  49                                                         this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
  50                                                         this.spacegallery.current = el.spacegalleryCfg.asins[nr];
  51                                                         this.spacegallery.width = newWidth;
  52                                                 })
  53                         },
  54
  55                         //animate to nex image
  56                         next: function(e) {
  57                                 if (EYE.spacegallery.animated === false) {
  58                                         EYE.spacegallery.animated = true;
  59                                         var el = this.parentNode;
  60                                         el.spacegalleryCfg.before.apply(el);
  61                                         $(el)
  62                                                 .css('spacegallery', 0)
  63                                                 .animate({
  64                                                         spacegallery: 100
  65                                                 },{
  66                                                         easing: 'easeOut',
  67                                                         duration: el.spacegalleryCfg.duration,
  68                                                         complete: function() {
  69                                                                 $(el)
  70                                                                         .find('img:last')
  71                                                                         .prependTo(el);
  72                                                                 EYE.spacegallery.positionImages(el);
  73                                                                 el.spacegalleryCfg.after.apply(el);
  74                                                         },
  75                                                         step: function(now) {
  76                                                                 $('img', this)
  77                                                                         .each(function(nr){
  78                                                                                 var newWidth, top, next;
  79                                                                                 if (nr + 1 == el.spacegalleryCfg.images) {
  80                                                                                         top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
  81                                                                                         newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
  82                                                                                         $(this)
  83                                                                                                 .css({
  84                                                                                                         top: top + 'px',
  85                                                                                                         opacity: 0.7 - now/100,
  86                                                                                                         marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
  87                                                                                                 })
  88                                                                                                 .attr('width', newWidth);
  89                                                                                 } else {
  90                                                                                         next = this.spacegallery.current - this.spacegallery.increment * now /100;
  91                                                                                         newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
  92                                                                                         $(this).css({
  93                                                                                                 top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
  94                                                                                                 opacity: 1 - next,
  95                                                                                                 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
  96                                                                                         })
  97                                                                                         .attr('width', newWidth);
  98                                                                                 }
  99                                                                         });
 100                                                         }
 101                                                 });
 102                                 }
 103
 104                                 this.blur();
 105                                 return false;
 106                         },
 107
 108                         autoNext: function(el) {
 109
 110                                 if (EYE.spacegallery.animated === false) {
 111                                         EYE.spacegallery.animated = true;
 112                                         el.spacegalleryCfg.before.apply(el); // run the "before" function
 113                                         $(el)
 114                                                 .css('spacegallery', 0)
 115                                                 .animate({
 116                                                         spacegallery: 100
 117                                                 },{
 118                                                         easing: 'easeOut',
 119                                                         duration: el.spacegalleryCfg.duration,
 120                                                         complete: function() { // after animation is complete, move the front image to the back
 121                                                                 $(el)
 122                                                                         .find('img:last') // find the last image in this div
 123                                                                         .prependTo(el); // and stick it at the beginning
 124                                                                 EYE.spacegallery.positionImages(el); // run "position images"
 125                                                                 el.spacegalleryCfg.after.apply(el); //run the "after" function
 126                                                         },
 127                                                         step: function(now) {
 128                                                                 $('img', this)
 129                                                                         .each(function(nr){
 130                                                                                 var newWidth, top, next;
 131                                                                                 if (nr + 1 == el.spacegalleryCfg.images) {
 132                                                                                         top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
 133                                                                                         newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
 134                                                                                         $(this)
 135                                                                                                 .css({
 136                                                                                                         top: top + 'px',
 137                                                                                                         opacity: 0.7 - now/100,
 138                                                                                                         marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
 139                                                                                                 })
 140                                                                                                 .attr('width', newWidth);
 141                                                                                 } else {
 142                                                                                         next = this.spacegallery.current - this.spacegallery.increment * now /100;
 143                                                                                         newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
 144                                                                                         $(this).css({
 145                                                                                                 top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
 146                                                                                                 opacity: 1 - next,
 147                                                                                                 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
 148                                                                                         })
 149                                                                                         .attr('width', newWidth);
 150                                                                                 }
 151                                                                         });
 152                                                         }
 153                                                 });
 154                                 }
 155
 156                                 return false;
 157                         },
 158
 159                         //constructor
 160                         init: function(opt) {
 161                                 opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
 162                                 return this.each(function(){
 163                                         var el = this;
 164                                         if ($(el).is('.spacegallery')) {
 165                                                 $('<a href="#"></a>')
 166                                                         .appendTo(this)
 167                                                         .addClass(opt.loadingClass)
 168                                                         .bind('click', EYE.spacegallery.next);
 169                                                 el.spacegalleryCfg = opt;
 170                                                 el.spacegalleryCfg.images = el.getElementsByTagName('img').length;
 171                                                 el.spacegalleryCfg.loaded = 0;
 172                                                 el.spacegalleryCfg.asin = Math.asin(1);
 173                                                 el.spacegalleryCfg.asins = {};
 174                                                 el.spacegalleryCfg.tops = {};
 175                                                 el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
 176                                                 var top = 0;
 177                                                 $('img', el)
 178                                                         .each(function(nr){
 179                                                                 var imgEl = new Image();
 180                                                                 var elImg = this;
 181                                                                 el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
 182                                                                 top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
 183                                                                 el.spacegalleryCfg.tops[nr] = top;
 184                                                                 elImg.spacegallery = {};
 185                                                                 imgEl.src = this.src;
 186                                                                 if (imgEl.complete) {
 187                                                                         el.spacegalleryCfg.loaded ++;
 188                                                                         elImg.spacegallery.origWidth = imgEl.width;
 189                                                                         elImg.spacegallery.origHeight = imgEl.height
 190                                                                 } else {
 191                                                                         imgEl.onload = function() {
 192                                                                                 el.spacegalleryCfg.loaded ++;
 193                                                                                 elImg.spacegallery.origWidth = imgEl.width;
 194                                                                                 elImg.spacegallery.origHeight = imgEl.height
 195                                                                                 if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
 196
 197                                                                                         EYE.spacegallery.positionImages(el);
 198                                                                                 }
 199                                                                         };
 200                                                                 }
 201                                                         });
 202                                                 el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
 203                                                 el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
 204                                                 if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
 205                                                         EYE.spacegallery.positionImages(el);
 206                                                         setInterval(function() { EYE.spacegallery.autoNext(el); }, 4000);
 207                                                 }
 208                                         }
 209                                 });
 210                         }
 211                 }
 212         });
 213
 214         $.fn.extend({
 215
 216                 /**
 217                  * Create a space gallery
 218                  * @name spacegallery
 219                  * @description create a space gallery
 220                  * @option      int                     border                  Images' border. Default: 6
 221                  * @option      int                     perspective             Perpective height. Default: 140
 222                  * @option      float           minScale                Minimum scale for the image in the back. Default: 0.2
 223                  * @option      int                     duration                Animation duration. Default: 800
 224                  * @option      string          loadingClass    CSS class applied to the element while looading images. Default: null
 225                  * @option      function        before                  Callback function triggered before going to the next image
 226                  * @option      function        after                   Callback function triggered after going to the next image
 227                  */
 228                 spacegallery: EYE.spacegallery.init
 229         });
 230         $.extend($.easing,{
 231                 easeOut:function (x, t, b, c, d) {
 232                         return -c *(t/=d)*(t-2) + b;
 233                 }
 234         });
 235 })(jQuery);