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