4 * Author: Stefan Petre www.eyecon.ro
13 //default options (many options are controled via CSS)
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}
27 positionImages: function(el) {
29 EYE.spacegallery.animated = false;
32 .removeClass(el.spacegalleryCfg.loadingClass)
37 var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];
40 top: el.spacegalleryCfg.tops[nr] + 'px',
41 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
42 opacity: 1 - el.spacegalleryCfg.asins[nr]
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;
55 //animate to nex image
57 if (EYE.spacegallery.animated === false) {
58 EYE.spacegallery.animated = true;
59 var el = this.parentNode;
60 el.spacegalleryCfg.before.apply(el);
62 .css('spacegallery', 0)
67 duration: el.spacegalleryCfg.duration,
68 complete: function() {
72 EYE.spacegallery.positionImages(el);
73 el.spacegalleryCfg.after.apply(el);
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;
85 opacity: 0.7 - now/100,
86 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
88 .attr('width', newWidth);
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;
93 top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
95 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
97 .attr('width', newWidth);
108 autoNext: function(el) {
110 if (EYE.spacegallery.animated === false) {
111 EYE.spacegallery.animated = true;
112 el.spacegalleryCfg.before.apply(el); // run the "before" function
114 .css('spacegallery', 0)
119 duration: el.spacegalleryCfg.duration,
120 complete: function() { // after animation is complete, move the front image to the back
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
127 step: function(now) {
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;
137 opacity: 0.7 - now/100,
138 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
140 .attr('width', newWidth);
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;
145 top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
147 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
149 .attr('width', newWidth);
160 init: function(opt) {
161 opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
162 return this.each(function(){
164 if ($(el).is('.spacegallery')) {
165 $('<a href="#"></a>')
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);
179 var imgEl = new Image();
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
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) {
197 EYE.spacegallery.positionImages(el);
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);
217 * Create a space gallery
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
228 spacegallery: EYE.spacegallery.init
231 easeOut:function (x, t, b, c, d) {
232 return -c *(t/=d)*(t-2) + b;