viewer - mootools

Sample 1

Default ( mode: 'rand' ) among the 5 ways available ( modes: ['top','right','bottom','left','alpha'] ) and advances every 5 seconds ( interval: 5000 ).

new viewer($$('#box1 img)')).play(true);

Sample 2

Only in way alpha and intervals of 2 seconds.

Added 2 controls ( play, stop ).

var V2 = new viewer($$('#box2 img)'),{
	mode: 'alpha',
	interval: 2000
});
$('play2').addEvent('click',V2.play.bind(V2,[false]));
$('stop2').addEvent('click',V2.stop.bind(V2));

Play > Stop

Sample 3

When the parameter mode is an Array, the elements will be the sequence of the transition effect, for this example the sequence will be: first above, soon down, soon above, etcc (mode: ['top','bottom']).

Added 2 controls ( previous, next ).

var V3 = new viewer($$('#box3 img)'),{
	mode: ['top','bottom']
});
$('prev3').addEvent('click',V3.previous.bind(V3));
$('next3').addEvent('click',V3.next.bind(V3));

<< Previous Next >>

Sample 4

In this example, the transition effect will take when azaar (mode: “rand”) among the 3 ways available ( modes: ['left','right','alpha'] )

var V4 = new viewer($$('#box4 img)'),{
	mode: 'rand',
	modes: ['left','right','alpha']
});
$('next4').addEvent('click',V4.next.bind(V4));

Next >>

Sample 5

To the defaults we added the event to him onWalk, that goes off after that finishes the transition, receives a unique parameter (current_index) that is the present index of the items.

We add handles, we kept first them in a variable (bar handles5 = $$ (“#handles5 span”)), soon we assigned to the action/method to him walk of the instance (to viewer) corresponding; soon in the event onWalk we updated its properties.

var V5 = new viewer($('box5').getChildren(),{
	onWalk: function(current_index){
		handles5.removeClass('active');
		handles5[current_index].addClass('active');
	}
});
var handles5 = $$('#handles5 span');
handles5.each(function(el,i){el.addEvent('click',V5.walk.bind(V5,[i,true]));});

1. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.

Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.

2. Nullam porttitor tortor et sem

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.

Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.

Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.

3. Aenean consectetuer nibh sedt

Duis consequat laoreet libero.
Nullam scelerisque porta arcu.
Praesent ut tortor quis nunc vehicula interdum.
Cras ultrices venenatis justo.
Duis eu ligula at justo tempus varius.
Vivamus mattis ante et arcu.
Nulla eleifend dignissim neque.
Donec ut elit vel nisi mollis volutpat.

4. Pellentesque ac dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.

5. Pellentesque ac dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.

Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.

1. Uno 2. Dos 3. Tres 4. Cuatro 5. Cinco