Team:EPF-Lausanne/Team/gallery.js

From 2012.igem.org

(Difference between revisions)

Revision as of 01:06, 27 September 2012

window.GalleryFiles = [ //EPFL "", " Team-EPF-Lausanne_Gallery_2010-10-0118.25.45.jpg ", "", "", " Team-EPF-Lausanne_Gallery_2012-09-1414.42.03.jpg ", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""

];

$(function() {

 return window.GalleryObject = new Gallery(window.GalleryFiles, $("#gallery-main-image"), $("#gallery-thumbnails"));

}); var Image;

Image = (function() {

 Image.autoload = true;

 function Image(url, index) {
   this.url = url;
   this.index = index != null ? index : -1;
   this.img = void 0;
   this.loaded = false;
   this.callbacks = [];
   this.dom = void 0;
   this.thumbnail = void 0;
   if (Image.autoload) {
     setTimeout(function(){
       this.load();
     }, 8000*Math.random());
   }
 }

 Image.prototype.load = function(callback) {
   var _this = this;
   if (this.loaded) {
     if (callback != null) {
       return callback(this.img);
     }
   } else {
     if (callback != null) {
       this.callbacks.push(callback);
     }
     if (this.img === void 0) {
       this.img = $("<img>").load(function() {
         return _this.loadCallback();
       });
       return setTimeout((function() {
         return _this.img.attr("src", _this.url);
       }), 1);
     }
   }
 };

 Image.prototype.generateThumbnail = function() {
   var ctx, dim, dx, dy, h, imgDim, r, source, w;
   if (this.loaded && this.thumbnail === void 0) {
     imgDim = {
       w: this.img[0].width,
       h: this.img[0].height
     };
     dim = {
       w: 70,
       h: 55
     };
     r = Math.max(dim.w / imgDim.w, dim.h / imgDim.h);
     dx = -(imgDim.w * r - dim.w) / 2;
     dy = -(imgDim.h * r - dim.h) / 2;
     w = imgDim.w * r + 10;
     h = imgDim.h * r + 10;
     source = $("<canvas>").attr("width", w * 1.5).attr("height", h * 1.5);
     if (source[0].getContext("2d") !== void 0) {
       ctx = source[0].getContext("2d");
       ctx.drawImage(this.img[0], 0, 0, w * 1.5, h * 1.5);
     } else {
       source = $("<img>").attr("src", this.url);
     }

this.thumbnail = $("

").css({

       overflow: "hidden",
       position: "relative",
       left: "0px",
       top: "0px",
       width: dim.w + "px",
       height: dim.h + "px"
     }).append(source.css({
       position: "relative",
       left: dx + "px",
       top: dy + "px",
       width: w + "px",
       height: h + "px"
     }).mouseover(function() {
       $(this).stop().animate({
         width: (w + 20) + "px",
         height: (h + 20) + "px",
         left: (dx - 10) + "px",
         top: (dy - 10) + "px"
       });
       return $(this).parent().stop().animate({
         width: (dim.w + 20) + "px",
         height: (dim.h + 20) + "px"
       });
     }).mouseout(function() {
       $(this).stop().animate({
         width: w + "px",
         height: h + "px",
         left: dx + "px",
         top: dy + "px"
       });
       return $(this).parent().stop().animate({
         left: "0px",
         top: "0px",
         width: dim.w + "px",
         height: dim.h + "px"
       });
     }));
   }
   return this.thumbnail;
 };

 Image.prototype.loadCallback = function() {
   var callback, _i, _len, _ref, _results;
   this.loaded = true;
   _ref = this.callbacks;
   _results = [];
   for (_i = 0, _len = _ref.length; _i < _len; _i++) {
     callback = _ref[_i];
     _results.push(callback(this.img));
   }
   return _results;
 };

 Image.prototype.isLoaded = function() {
   return this.loaded;
 };

 Image.prototype.get = function(callback) {
   if(callback){
     this.load(callback);
   }
   return this.img;
 };

 Image.prototype.updateGalleryDOM = function() {
   var thumb,
     _this = this;
   if (!this.loaded) {
     this.dom.empty();

this.dom.append($("

").attr("class", "gallery-image-inner").append(Gallery.getLoadImage().attr("class", "gallery-image")));

     return this.load(function() {
       return _this.updateGalleryDOM();
     });
   } else {
     thumb = this.generateThumbnail();
     this.dom.empty();

return this.dom.append($("

").attr("class", "gallery-image-inner").append($(thumb).attr("class", "gallery-image")));

   }
 };

 Image.prototype.getGalleryDOM = function(callback) {
   var _this = this;
   if (this.dom === void 0) {

this.dom = $("

").attr("class", "gallery-image-outer").click(function() {

       if (callback != null) {
         return callback(_this);
       }
     });
     this.updateGalleryDOM();
   }
   return this.dom;
 };

 return Image;

})(); var Gallery;

Gallery = (function() {

 Gallery.loadAnimation = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";

 Gallery.loadImage = void 0;

 Gallery.getLoadImage = function() {
   return $("<img>").attr("src", Gallery.loadAnimation);
 };

 function Gallery(imageList, imgHolder, thumbHolder, width, height) {
   var i, src, _i, _len, _ref;
   this.imageList = imageList;
   this.imgHolder = imgHolder;
   this.thumbHolder = thumbHolder;
   this.width = width != null ? width : 550;
   this.height = height != null ? height : 400;
   this.loadImage = Gallery.getLoadImage();
   this.imgHolder.width(this.width + 12);
   this.imgHolder.height(this.height + 12);
   this.link = $("<a>").attr("target", "_blank");
   this.imgHolder.append(this.link);
   this.thumbHolder.width(this.width);
   this.images = [];
   _ref = this.imageList;
   for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
     src = _ref[i];
     this.images[i] = new Image(src, i);
   }
   this.createThumbnails();
   this.curIndex = 0;
   this.update();
 }

 Gallery.prototype.click = function(img) {
   this.curIndex = img.index;
   return this.update();
 };

 Gallery.prototype.createThumbnails = function() {
   var img, _i, _len, _ref, _results,
     _this = this;
   _ref = this.images;
   _results = [];
   for (_i = 0, _len = _ref.length; _i < _len; _i++) {
     img = _ref[_i];
     _results.push(this.thumbHolder.append(img.getGalleryDOM(function(img) {
       return _this.click(img);
     })));
   }
   return _results;
 };

 Gallery.prototype.update = function() {
   var h, img, r, real_h, real_w, ref_r, w,
     _this = this;
   img = this.images[this.curIndex];
   this.link.empty();
   if (!img.loaded) {
     img.load(function() {
       return _this.update();
     });
     this.loadImage.width(this.loadImage[0].width);
     this.link.attr("href", void 0);
     return this.link.append(this.loadImage);
   } else {
     w = img.get()[0].width;
     h = img.get()[0].height;
     r = w / h;
     ref_r = this.width / this.height;
     if (r > ref_r) {
       real_w = Math.min(this.width, w);
       img.get().width(real_w);
       img.get().height(real_w*1.0 / r);
     } else {
       real_h = Math.min(this.height, h);
       img.get().width(real_h * r);
       img.get().height(real_h);
     }
     this.link.attr("href", img.url);
     return this.link.append(img.get());
   }
 };

 return Gallery;

})();