viewer - mootools

viewer, plugin (clase) para mootools 1.2. Es un visor de diapositivas (slideshow), la que puedes usar para mostrar galerías de imágenes (image slideshow, image gallery) o secciones de tu web.

_class.viewer.packed.js (1.95kb)

Descargar:

- viewer (rev.06-07-08)
- changelog

Relacionado:

- noobSlide
- mootools plugins

Sample 1

Opciones por defecto. Elije un efecto al azaar ( mode: 'rand' ) de entre los 5 modos disponibles ( modes: ['top','right','bottom','left','alpha'] ) y avanza cada 5 segundos ( interval: 5000 ).

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

Sample 2

Sólo en modo alpha y en intervalos de 2 segundos.

Agregados 2 controles ( 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

Cuando el parámetro mode es un array, los elementos serán la secuencia del efecto de transición, para este ejemplo la secuencia será: primero arriba, luego abajo, luego arriba, etc (mode: ['top','bottom']).

Agregados 2 controles ( 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

En este ejemplo, el efecto de transición se tomará al azaar ( mode: 'rand' ) de entre los 3 modos disponibles ( 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

A las opciones por defecto le agregamos el evento onWalk, que se dispara luego de que termine la transición, recibe un único parámetro ( current_index ) que es el índice actual de los items.

Agregamos handles, primero los guardamos en una variable ( var handles5 = $$('#handles5 span') ), luego le asignamos la acción/método walk de la instancia (viewer) correspondiente; luego en el evento onWalk actualizamos sus propiedades.

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

download viewer (rev.06-07-08)