MB Gallery jQuery – Galería de imágenes

MB Gallery jQuery es un recurso para implementar una galería de imágenes, esta posee una botonera con controles para avanzar y retroceder, reproducción continua de imágenes y mosaico que permite seleccionar directamente una de las imágenes.

El resultado final es muy bonito y su implementación, muy sencilla.

Cómo implementar MB Gallery

HTML

Para implementar esta galería, se necesita escribir o generar en el servidor, un código HTML similar a este:

<div id=”g1″ class=”galleryCont”>

<img class=”imgmini” src=”monumento-bandera-mini.jpg” alt=”" />
<img class=”imgreal” src=”monument-bandera.jpg” alt=”" />
<div class=”imgDesc”>Monumento a la Bandera - Rosario, Argentina</div>

<img class=”imgmini” src=”parque-espana-mini.jpg” alt=”" />
<img class=”imgreal” src="parque-espana.jpg” alt=”" />
<div class=”imgDesc”>Parque España - Rosario, Argentina</div>

<img class=”imgmini” src=”parque-independencia-mini" alt=”" />
<img class=”imgreal” src=”parque-independencia.jpg” alt=”" />
<div class=”imgDesc”>Parque Independencia - Rosario, Argentina”</div>

</div>

Es simplemente un DIV que contiene la galería en este caso con el ID=”g1″, cada imagen mostrada necesita una definición HMTL <img> com la imagen en miniatura (thumbnail) y otra con la imagen a tamaño real, más un DIV con el texto descriptivo.

Javascript

Primero hay que enlazar en el HEAD de la página las bibliotecas, para este caso, la biblioteca jQuery y el script para la galería:

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript" src="inc/mbGallery.js"></script>

La definición del tamaño de la imágenes, color de las etiquetas, comportamiento, etc., se realiza por medio de un Javascript como el siguiente (recordar que “g1” es ID que se definió en el DIV que contiene la galería):

<script type="text/javascript">
$(function(){
$("#g1").mbGallery( {
galleryMaxWidth:0,
galleryWidth:300,
galleryHeight:300,
galleryColor:"#333",
galleryFrameBorder: 12,
galleryFrameColor:"#fff",
thumbStripPos: "right",
thumbStripWidth:250,
thumbSelectColor: "#fff",
thumbOverColor : "#cccccc",
thumbStripColor: "#333333",
thumbsBorder: 4,
thumbHeight:50,
headerOpacity: .8,
labelColor: "#333333",
labelColorDisactive:"#333333",
labelTextColor: "#ffffff",
labelTextSize:"11px",
labelHeight:20,
startFrom:"random",
fadeTime: 500,
autoSlide:true,
autoSize : true,
slideTimer: 6000,
iconFolder: "elements/white",
startTimer:0
}
)}
);
</script>

CSS

También en el HEAD hay que enlazar el archivo con los estilos:

<link rel="stylesheet" href="CSS/mbGallery.css"/>

Mb Gallery, otra sencilla y elegante implementación con jQuery.

Mb Gallery:

• Web/descargar: pupunzi.wordpress.com/2009/02/28/mbgallery
• Demo: www.open-lab.com/mb.ideas/index.html#mbGallery

Nota: en la página del autor se encuentra este mismo ejemplo pero en inglés y el listado de parámetros Javascript para la configuración.