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.img = null; 23 24 // Derive from display 25 minplayer.display.call(this, 'image', 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 // Call the media display constructor. 40 minplayer.display.prototype.construct.call(this); 41 42 // Set the plugin name within the options. 43 this.options.pluginName = 'image'; 44 45 // Set the container to not show any overflow... 46 this.display.css('overflow', 'hidden'); 47 48 /** The loader for the image. */ 49 this.loader = new Image(); 50 51 /** Register for when the image is loaded within the loader. */ 52 this.loader.onload = (function(image) { 53 return function() { 54 image.loaded = true; 55 image.ratio = (image.loader.width / image.loader.height); 56 image.resize(); 57 image.trigger('loaded'); 58 }; 59 })(this); 60 61 // We are now ready. 62 this.ready(); 63 }; 64 65 /** 66 * Loads an image. 67 * 68 * @param {string} src The source of the image to load. 69 */ 70 minplayer.image.prototype.load = function(src) { 71 72 // First clear the previous image. 73 this.clear(function() { 74 75 // Create the new image, and append to the display. 76 this.display.empty(); 77 this.img = jQuery(document.createElement('img')).attr({src: ''}).hide(); 78 this.display.append(this.img); 79 this.loader.src = src; 80 this.img.attr('src', src); 81 }); 82 }; 83 84 /** 85 * Clears an image. 86 * 87 * @param {function} callback Called when the image is done clearing. 88 */ 89 minplayer.image.prototype.clear = function(callback) { 90 this.loaded = false; 91 if (this.img) { 92 this.img.fadeOut((function(image) { 93 return function() { 94 image.img.attr('src', ''); 95 image.loader.src = ''; 96 jQuery(this).remove(); 97 callback.call(image); 98 }; 99 })(this)); 100 } 101 else { 102 callback.call(this); 103 } 104 }; 105 106 /** 107 * Resize the image provided a width and height or nothing. 108 * 109 * @param {integer} width (optional) The width of the container. 110 * @param {integer} height (optional) The height of the container. 111 */ 112 minplayer.image.prototype.resize = function(width, height) { 113 width = width || this.display.parent().width(); 114 height = height || this.display.parent().height(); 115 if (width && height && this.loaded) { 116 117 // Get the scaled rectangle. 118 var rect = this.getScaledRect(this.ratio, { 119 width: width, 120 height: height 121 }); 122 123 // Now set this image to the new size. 124 if (this.img) { 125 this.img.attr('src', this.loader.src).css({ 126 marginLeft: rect.x, 127 marginTop: rect.y, 128 width: rect.width, 129 height: rect.height 130 }); 131 } 132 133 // Show the container. 134 this.img.fadeIn(); 135 } 136 }; 137 138 /** 139 * @see minplayer.display#onResize 140 */ 141 minplayer.image.prototype.onResize = function() { 142 143 // Resize the image to fit. 144 this.resize(); 145 }; 146