Utilidades para tu Sitio Web: GSlide

¿Qué es?

GSlide es un script que sirve para mostrar imágenes de forma secuencial a manera de presentación en una página web.

Usando GSlide

HTML

Solo se requiere un elemento DIV que servirá como contenedor.

<div id="slide"></div>

CSS

Aunque no es necesario, es preferible establecer inicialmente las dimensiones del contenedor de forma que al cargar la página se observe el espacio asignado.

#slide { width:400px; height:300px; }

Javascript

Para el funcionamiento se requiere incluir el framework jquery.

El siguiente paso es crear un nuevo objeto “slide” indicando el id del DIV contenedor (container), su ancho (width), su alto (height) y cuanto tiempo tardará en cambiar de imagen (delay).

var slide = new GSlide({container:'#slide', width:400, height:300, delay:3000});

Luego podemos agregar las imágenes que queramos, las cuales deben tener las mismas dimensiones del DIV contenedor; opcionalmente podemos agregar un enlace y un título para cada imagen.

slide.addSlide('img/foto1.jpg', '#', '');
slide.addSlide('img/foto2.jpg', 'http://gruposistemas.com', 'Web Profesional &amp; Creativa');
...

Finalmente se inicia el slide

slide.showSlide();

Ejemplos

Sitios Web que usan GSlide:

Código fuente

var GSlide = function(params){
var params = params || {};

var container = params.container;
var width = params.width;
var height = params.height;
var delay = params.delay;

var count = 0;
var slides = new Array();
var actual = 0;

var entrante = document.createElement('a');
var saliente = document.createElement('a');

/* init */
jQuery(container).css({'position':'relative', 'width':width + 'px', 'height':height + 'px'});
jQuery(entrante).css({'position':'absolute', 'z-index':'20'}).html('<img />');
jQuery(saliente).css({'position':'absolute', 'z-index':'30'}).html('<img />');
jQuery(container).append(entrante).append(saliente);

this.addSlide = function(src, href, title){
slides[count++] = {src:src, href:href, title:title};
}

function loadSlide(){
jQuery(entrante).children('img').attr('src', slides[actual]['src']);
actual = (actual + 1) % count;
var href = slides[actual]['href'];
var title = slides[actual]['title'];
var src = slides[actual]['src'];
var img = new Image();
jQuery(img).load(function(){
jQuery(saliente).css({opacity:0.0});
setData(saliente, src, href, title);
jQuery(saliente).animate({opacity:1.0}, 1000);
}).attr('src', src);
}

function setData(slide, src, href, title){
jQuery(slide).attr('href', href);
jQuery(slide).attr('title', title);
jQuery(slide).children('img').attr('src', src);
}

this.showSlide = function(){
setData(saliente, slides[0]['src'], slides[0]['href'], slides[0]['title']);
setInterval(loadSlide, delay);
}
}

Autor: Alain

Especialista en desarrollo de aplicaciones web

Un comentario en “Utilidades para tu Sitio Web: GSlide”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *