mooslidebox.jpg

mooSlideBox v3 un pequeño script que podremos usar como extensión o bien como reemplazo del tradicional "lightbox". Creo que entonces es fácil deducir que mooSlideBox v3 nos permitirá lograr un efecto similar al logrado con lightbox. Solo que mooSlideBox presenta algunas variantes u otra buena forma de mostrar otro tipo de contenido, algo que podrá ser útil, sobre todo relacionado a porfolios y ese tipo de cosas. Básicamente nos permite luego de dar un click en un enlace, abrir un Div flotador en el cual podremos mostrar nuestras fotos y a la vez agregar una descripción larga y un titulo relacionado a esa imagen. La parte visual desde ya es muy agradable, mas aun, el efecto que se produce al hacer aparecer este div flotador o bien lightbox. mooSlideBox funciona en IE 6 / 7, Opera y Firefox.

Ver Demo Funcionando - Descarga mi ejemplo (contiene todos los archivos) - Web mooSlideBox v3

Instalacion:

Lo primero sera descargar las librerias necesearias mootools.js y mooSlideX.js

Realizaremos la llamada correspondiente a mootools, copiando y pegando el siguiente código dentro de nuestras etiquetas < Head > ….< / Head > ( en wordpress seria en el archivo Header.php).

PLAIN TEXT
JavaScript:
<script language="javascript" type="text/ecmascript" src="mootools.js"></script>

Para mostrar en un enlace el deslizador con una imagen, un título y una descripción de texto, podemos hacerlo llamando de esta manera:

PLAIN TEXT
HTML:
<a href="images/foto2.jpg" rel="designSlide" rev="mycontent" title="Clickideas V2::Este es otro de los diseños creados, y que es el que seguramente estará unos meses online hasta terminar el que en realidad será el definitivo. Lo que me ha agradado de este, es que mas haya de lo elementos agregados en el diseño, ha quedado bastante limpio, sobre todo con los tonos pensados desde el principio. Eso si aun falta terminar detalles, pero la idea es básicamente lo que ven en esta previa."> Clickideas V2</a>

<script language="javascript" type="text/ecmascript" src="mooSlideX.js">
</script>

Es decir que a nuestros enlaces añadimos la etiqueta rel = "designSlide". La diapositiva puede contener un título y una descripción. En el atributo “title” agregamos el nombre de titulo, separándolo de la descripción con un "::". Inclusive se puede ver que la llamada al script mooSlideBox lo haremos desde aquí.