Chevereto es un Script gratuito de almacenamiento de imágenes que está teniendo una muy buena acojida por el numeroso grupo de usuarios que ha decidido adaptarlo para sus proyectos; pero conozcámoslo un poco más.

Chevereto cuenta con las siguientes características:

• Desarrollado en PHP y Javascript: Ha sido desarrollado utilizando PHP y Javascript, dos lenguajes muy extendidos.
• No necesita Base de Datos: Ya que rastrea los archivos y obtiene información necesaria a través de ellos, por lo que su instalación resulta más sencilla.
• Permite redimensionar imágenes: El uploader puede decidir si sus imágenes pueden tener un tamaño final al subirlas.
• Integración con acortadores de URL: Una vez subida una imágen, obtenemos un enlace para su visualización y/o descarga, pero podemos tener dicha url ya acortada.
• Soporte para jQuery: Si usas este framework para Javascript, puedes integrarlo perfectamente con Chevereto.
• Es código abierto: Con lo que puedes editar y adaptar el código para lo que quieras, además de poder ayudar en el desarrollo del script.
• Buena documentación: Cuentan con una documentación para que su instalación y su uso sea más fácil.

Todas estas son las cualidades de Chevereto para que, quien quiera, pueda tener su propio hosting de imágenes gracias a su sencillo pero poderoso script.

Enlace: Chevereto: Script gratuito de almacenamiento de imágenes
Demo: Demo de Chevereto

Los que no lo hayan visto, cosa que dudo, o la gente que quiera jugar de nuevo a Google Pac-Man podréis hacerlo de diferentes formas, una es bajándose el código fuente de la aplicación y ejecutando el index.html o la mejor opción desde una URL especial de Google para seguir disfrutando de Pac-Man.

Espero que lo disfrutéis, tanto destripando el código fuente, que por desgracia viene compilado, es decir todo el código fuente en una sola línea para que ocupe menos KB, o jugando de nuevo a Google Pac-Man.

Descarga: Google Pac-Man
Jugar online: Google Pac-Man

El plugin se le ha añadido el nombre de Sliding Panel Photo Wall Gallery. Su uso es bastante sencillo para los navegantes, ya que mostrarán todas las imágenes en mosaico de forma opaca y al pasar el mouse por encima se iluminarán para poder apreciarlas mejor. Si necesitamos observar las fotografías con más detalle tan solo deberemos realizar click para visualizarla en primer plano.

Sliding Panel Photo Wall Gallery: Plugin para realizar una galería de imágenes con JQuery

Sliding Panel Photo Wall Gallery no necesita de ningún servidor, se podrá lanzar directamente en local ya que todo su procesamiento se realiza por medio de Javascript. En la Web oficial de Tympanus podremos encontrar toda la información que necesitamos para implementarlo, además de su descarga gratuita. Sin duda un plugin para realizar galerías de imágenes con JQuery perfecto.

Fuente y descarga: Tympanus
Ver demo: Sliding Panel Photo Wall Gallery

Debo decir que soy amante de Mootools desde que vió la luz hace ya varios años, utilizándolo siempre en algún que otro proyecto. Lo que si observo, desde hace un tiempo, que se desarrollan muchos más plugins para otros frameworks, como por ejemplo JQuery, aunque viendo Mootools Forge y la de centenares de pequeños plugins que andan desperdigados por la red, la gente de Mootools tenemos suficiente.

En Mootools Forge podremos filtrar los plugins por categorías ya sean por efectos, formularios, interface, etc. Una vez encontrado el que deseemos, entraremos en él para ver las notas que ha dejado el desarrollador del plugin. Dentro encontraremos la forma de usarlo o como implementarlo en nuestro proyecto, su descarga desde diferentes mirrors y lo que más me gusta, una demo para ver el efecto que hace antes de descargar el plugin.

Fuente y directorio de plugins Mootools: Mootools Forge

Las caracteristicas principales que hacen de Nivo Slider un gran plugin son:

• Nueve efectos únicos entre transiciones.
• Código limpio y simple.
• Navegación mediante controles.
• La versión comprimida tan solo pesa 5KB.
• Licencia GPL.

Captura de Nivo Slider de una transacción a otra

¿Como usar Nivo Slider para Jquery?

Como hemos comentado en una de sus características principales, el código de Nivo Slider es limpio y simple, por ello para hacerlo funcionar necesitaremos unas pocas líneas. Primero añadiremos la librería a nuestra cabecera para que ésta sea cargada.

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.js" type="text/javascript"></script>

Ahora añadiremos el HTML que corresponderá a nuestro slider. Tan sólo deberemos insertar una capa contenedora y dentro de ella todas las imágenes que tendrá nuestro slider. Si deseamos que aparezca un título en una de las imágenes lo añadiremos en el atributo “title”.

<div id="slider">
	<img src="images/slide1.jpg" alt="" />
	<img src="images/slide2.jpg" alt="" />
	<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
	<img src="images/slide4.jpg" alt="" />
</div>

Finalmente deberemos inicializar Nivo Slider una vez completada la carga de la página, mediante el uso de $(window).load().

