|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: ImageLoader: Using ImageLoader with CSS Class Names</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
|
|
|
18 |
<!--there is no custom header content for this example--> |
|
|
19 |
|
|
|
20 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
21 |
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script> |
|
|
22 |
|
|
|
23 |
</head> |
|
|
24 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
25 |
<div id="custom-doc" class="yui-t2"> |
|
|
26 |
<div id="hd"> |
|
|
27 |
<div id="ygunav"> |
|
|
28 |
<p> |
|
|
29 |
<em> |
|
|
30 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
31 |
</em> |
|
|
32 |
</p> |
|
|
33 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
34 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
35 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
36 |
<div id="sitesearch"> |
|
|
37 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
38 |
<input type="text" id="searchinput" name="p"> |
|
|
39 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
40 |
</div> |
|
|
41 |
</form> |
|
|
42 |
</div> |
|
|
43 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
44 |
<div id="pagetitle"><h1>YUI Library Examples: ImageLoader: Using ImageLoader with CSS Class Names</h1></div> |
|
|
45 |
</div> |
|
|
46 |
<div id="bd"> |
|
|
47 |
|
|
|
48 |
|
|
|
49 |
<div id="yui-main"> |
|
|
50 |
<div class="yui-b"> |
|
|
51 |
<div class="yui-ge"> |
|
|
52 |
<div class="yui-u first example" id="main"> |
|
|
53 |
|
|
|
54 |
<h2>ImageLoader: Using ImageLoader with CSS Class Names</h2> |
|
|
55 |
|
|
|
56 |
<div id="example" class="promo"> |
|
|
57 |
<div class="example-intro"> |
|
|
58 |
<p>The <a href="http://developer.yahoo.com/yui/imageloader/">ImageLoader Utility</a> allows you an alternate method of using CSS class names to load images.</p> |
|
|
59 |
|
|
|
60 |
<p>Hover over each image to show its triggers and limit. Try tripping the triggers to see the load reactions. Refresh the page to reset the images.</p> |
|
|
61 |
|
|
|
62 |
</div> |
|
|
63 |
|
|
|
64 |
<div class="module example-container "> |
|
|
65 |
<div class="hd exampleHd"> |
|
|
66 |
<p class="newWindowButton yui-skin-sam"> |
|
|
67 |
<a href="imageloader-class_clean.html" target="_blank">View example in new window.</a> |
|
|
68 |
</p> |
|
|
69 |
</div> <div id="example-canvas" class="bd"> |
|
|
70 |
|
|
|
71 |
|
|
|
72 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
73 |
|
|
|
74 |
<style> |
|
|
75 |
|
|
|
76 |
.everything { position:relative; height:420px; } |
|
|
77 |
.everything div { border:1px solid #888; } |
|
|
78 |
.topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; } |
|
|
79 |
.duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; } |
|
|
80 |
.duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; } |
|
|
81 |
.scroll { position:absolute; top:320px; left:120px; height:72px; width:100px; } |
|
|
82 |
|
|
|
83 |
.yui-imgload-maingroup, |
|
|
84 |
.yui-imgload-duogroup, |
|
|
85 |
.yui-imgload-scrollgroup |
|
|
86 |
{ background:none !important; } |
|
|
87 |
|
|
|
88 |
</style> |
|
|
89 |
|
|
|
90 |
|
|
|
91 |
<div class='everything' id='everything'> |
|
|
92 |
<div class='topmain yui-imgload-maingroup' id='topmain' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");' title='group 1; mouseover image; 2 sec limit'></div> |
|
|
93 |
<div class='duo1 yui-imgload-duogroup' id='duo1' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");' title='group 2; mouseover left image, or click on right image; 4 sec limit'></div> |
|
|
94 |
<div class='duo2 yui-imgload-duogroup' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");' title='group 2; mouseover left image, or click on right image; 4 sec limit'></div> |
|
|
95 |
<div class='scroll' title='group 3; scroll; no time limit'> |
|
|
96 |
<img id='scrollImg' class='yui-imgload-scrollgroup' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");' src='http://l.yimg.com/a/i/us/tr/b/1px_trans.gif' width='100' height='72' /> |
|
|
97 |
</div> |
|
|
98 |
</div> |
|
|
99 |
|
|
|
100 |
|
|
|
101 |
<script> |
|
|
102 |
|
|
|
103 |
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {imageloader:true, example:true}}).use("imageloader", function(Y) { |
|
|
104 |
|
|
|
105 |
var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2, className: 'yui-imgload-maingroup' }); |
|
|
106 |
mainGroup.addTrigger('#topmain', 'mouseover'); |
|
|
107 |
|
|
|
108 |
var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4, className: 'yui-imgload-duogroup' }); |
|
|
109 |
duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); |
|
|
110 |
|
|
|
111 |
var scrollGroup = new Y.ImgLoadGroup({ name: 'group 3', className: 'yui-imgload-scrollgroup' }); |
|
|
112 |
scrollGroup.addTrigger(window, 'scroll'); |
|
|
113 |
|
|
|
114 |
}); |
|
|
115 |
|
|
|
116 |
</script> |
|
|
117 |
|
|
|
118 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
119 |
|
|
|
120 |
|
|
|
121 |
</div> |
|
|
122 |
</div> |
|
|
123 |
</div> |
|
|
124 |
|
|
|
125 |
<h2 class='first'>Using CSS Class Names to Load Images</h2> |
|
|
126 |
|
|
|
127 |
<p>Look familiar? These are the same images and triggers as the Basic Features example (with the weather image omitted). The only difference is the manner in which we're loading the images on the back end.</p> |
|
|
128 |
|
|
|
129 |
<p>Insead of registering specific image ids/URLs with a group, you can simply tag the group with a CSS class. The group will later use this class name to identify which DOM elements belong to the group. Each group should have one corresponding class. Each class must have a <code>background:none</code> CSS definition at the top of the page, as in this example:</p> |
|
|
130 |
|
|
|
131 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1">.yui-imgload-maingroup<span class="sy0">,</span></div></li><li class="li1"><div class="de1">.yui-imgload-duogroup<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-imgload-scrollgroup</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span> <span class="kw1">background</span><span class="sy0">:</span><span class="kw2">none</span> !important<span class="sy0">;</span> <span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;">.yui-imgload-maingroup<span class="sy0">,</span> |
|
|
132 |
.yui-imgload-duogroup<span class="sy0">,</span> |
|
|
133 |
<span class="re1">.yui-imgload-scrollgroup</span> |
|
|
134 |
<span class="br0">{</span> <span class="kw1">background</span><span class="sy0">:</span><span class="kw2">none</span> !important<span class="sy0">;</span> <span class="br0">}</span></pre></div><textarea id="syntax1-plain">.yui-imgload-maingroup, |
|
|
135 |
.yui-imgload-duogroup, |
|
|
136 |
.yui-imgload-scrollgroup |
|
|
137 |
{ background:none !important; }</textarea></div> |
|
|
138 |
<p>Here is the HTML for the images:</p> |
|
|
139 |
|
|
|
140 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'topmain yui-imgload-maingroup'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'topmain'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo1 yui-imgload-duogroup'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo1'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo2 yui-imgload-duogroup'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo2'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'scroll'</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">img</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'scrollImg'</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'yui-imgload-scrollgroup'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");'</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">'http://l.yimg.com/a/i/us/tr/b/1px_trans.gif'</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">'100'</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">'72'</span> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'topmain yui-imgload-maingroup'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'topmain'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
141 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo1 yui-imgload-duogroup'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo1'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
142 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo2 yui-imgload-duogroup'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo2'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
143 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'scroll'</span>></span> |
|
|
144 |
<span class="sc2"><<span class="kw2">img</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'scrollImg'</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'yui-imgload-scrollgroup'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");'</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">'http://l.yimg.com/a/i/us/tr/b/1px_trans.gif'</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">'100'</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">'72'</span> <span class="sy0">/</span>></span> |
|
|
145 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax2-plain"> <div class='topmain yui-imgload-maingroup' id='topmain' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");'></div> |
|
|
146 |
<div class='duo1 yui-imgload-duogroup' id='duo1' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");'></div> |
|
|
147 |
<div class='duo2 yui-imgload-duogroup' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");'></div> |
|
|
148 |
<div class='scroll'> |
|
|
149 |
<img id='scrollImg' class='yui-imgload-scrollgroup' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");' src='http://l.yimg.com/a/i/us/tr/b/1px_trans.gif' width='100' height='72' /> |
|
|
150 |
</div></textarea></div> |
|
|
151 |
<p>A few things to note. First, the images have class names matching those in the style definitions above.</p> |
|
|
152 |
|
|
|
153 |
<p>Second, the image URL is set in the <code>background-image</code> of the elements. The <code>background:none</code> defined earlier in the CSS will be removed by the ImageLoader Utility JavaScript when the images are eventually loaded.</p> |
|
|
154 |
|
|
|
155 |
<p>Third, since the <code><img></code> element displays its images through the <code>background-image</code>, its size won't change when the image is loaded. Therefore the <code>width</code>/<code>height</code> needs to be set in the HTML. And since that gives the image a substantial size, the browsers would show a missing-image icon if the <code>src</code> attribute were not specified. Therefore we need to set one; a transparent one so that the background image will show through.</p> |
|
|
156 |
|
|
|
157 |
<p>This brings up an important limitation with this approach: you cannot alter the natural size of the image. Because the image is displayed as a background image, the browser will not resize the image according to the <code>width</code>/<code>height</code> of the <code><img></code> element.</p> |
|
|
158 |
|
|
|
159 |
<p>Now let's turn to the JavaScript. Since the image URLs are already specified in the HTML, we don't need them in the JS. All each group needs to know is the CSS class name that will identify the images.</p> |
|
|
160 |
|
|
|
161 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> mainGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 1'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">2</span><span class="sy0">,</span> className<span class="sy0">:</span> <span class="st0">'yui-imgload-maingroup'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">mainGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#topmain'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> duoGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 2'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">4</span><span class="sy0">,</span> className<span class="sy0">:</span> <span class="st0">'yui-imgload-duogroup'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">duoGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo1'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span>.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo2'</span><span class="sy0">,</span> <span class="st0">'click'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> scrollGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 3'</span><span class="sy0">,</span> className<span class="sy0">:</span> <span class="st0">'yui-imgload-scrollgroup'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">scrollGroup.<span class="me1">addTrigger</span><span class="br0">(</span>window<span class="sy0">,</span> <span class="st0">'scroll'</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> mainGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 1'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">2</span><span class="sy0">,</span> className<span class="sy0">:</span> <span class="st0">'yui-imgload-maingroup'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
162 |
mainGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#topmain'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
163 |
|
|
|
164 |
<span class="kw2">var</span> duoGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 2'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">4</span><span class="sy0">,</span> className<span class="sy0">:</span> <span class="st0">'yui-imgload-duogroup'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
165 |
duoGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo1'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span>.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo2'</span><span class="sy0">,</span> <span class="st0">'click'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
166 |
|
|
|
167 |
<span class="kw2">var</span> scrollGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 3'</span><span class="sy0">,</span> className<span class="sy0">:</span> <span class="st0">'yui-imgload-scrollgroup'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
168 |
scrollGroup.<span class="me1">addTrigger</span><span class="br0">(</span>window<span class="sy0">,</span> <span class="st0">'scroll'</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2, className: 'yui-imgload-maingroup' }); |
|
|
169 |
mainGroup.addTrigger('#topmain', 'mouseover'); |
|
|
170 |
|
|
|
171 |
var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4, className: 'yui-imgload-duogroup' }); |
|
|
172 |
duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); |
|
|
173 |
|
|
|
174 |
var scrollGroup = new Y.ImgLoadGroup({ name: 'group 3', className: 'yui-imgload-scrollgroup' }); |
|
|
175 |
scrollGroup.addTrigger(window, 'scroll');</textarea></div> |
|
|
176 |
<p>Note that you are free to combine this class-name approach with the other. The same group can have some images identified by class name and others by registering ids/URLs.</p> |
|
|
177 |
</div> |
|
|
178 |
<div class="yui-u sidebar"> |
|
|
179 |
|
|
|
180 |
|
|
|
181 |
<div id="examples" class="mod box4"> |
|
|
182 |
<div class="hd"> |
|
|
183 |
<h4> |
|
|
184 |
ImageLoader Examples:</h4> |
|
|
185 |
</div> |
|
|
186 |
<div class="bd"> |
|
|
187 |
<ul> |
|
|
188 |
<li><a href='../imageloader/imageloader-basics.html'>Basic Features of the ImageLoader Utility</a></li><li><a href='../imageloader/imageloader-fold.html'>Loading Images Below the Fold</a></li><li class='selected'><a href='../imageloader/imageloader-class.html'>Using ImageLoader with CSS Class Names</a></li> </ul> |
|
|
189 |
</div> |
|
|
190 |
</div> |
|
|
191 |
|
|
|
192 |
<div class="mod box4"> |
|
|
193 |
<div class="hd"> |
|
|
194 |
<h4>More ImageLoader Resources:</h4> |
|
|
195 |
</div> |
|
|
196 |
<div class="bd"> |
|
|
197 |
<ul> |
|
|
198 |
<!-- <li><a href="http://developer.yahoo.com/yui/imageloader/">User's Guide</a> (external)</li> --> |
|
|
199 |
<li><a href="../../api/module_imageloader.html">API Documentation</a></li></ul> |
|
|
200 |
</div> |
|
|
201 |
</div> |
|
|
202 |
</div> |
|
|
203 |
</div> |
|
|
204 |
|
|
|
205 |
</div> |
|
|
206 |
</div> |
|
|
207 |
|
|
|
208 |
|
|
|
209 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
210 |
<!-- TABLE OF CONTENTS --> |
|
|
211 |
<div id="toc"> |
|
|
212 |
|
|
|
213 |
<ul> |
|
|
214 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="selected "><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
|
215 |
</div> |
|
|
216 |
</div> |
|
|
217 |
</div><!--closes bd--> |
|
|
218 |
|
|
|
219 |
<div id="ft"> |
|
|
220 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
221 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
222 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
223 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
224 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
225 |
</div> |
|
|
226 |
</div> |
|
|
227 |
<script language="javascript"> |
|
|
228 |
var yuiConfig = {base:"../../build/", timeout: 10000, filter:"debug", logInclude: {imageloader:true, example:true}}; |
|
|
229 |
</script> |
|
|
230 |
<script src="../../assets/syntax.js"></script> |
|
|
231 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
232 |
<script language="javascript"> |
|
|
233 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
234 |
</script> |
|
|
235 |
</body> |
|
|
236 |
</html> |