c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe<h2>Basic Trigger examples</h2>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe<div class="intro">

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <p>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe Displayed here are some basic triggers of the ImageLoader Utility.

ed22c7109fc5dd9e1b7a5d0333bdc7ad2718e2abYuri Pankov Each image group has an assigned action that will make the group of image(s) appear.

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe </p>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe</div>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe<style>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe #group1, #group2, #group3, #group4 { border-bottom: dotted 1px #ccc;}

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe .yuiLogo { width:117px; height: 52px; border:1px solid #888; margin:5px;}

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe</style>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe<div class="example">

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <div id="group1">

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <h3>Group 1: Two second delay</h3>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <p>This will appear two seconds after page-load.</p>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <div class='yuiLogo' id='delay' title='Group 1: 2 sec limit'></div>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <h5>HTML</h5>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <div id='delay' title='Group 1: 2 sec limit'></div>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <h5>JavaScript</h5>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe var delayGroup = new Y.ImgLoadGroup({ timeLimit: 2 });

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe delayGroup.registerImage({ domId: 'delay', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe </div>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <div id="group2">

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <h3>Group 2: Window scroll event</h3>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <p>This will appear when the scroll event is fired.</p>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <div class='yuiLogo' title='Group 2: scroll'>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <img id='scroll' style='visibility:hidden;' />

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe </div>

ed22c7109fc5dd9e1b7a5d0333bdc7ad2718e2abYuri Pankov

ed22c7109fc5dd9e1b7a5d0333bdc7ad2718e2abYuri Pankov <h5>HTML</h5>

ed22c7109fc5dd9e1b7a5d0333bdc7ad2718e2abYuri Pankov ```

ed22c7109fc5dd9e1b7a5d0333bdc7ad2718e2abYuri Pankov <img id='scroll' style='visibility:hidden;' />

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

ed22c7109fc5dd9e1b7a5d0333bdc7ad2718e2abYuri Pankov

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe <h5>JavaScript</h5>

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe var scrollGroup = new Y.ImgLoadGroup();

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe scrollGroup.registerImage({ domId: 'scroll', srcUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true, setVisible: true });

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe scrollGroup.addTrigger(window, 'scroll');

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe ```

c10c16dec587a0662068f6e2991c29ed3a9db943Richard Lowe </div>

<div id="group3">

<h3>Group 3: Mouse over</h3>

<p>This will appear when you mouse over it.</p>

<div class='yuiLogo' id='mouseover' title='Group 3: mouseover'></div>

<h5>HTML</h5>

```

<div id='mouseover' title='Group 3: mouseover'></div>

```

<h5>JavaScript</h5>

```

var mouseoverGroup = new Y.ImgLoadGroup();

mouseoverGroup.registerImage({ domId: 'scroll', srcUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true, setVisible: true });

mouseoverGroup.addTrigger(window, 'scroll');

```

</div>

<div id="group4">

<h3>Group 4: Onclick</h3>

<p>These will appear when either one is clicked.</p>

<div class='yuiLogo' id='duo1' title='Group 4: onclick'></div>

<div class='yuiLogo' id='duo2' title='Group 4: onclick'></div>

<h5>HTML</h5>

```

<div id='duo1' title='Group 4: onclick'></div>

<div id='duo2' title='Group 4: onclick'></div>

```

<h5>JavaScript</h5>

```

var clickGroup = new Y.ImgLoadGroup();

clickGroup.registerImage({ domId: 'duo1', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

clickGroup.registerImage({ domId: 'duo2', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

clickGroup.addTrigger('#duo2', 'click').addTrigger('#duo1', 'click');

```

</div>

</div>

<script>

YUI().use("imageloader", function(Y) {

var delayGroup = new Y.ImgLoadGroup({ timeLimit: 2 });

delayGroup.registerImage({ domId: 'delay', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

var scrollGroup = new Y.ImgLoadGroup();

scrollGroup.addTrigger(window, 'scroll');

scrollGroup.registerImage({ domId: 'scroll', srcUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true, setVisible: true });

var mouseoverGroup = new Y.ImgLoadGroup();

mouseoverGroup.addTrigger('#mouseover', 'mouseover');

mouseoverGroup.registerImage({ domId: 'mouseover', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

var clickGroup = new Y.ImgLoadGroup();

clickGroup.addTrigger('#duo2', 'click').addTrigger('#duo1', 'click');

clickGroup.registerImage({ domId: 'duo1', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

clickGroup.registerImage({ domId: 'duo2', bgUrl: 'http://stage.yuilibrary.com/img/yui-logo.png', isPng: true });

});

</script>

<!--

<h2>Basic Features of the ImageLoader Utility</h2>

<p>

The ImageLoader Utility allows you to define the conditions under which images are loaded into the page.

This example demonstrates attaching some simple triggers to images to establish this load control.

</p>

<p>

The HTML used for the image needs little to no modification.

Simply make sure the <code>&lt;img&gt;</code> elements have <code>id</code> attributes, eliminate the <code>src</code> attribute

from <code>&lt;img&gt;</code> elements, and optionally set their <code>visibility</code> style to "hidden" .

```

<img id='image' style='visibility:hidden;' />

```

</p>

-->