Plugins imprescindibles para Jquery – slideViewer

Bienvenidos a la segunda entrega de la  serie Plugins imprescindibles para Jquery en esta ocasión os hablare del plugin de jquery slideViewer.

SlideViewer es un plugin de jquery cuya utilidad es la de generarnos a partir de una lista html de imagenes una galeria de imagenes con una interficie y transiciones atractivas.

jQuery slideViewer

SlideViewer nos permite modifiar su aspecto desde la hoja de estilos pudiendose adaptar de esta manera al diseño de nuestra interficie.

Ejemplo Simple

Dentro del tag HEAD

jQuery(function(){jQuery("div#<code>ejemploSlideviewId</code>").slideView({toolTip: false});

Dentro del tag BODY

<ul>
<li><img src="img1.jpg" alt="alt img 1" /></li>
<li><img src="img2.jpg" alt="alt img 2" /></li>
<li><img src="img3.jpg" alt="alt img 3" /></li>
<li><img src="img4.jpg" alt="alt img 4" /></li>
<!--eccetera-->
</ul>
</div>

Tambien podemos usar slideViewer con otros plugins como jQuery lightBox plugin (del que os hablare en un próximo articulo) para usar slidwViewer como visor de vistas en miniatura y máximizarlas con lightBox dotando a nuestra interficie de una sencillez y elegancia dignas del Iphone .

SlideViewer interactuando con Ligthbox

Ejemplo con LigthBox

Dentro del tag HEAD

jQuery(function(){
jQuery("div#<code>ejemploSlideviewId</code>").slideView({toolTip: false});
jQuery("div#<code>ejemploSlideviewId</code>").lightBox({fixedNavigation:true});
});

Dentro del tag BODY

<div id="ejemploSlideviewId">
<ul>
<a href="rutaimg1" title="title img1"><li><img src="img1.jpg" alt="alt img 1" /></li></a>
<a href="rutaimg1" title="title img1"><li><img src="img2.jpg" alt="alt img 2" /></li></a>
<a href="rutaimg1" title="title img1"><li><img src="img3.jpg" alt="alt img 3" /></li></a>
<a href="rutaimg1" title="title img1"><li><img src="img4.jpg" alt="alt img 4" /></li></a>
 <!--eccetera-->
</ul>
</div>