<script type="text/javascript">
$(window).load(function() {
	$("#slider").nivoSlider();
});
</script>

Con estas pocas líneas en nuestro código dispondremos de un elegante Slide con varias transacciones en Jquery. Nivo Slider es altamente configurable y en su método de inicialización nivoSlider() soporta múltiples opciones personalizables. Para más información visiten su Web oficial.

Fuente y Web oficial: Nivo Slider

Procesar Javascript en el evento onSucess

Realizaremos una petición Ajax mediante el objeto Request.HTML, obtendremos el HTML y lo pintaremos mediante la propiedad update, especificándole el identificador de la capa donde obtendremos los resultados. Por último ejecutaremos una sentencia Javascript que pintará de color verde el fondo de los anchor del Html obtenido de la petición Ajax a través del evento onSuccess.

Código HTML (para todos los ejemplos es el mismo código):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
    <title>Demo 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="es" />
    <script type="text/javascript" src="mootools.js"></script>
    <style type="text/css">
        #ajax
        {
            color: red;
            cursor: pointer;
        }

        #target
        {
            margin: 10px 0px;
            border: 1px solid #D5D5D5;
            padding: 5px;
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>Demo 1</h1>
    <p id="ajax">Cargar Ajax</p>
    <div id="target"></div>
    <a href="http://www.rutarelativa.com" title="Visita Ruta relativa">Visita Ruta relativa</a>
</body>
</html>

Código Javascript:

<script type="text/javascript">
    window.addEvent( "domready", function()
    {
        $("ajax").addEvent( "click", function()
        {
            new Request.HTML(
            {
                url : "demo2-ajax.html",
                update : "target",
                onSucess : function()
                {
                    $$( "#target a" ).setStyle( "background", "green" );
                }
            }).send();
        } );
    });
</script>

Archivo donde se realiza la petición Ajax: demo1-ajax.html

<a href="http://www.rutarelativa.com" title="Ruta relativa">Ruta relativa</a> <br/>
<a href="http://www.teoobe.com" title="Teoobe">Teoobe</a>

Ver ejemplo 1

Procesar Javascript en el Html obtenido, propiedad evalScripts

Realizaremos una petición Ajax mediante el objeto Request.HTML, obtendremos el HTML y lo pintaremos mediante la propiedad update, especificándole el identificador de la capa donde obtendremos los resultados. Por último ejecutaremos una sentencia Javascript que viene escrita en el archivo donde vamos a realizar la petición. El objeto Request de Mootools se encargará de ejecutar la sentencia Javascript escrita en el fichero de la petición gracias a la propiedad evalScripts, que por defecto es True.

Código Javascript

<script type="text/javascript">
    window.addEvent( "domready", function()
    {
        $("ajax").addEvent( "click", function()
        {
            new Request.HTML(
            {
                url : "demo2-ajax.html",
                evalScripts : true,
                update : "target"
            }).send();
        } );
    });
</script>

Archivo donde se realiza la petición Ajax: demo2-ajax.html

<a href="http://www.rutarelativa.com" title="Ruta relativa">Ruta relativa</a> <br/>
<a href="http://www.teoobe.com" title="Teoobe">Teoobe</a>

<script type="text/javascript">
	$$( "#target a" ).setStyle( "background", "green" );
</script>

Ver ejemplo 2

Procesar Javascript despues o antes de pintar el Html

Éste método es el que más flexibilidad ofrece, ya que podemos ejecutar nuestro Javascript cuando nosotros queramos. Realizaremos una petición Ajax mediante el objeto Request.HTML obteniendo el Html y Javascript por separado. Utilizaremos un método set Html para pintar los datos obtenidos. Mientras que para ejecutar nuestro Javacscript utilizaremos la función $exec pasándole como argumento nuestro Javascript. Como podemos observar aquí en este ejemplo podemos jugar con pintar antes o después de ejecutar nuestro código Javascript.

Código Javascript:

window.addEvent( "domready", function()
{
    $("ajax").addEvent( "click", function()
    {
        new Request.HTML(
        {
            url : "demo3-ajax.html",
            evalScripts : false,
            onSuccess : function(e, elements, html, js)
            {
                $("target").set( "html", html );
                $exec(js);
            }
        }).send();
    } );
});

Archivo donde se realiza la petición Ajax: demo3-ajax.html

<a href="http://www.rutarelativa.com" title="Ruta relativa">Ruta relativa</a> <br/>
<a href="http://www.teoobe.com" title="Teoobe">Teoobe</a>

<script type="text/javascript">
	$$( "#target a" ).setStyle( "background", "green" );
</script>

Ver ejemplo 3

Descargar ejmplos

Con la nueva versión de CSS3 ya no necesitaremos usar estos plugins y podremos realizarlo con la nueva propiedad background-size que se encargara de dar un tamaño a la imagen para utilizarla de fondo en alguna capa. Si le damos valor 100% se mostrara al tamaño máximo de la capa, escalando la imagen como realiza el plugin.

Fuente y demo: Aaronvanderzwan

Descarga: Reloj en jQuery
Demo: Reloj en Jquery