1 /** The minplayer namespace. */ 2 var minplayer = minplayer || {}; 3 4 /** 5 * @constructor 6 * @class A class to easily handle images. 7 * @param {object} context The jQuery context. 8 * @param {object} options This components options. 9 */ 10 minplayer.image = function(context, options) { 11 12 // Determine if the image is loaded. 13 this.loaded = false; 14 15 // The image loader. 16 this.loader = null; 17 18 // The ratio of the image. 19 this.ratio = 0; 20 21 // The image element. 22 this.image = null; 23 24 // Derive from display 25 minplayer.display.call(this, context, options); 26 }; 27 28 /** Derive from minplayer.display. */ 29 minplayer.image.prototype = new minplayer.display(); 30 31 /** Reset the constructor. */ 32 minplayer.image.prototype.constructor = minplayer.image; 33 34 /** 35 * @see minplayer.plugin.construct 36 */ 37 minplayer.image.prototype.construct = function() { 38 39 // Set the name of this plugin. 40 this.options.name = 'image'; 41 42 // Say we need to resize. 43 this.allowResize = true; 44 45 // Call the media display constructor. 46 minplayer.display.prototype.construct.call(this); 47 48 // Set the container to not show any overflow... 49 this.display.css('overflow', 'hidden'); 50 51 // Create the image loader. 52 var _this = this; 53 this.loader = new Image(); 54 this.loader.onload = function() { 55 _this.loaded = true; 56 _this.ratio = (_this.loader.width / _this.loader.height); 57 _this.resize(); 58 _this.trigger('loaded'); 59 }; 60 }; 61 62 /** 63 * Loads an image. 64 * 65 * @param {string} src The source of the image to load. 66 */ 67 minplayer.image.prototype.load = function(src) { 68 69 // First clear the previous image. 70 this.clear(function() { 71 72 // Create the new image, and append to the display. 73 this.image = jQuery(document.createElement('img')).attr({src: ''}).hide(); 74 this.display.append(this.image); 75 this.loader.src = src; 76 }); 77 }; 78 79 /** 80 * Clears an image. 81 * 82 * @param {function} callback Called when the image is done clearing. 83 */ 84 minplayer.image.prototype.clear = function(callback) { 85 this.loaded = false; 86 if (this.image) { 87 var _this = this; 88 this.image.fadeOut(function() { 89 _this.image.attr('src', ''); 90 _this.loader.src = ''; 91 $(this).remove(); 92 callback.call(_this); 93 }); 94 } 95 else { 96 callback.call(this); 97 } 98 }; 99 100 /** 101 * Resize the image provided a width and height or nothing. 102 * 103 * @param {integer} width (optional) The width of the container. 104 * @param {integer} height (optional) The height of the container. 105 */ 106 minplayer.image.prototype.resize = function(width, height) { 107 width = width || this.display.width(); 108 height = height || this.display.height(); 109 if (width && height && this.loaded) { 110 111 // Get the scaled rectangle. 112 var rect = this.getScaledRect(this.ratio, { 113 width: width, 114 height: height 115 }); 116 117 // Now set this image to the new size. 118 if (this.image) { 119 this.image.attr('src', this.loader.src).css({ 120 marginLeft: rect.x, 121 marginTop: rect.y, 122 width: rect.width, 123 height: rect.height 124 }); 125 } 126 127 // Show the container. 128 this.image.fadeIn(); 129 } 130 }; 131 132 /** 133 * @see minplayer.display#onResize 134 */ 135 minplayer.image.prototype.onResize = function() { 136 137 // Resize the image to fit. 138 this.resize(); 139 }; 140