src_minplayer.image.js.html in HTML5 Media 7
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
File
player/doc/symbols/src/src_minplayer.image.js.html
View source
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
.KEYW {color: #933;}
.COMM {color: #bbb; font-style: italic;}
.NUMB {color: #393;}
.STRN {color: #393;}
.REGX {color: #339;}
.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
</style></head><body><pre><span class='line'> 1</span> <span class="COMM">/** The minplayer namespace. */</span><span class="WHIT">
<span class='line'> 2</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minplayer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 3</span>
<span class='line'> 4</span> </span><span class="COMM">/**
<span class='line'> 5</span> * @constructor
<span class='line'> 6</span> * @class A class to easily handle images.
<span class='line'> 7</span> * @param {object} context The jQuery context.
<span class='line'> 8</span> * @param {object} options This components options.
<span class='line'> 9</span> */</span><span class="WHIT">
<span class='line'> 10</span> </span><span class="NAME">minplayer.image</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">context</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 11</span>
<span class='line'> 12</span> </span><span class="WHIT"> </span><span class="COMM">// Determine if the image is loaded.</span><span class="WHIT">
<span class='line'> 13</span> </span><span class="WHIT"> </span><span class="NAME">this.loaded</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 14</span>
<span class='line'> 15</span> </span><span class="WHIT"> </span><span class="COMM">// The image loader.</span><span class="WHIT">
<span class='line'> 16</span> </span><span class="WHIT"> </span><span class="NAME">this.loader</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 17</span>
<span class='line'> 18</span> </span><span class="WHIT"> </span><span class="COMM">// The ratio of the image.</span><span class="WHIT">
<span class='line'> 19</span> </span><span class="WHIT"> </span><span class="NAME">this.ratio</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 20</span>
<span class='line'> 21</span> </span><span class="WHIT"> </span><span class="COMM">// The image element.</span><span class="WHIT">
<span class='line'> 22</span> </span><span class="WHIT"> </span><span class="NAME">this.img</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 23</span>
<span class='line'> 24</span> </span><span class="WHIT"> </span><span class="COMM">// Derive from display</span><span class="WHIT">
<span class='line'> 25</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.display.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'image'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">context</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 26</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 27</span>
<span class='line'> 28</span> </span><span class="COMM">/** Derive from minplayer.display. */</span><span class="WHIT">
<span class='line'> 29</span> </span><span class="NAME">minplayer.image.prototype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">minplayer.display</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 30</span>
<span class='line'> 31</span> </span><span class="COMM">/** Reset the constructor. */</span><span class="WHIT">
<span class='line'> 32</span> </span><span class="NAME">minplayer.image.prototype.constructor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer.image</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 33</span>
<span class='line'> 34</span> </span><span class="COMM">/**
<span class='line'> 35</span> * @see minplayer.plugin.construct
<span class='line'> 36</span> */</span><span class="WHIT">
<span class='line'> 37</span> </span><span class="NAME">minplayer.image.prototype.construct</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 38</span>
<span class='line'> 39</span> </span><span class="WHIT"> </span><span class="COMM">// Call the media display constructor.</span><span class="WHIT">
<span class='line'> 40</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.display.prototype.construct.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 41</span>
<span class='line'> 42</span> </span><span class="WHIT"> </span><span class="COMM">// Set the plugin name within the options.</span><span class="WHIT">
<span class='line'> 43</span> </span><span class="WHIT"> </span><span class="NAME">this.options.pluginName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'image'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 44</span>
<span class='line'> 45</span> </span><span class="WHIT"> </span><span class="COMM">// Set the container to not show any overflow...</span><span class="WHIT">
<span class='line'> 46</span> </span><span class="WHIT"> </span><span class="NAME">this.display.css</span><span class="PUNC">(</span><span class="STRN">'overflow'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'hidden'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 47</span>
<span class='line'> 48</span> </span><span class="WHIT"> </span><span class="COMM">/** The loader for the image. */</span><span class="WHIT">
<span class='line'> 49</span> </span><span class="WHIT"> </span><span class="NAME">this.loader</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Image</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 50</span>
<span class='line'> 51</span> </span><span class="WHIT"> </span><span class="COMM">/** Register for when the image is loaded within the loader. */</span><span class="WHIT">
<span class='line'> 52</span> </span><span class="WHIT"> </span><span class="NAME">this.loader.onload</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">image</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 53</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 54</span> </span><span class="WHIT"> </span><span class="NAME">image.loaded</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 55</span> </span><span class="WHIT"> </span><span class="NAME">image.ratio</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">image.loader.width</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">image.loader.height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 56</span> </span><span class="WHIT"> </span><span class="NAME">image.resize</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 57</span> </span><span class="WHIT"> </span><span class="NAME">image.trigger</span><span class="PUNC">(</span><span class="STRN">'loaded'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 58</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 59</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 60</span>
<span class='line'> 61</span> </span><span class="WHIT"> </span><span class="COMM">// We are now ready.</span><span class="WHIT">
<span class='line'> 62</span> </span><span class="WHIT"> </span><span class="NAME">this.ready</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 63</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 64</span>
<span class='line'> 65</span> </span><span class="COMM">/**
<span class='line'> 66</span> * Loads an image.
<span class='line'> 67</span> *
<span class='line'> 68</span> * @param {string} src The source of the image to load.
<span class='line'> 69</span> */</span><span class="WHIT">
<span class='line'> 70</span> </span><span class="NAME">minplayer.image.prototype.load</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">src</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 71</span>
<span class='line'> 72</span> </span><span class="WHIT"> </span><span class="COMM">// First clear the previous image.</span><span class="WHIT">
<span class='line'> 73</span> </span><span class="WHIT"> </span><span class="NAME">this.clear</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 74</span>
<span class='line'> 75</span> </span><span class="WHIT"> </span><span class="COMM">// Create the new image, and append to the display.</span><span class="WHIT">
<span class='line'> 76</span> </span><span class="WHIT"> </span><span class="NAME">this.display.empty</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 77</span> </span><span class="WHIT"> </span><span class="NAME">this.img</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">jQuery</span><span class="PUNC">(</span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">'img'</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">attr</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="NAME">src</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">hide</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 78</span> </span><span class="WHIT"> </span><span class="NAME">this.display.append</span><span class="PUNC">(</span><span class="NAME">this.img</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT"> </span><span class="NAME">this.loader.src</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">src</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 80</span> </span><span class="WHIT"> </span><span class="NAME">this.img.attr</span><span class="PUNC">(</span><span class="STRN">'src'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">src</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 81</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 82</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 83</span>
<span class='line'> 84</span> </span><span class="COMM">/**
<span class='line'> 85</span> * Clears an image.
<span class='line'> 86</span> *
<span class='line'> 87</span> * @param {function} callback Called when the image is done clearing.
<span class='line'> 88</span> */</span><span class="WHIT">
<span class='line'> 89</span> </span><span class="NAME">minplayer.image.prototype.clear</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 90</span> </span><span class="WHIT"> </span><span class="NAME">this.loaded</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.img</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT"> </span><span class="NAME">this.img.fadeOut</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">image</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 93</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT"> </span><span class="NAME">image.img.attr</span><span class="PUNC">(</span><span class="STRN">'src'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 95</span> </span><span class="WHIT"> </span><span class="NAME">image.loader.src</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 96</span> </span><span class="WHIT"> </span><span class="NAME">jQuery</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">remove</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 97</span> </span><span class="WHIT"> </span><span class="NAME">callback.call</span><span class="PUNC">(</span><span class="NAME">image</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 98</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 99</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>100</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>101</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>102</span> </span><span class="WHIT"> </span><span class="NAME">callback.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>103</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>104</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>105</span>
<span class='line'>106</span> </span><span class="COMM">/**
<span class='line'>107</span> * Resize the image provided a width and height or nothing.
<span class='line'>108</span> *
<span class='line'>109</span> * @param {integer} width (optional) The width of the container.
<span class='line'>110</span> * @param {integer} height (optional) The height of the container.
<span class='line'>111</span> */</span><span class="WHIT">
<span class='line'>112</span> </span><span class="NAME">minplayer.image.prototype.resize</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>113</span> </span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">this.display.parent</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">width</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>114</span> </span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">this.display.parent</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">height</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>115</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.loaded</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>116</span>
<span class='line'>117</span> </span><span class="WHIT"> </span><span class="COMM">// Get the scaled rectangle.</span><span class="WHIT">
<span class='line'>118</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getScaledRect</span><span class="PUNC">(</span><span class="NAME">this.ratio</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>119</span> </span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>120</span> </span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT">
<span class='line'>121</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>122</span>
<span class='line'>123</span> </span><span class="WHIT"> </span><span class="COMM">// Now set this image to the new size.</span><span class="WHIT">
<span class='line'>124</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.img</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>125</span> </span><span class="WHIT"> </span><span class="NAME">this.img.attr</span><span class="PUNC">(</span><span class="STRN">'src'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.loader.src</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">css</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>126</span> </span><span class="WHIT"> </span><span class="NAME">marginLeft</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">rect.x</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>127</span> </span><span class="WHIT"> </span><span class="NAME">marginTop</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">rect.y</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>128</span> </span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">rect.width</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>129</span> </span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">rect.height</span><span class="WHIT">
<span class='line'>130</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>131</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>132</span>
<span class='line'>133</span> </span><span class="WHIT"> </span><span class="COMM">// Show the container.</span><span class="WHIT">
<span class='line'>134</span> </span><span class="WHIT"> </span><span class="NAME">this.img.fadeIn</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>135</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>136</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>137</span>
<span class='line'>138</span> </span><span class="COMM">/**
<span class='line'>139</span> * @see minplayer.display#onResize
<span class='line'>140</span> */</span><span class="WHIT">
<span class='line'>141</span> </span><span class="NAME">minplayer.image.prototype.onResize</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>142</span>
<span class='line'>143</span> </span><span class="WHIT"> </span><span class="COMM">// Resize the image to fit.</span><span class="WHIT">
<span class='line'>144</span> </span><span class="WHIT"> </span><span class="NAME">this.resize</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>145</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>146</span> </span></pre></body></html>
