Kwicks: Plugin jQuery para imágenes deslizantes | Oloblogger Esta librería que funciona con jQuery es muy resultona para sitios que necesiten mostrar imágenes en...

22 de diciembre de 2012

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.

Antes de seguir leyendo se puede ver el efecto en esta página de pruebas bajo el título del blog.



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? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

21 comentarios :

  1. tan solo darte las gracias por estos estupendos artículos (que vienen fenomenal), y desearte unas estupendas fiestas y lo mejor para este año que entra, a ti y a tus seres queridos

    besos,

    ResponderEliminar
  2. Lo bueno de estas realizaciones es que sirven para darse cuenta de la sencillez y potencia de otras vías. Amén de así poder escoger cada uno lo que prefiera.

    En este caso veo un poco excesivo recurrir a toda una librería javascript (jquery) y otros varios js cuando con menos de 1kb de Css es posible lograr lo mismo. Incluyendo prefijos privativos para transition.

    N.B.: así nadie me acusa de sólo decírtelo por twitter xD xD~

    ResponderEliminar
    Respuestas
    1. Nadie lo iba a hacer. Ya vi tu post, así que como me parece interesante, actualizaré esté. Un saludo.

      Eliminar
  3. excelente master pero veo que las imagenes y los textos tendras que ponerlos de manera manual,no habra forma de que se automatise y coja los ultimos post algo asi como el efecto de featured o slider ?.

    ResponderEliminar
    Respuestas
    1. Seguro que hay forma e incluso tengo algunas pistas de cómo se hace. El problema es que todavía no sé cómo es exactamente y mucho menos podría explicarlo.

      Eliminar
  4. Hola, muy buena tu pagina, la siguiente pregunta no se refiere a este post pero seria d egran ayuda si me la respondieras; como haces para poner el mensaje arriba de esta caja de texto ( No olvides suscribirte a los comentarios .......) ,quiero implementarlo en mi blog y nose que hacer.
    gracias

    ResponderEliminar
  5. si quiero usarlo en la totalidad de mi monitor, hacerlo en %?

    ResponderEliminar
    Respuestas
    1. Creo que sí, que si cambias ese width: 1000px; por un 100%, el gadget lo ampliarás al tope del ancho disponible. El problema será al ajustar los parámetros size y maxsize del script, porque sospecho que no van a funcionar en %.

      Pero prueba, que no pierdes nada.

      Eliminar
  6. Gracias Oloman, intentaré ponerlo ;)

    ResponderEliminar
  7. Hola Oloblogger soy george spear de facebook

    y aqui mi pregunta que tengo... lo que quiero hacer yo es cambiar el estilo de donde se colocan los gadgets... mira este es el mio (http://thesuperrcgeorge3000.mex.tl/imagesnew2/0/0/0/2/0/8/1/6/8/7/y6y.png) como veras es transparente y quisiera que quedara algo asi

    (http://thesuperrcgeorge3000.mex.tl/imagesnew2/0/0/0/2/0/8/1/6/8/7/Sin%20t%C3%ADtulo(1).png)porfavor si pudieras ayudarme te lo agradeceria muchisimo Gracias

    ResponderEliminar
    Respuestas
    1. Hola. Esa información es insuficiente como para que te pueda dar una solución. Aparentemente las imágenes corresponden a distintas zonas del blog y se supone que lo que me intentabas mostrar era un "antes y después" ¿no? Mejor pásame una dirección dónde te salga el "antes" que lo pueda ver.

      Eliminar
  8. no la primera imagen es como es mi parte de los gadgets (donde dice saludos de freezer ese es mi blog)

    y la segunda imagen es como quisiera yo que quedara el mio asi de color flanco que pareciera como si estuviera flotando donde se colocan los widget esa es mi pregunta como lo hago para que el mio quede como la segunda ... espero poder haber preguntado mas especificamente Gracias

    ResponderEliminar
    Respuestas
    1. Pues sí, pero me sigue haciendo falta ver tu blog y en tu perfil no está enlazado ninguno.

      Eliminar
    2. Lo encontré...

      En esta parte quítale ese background:
      .main-outer {
      background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
      ...

      Eliminar
  9. Hola,lo intente hacer pero me salio mal, lago hzie mal, disculpa pero soy nuevo en esto, primero copie antes del head el primero codigo ,hasta ahi voy bien,pero dpues,el codigo del plugin que me descargo lo copio abajo del primer codigo? y abajo pusiste esto:
    a script src='DIRECCION_JQUERY.KWICKS.JS' type='text/javascript'> (le saque algunas letras aca par que me deje plublicarlo)
    ese script donde va?....si ya copie todo el codigo del plugin:S...

    En este link [url]http://devsmash.com/projects/kwicks/examples/slideshow[/url] aparece para hacerlo slide automatico, ese codigo donde lo pego? en el lugar del gadget? o reemplaza algo de los codigos que pusiste?

    Muchas gracias y disculpa las molestias

    ResponderEliminar
    Respuestas
    1. si yo cambio en esta linea background-color:rgba(0,0,0,.7);
      el rgba (0,0,0,.7) lo cambio por un codigo hexadecimal XXXXX cambia el colorcito marron de borde?...

      Eliminar
    2. El kwicks.js hay que ponerlo justo a continuación de la anterior línea, la que se cita en primer lugar en la entrada, pero por lo que vi en tu sitio de pruebas creo que ya lo conseguiste.

      Y lo del color está en formato RGB para que se pueda aplicar transparencia. Si no la quieres si puedes usar un código hexadecimal, pero en ese caso hay que cambiar "rgba(0,0,0,.7)" por "#xxxxxx", es decir, quitar también rgba, los paréntesis y los números.

      Eliminar
    3. Hola,mil gracias por la respuesta,lo consegui pero usando otro script,con este escriopt lo que m pasa es que una imagen me queda abajo de la otra....no superpuestas.voy a seguir probando.

      Eliminar