Interesate slider, en forma de plugin para jQuery, que se adapta a la resolución y el dispositivo en el que se está visualizando. El plugin es totalmente gratuito para su uso en proyectos privados y comerciales. Incluye animaciones efectos entre imágenes, opciones de personalización, así como gestos táctiles para este tipo de dispositivos. Es muy liviano (tan solo 5 Kb) y ha sido testado en Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+ e +IE7.
El siguiente ejemplo muestra, de un modo sencillo, la utilización del evento dblclick() de jQuery.
<html>
<head>
<title>doble click</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#caja').dblclick(function () {
$(this).toggleClass('alt');
});
});
</script>
<style type="text/css">
#caja{
display:block;
border: 1px solid black;
height:100px;
width:200px;
margin:30px auto;
}
#caja.alt{
border: 4px solid #FF0000;
}
</style>
</head>
<body>
<div id="caja">Haz doble click sobre la caja</div>
</body>
</html>
Isotope es un plugin para jQuery que puede añadir algunas mejoras interesantes a la forma en la que los usuarios pueden navegar por el contenido que se muestra en una página Web. Para ver todo su potencial, lo mejor es echar un vistazo a las demos que ofrece la web oficial del plugin. Éste hace uso de efectos para modificar el layout de la página en funciòn de su contenido. Cabe destacar que el plugin aprovecha características como animaciones y transiciones CSS cuando el navegador tiene soporte para ellas y ofrece "fall-backs" con animaciones Javascript para navegadores que no soporten estas nuevas características CSS.
Slider Kit es un plugin para jQuery que pretende reunir las funcionalidades más comunes a la hora de realizar slideshows o carrruseles. Para ver las posibilidades, lo mejor es acceder a los ejemplos que podemos encontrar en su página web.
Las características principales son:
El siguiente código nos permite hacer que todo un elemento, ya sea un div o un elemento de lista como en el ejemplo, sea clickable y funcione como vínculo.
$("ul li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});