KWICKS: PLUGIN JQUERY PARA IMÁGENES DESLIZANTES

Esta librería que funciona con jQuery es muy resultona para sitios que necesiten mostrar imágenes en un espacio reducido. Se llama Kwicks y facilita la conversión de una lista en paneles deslizantes que dejan mostrar sólo una porción de su contenido hasta que se hace hover sobre alguno, momento en el que suavemente se amplía su ancho para que se vea con la medida que previamente hemos indicado.

descargar la  plantilla aquí

Si sigues por aquí es que posiblemente te interesa, así que vamos a ver cómo poner todo en nuestro blog.

En primer lugar necesitamos tener jQuery en la plantilla con una versión igual o superior a la 1.7. Si no es así añadimos antes del </head> una línea como esta. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

A continuación, en ese mismo lugar, tendríamos que insertar la llamada al plugin. Lo podéis descargar desde este enlace: jquery.kwicks.js

<script src='DIRECCION_JQUERY.KWICKS.JS' type='text/javascript'></script>

Ahora ya podemos crear nuestra lista de imágenes dentro de un gadget o en una página. En ambos casos el código tendrá la misma esctructura: los parámetros para la galería y después una lista de imágenes bajo la clase kwicks. Tal que así:

<script type="text/javascript">

$(function() {

$('.kwicks').kwicks({

size: 130,

maxSize : 500,

spacing : 5,

behavior: 'menu'

});

});

</script>

<div class="kwicks kwicks-horizontal">

<li class="kwik"><img src="URL_IMAGEN1"/><div class="kwikmet">TEXTO1</div></li>

<li class="kwik"><img src="URL_IMAGEN2"/><div class="kwikmet">TEXTO2</div></li>

<li class="kwik"><img src="URL_IMAGEN3"/><div class="kwikmet">TEXTO3</div></li>

</div>

size: ancho visible inicialmente

maxSize : ancho tras hacer hover

spacing : espacio entre paneles

behavior: tipo galería

Y ya sólo nos falta el estilo, que podemos ponerlo en esa misma página o gadget entre etiquetas style... o sin ellas si accedemos de nuevo a la plantilla y lo ponemos en la parte CSS. Aquí están incluidas para que se pueda poner el código a continuación del anterior:

<style type="text/css">

.kwicks {

display: block;

list-style-type: none;

list-style: none;

position: relative;

margin: 0;

padding: 0;

}

.kwicks > * {

display: block;

overflow: hidden;

padding: 0;

margin: 0;

}

.kwicks.kwicks-processed > * {

margin: 0;

position: absolute;

}

.kwicks-horizontal > * {

float: left;

}

.kwicks-horizontal > :first-child {

margin-left: 0;

}

.kwicks-vertical > :first-child {

margin-top: 0;

}

.kwicks {

width: 1000px;

height: 300px;

}

.kwicks > a, .kwicks > img, .kwicks > li {

width: 500px;

height: 300px;

/* overridden by kwicks but good for when JavaScript is disabled */

margin-left: 5px;

float: left;

}

.kwikmet{

position:absolute;

opacity:0;

bottom:10px;

left:10px;

right:10px;

background-color:rgba(0,0,0,.7);

padding:10px;

width:500px;

color:#888;

transition: opacity .5s;

}

.kwicks li:hover .kwikmet {

opacity:1;

transition: opacity 1s;

}

</style>

En la página de referencia podéis encontrar más información y modo demostración el código básico que se necesita para configurar el plugin para otras versiones distintas: vertical, slider automático, mantener desplegado con clic,... 

Actualización:

Y si queréis ver cómo hacer esto mismo con CSS y una comparativa de recursos utilizados con uno y otro sistema, no dejéis de ver el enlace anterior que os remite a una entrada sobre el tema de KsesoCss.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo?

Cortesía Oloman