27 febrero 2010

Galería de imagen en ventanas modales con SlimBox

 

SlimBox es un Script que utiliza las ventanas modales de LightBox, pero a diferencia de este, SlimBox solo sirve para mostrar galería de imágenes o imágenes solas. La ventaja es que tu blog carga mas rápido a diferencia de que coloques todas las imágenes en el blog directamente, y ademas, se vera mucho mas atractivo para los visitantes a la hora de ver las fotos en el blog.

Esta aplicación utiliza para su funcionamiento a Mootools, el cual les explicare aqui como colocarlo en tu blog, pero si ya lo tienes incluido no es necesario hacerlo de nuevo. Entonces, empiezo a explicar.

[1] Ve a la Edicion HTML de tu blog y pega el siguiente codigo justo antes de </head> y guarda los cambios.

<script src='http://sites.google.com/site/frikibloggeo/archivos/mootools.js' type='text/javascript'/>

[2] Ahora, de nuevo, justo antes de </head> pega esto codigos y guarda los cambios.

<!-- SlimBox -->

<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/images/slimboxjs.js' type='text/javascript'/>
<link href='http://sites.google.com/site/frikibloggeo/archivos/slimboxcss.css' media='screen' rel='stylesheet' type='text/css'/>

<!-- /SlimBox -->

[3] Ahora, para aplicar el uso de una sola imagen, solo necesitas incluir el atributo rel="lightbox" en el link.

<a href="URL DE LA IMAGEN AQUI" rel="lightbox" title="TITULO DE LA IMAGEN">NOMBRE DE LA IMAGEN</a>



[4] Ahora, para mostrar galería de imágenes solo debes añadir el atributo rel="lightbox[nombredegrupo]"

<a href="URL DE IMAGEN" rel="lightbox[nombredegrupo]" title="TITULO DE LA IMAGEN">NOMBRE DE LA IMAGEN</a>

Para ver unas muestra haz click aqui

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo