Cambiar imágenes [casi] como encabezado de instagram :P

Hace poco vi el header en instagram en X perfil, me gustó mucho como se cambian las imágenes de forma aleatoria y se me ocurrió hacerlo en una web, me puse manos a la obra y salio el código que les explico y dejo a continuación :D :D :D

Primero que nada, me base en el siguiente código:
http://www.miguelmanchego.com/2009/recargar-texto-automaticamente-jquery-ajax/

Primero que nada, tenemos que invocar jQuery, despues agregamos el siguiente javascript:

<script language="javascript">
function aleatorio(inferior,superior){
    numPosibilidades = superior - inferior
    aleat = Math.random() * numPosibilidades
    aleat = Math.round(aleat)
    return parseInt(inferior) + aleat
} 

function recargar(){
    var cual = aleatorio(0,15)    
    var image = $("#probando"+cual);
    $("#probando"+cual).fadeOut(function() {
        $.post("get.php", {}, function(data){
        image.attr("src", data).fadeIn();
        });
    });
}
$actual=0;
timer = setInterval("recargar()", aleatorio(3000,9000));
</script>

En la funcion aleatorio definimos el tiempo en que van a recargar las fotos.

Despues en la funcion recargar, primero definimos un aleatorio entre 0 y 15, esto será para cuando coloquemos las imágenes, más adelante verán el por qué.

Agregamos la variable image con el id probando más la variable cual, que como lo mencioné antes, está en aleatorio.

Definimos que el id probando+cual tendrá un fadeOut para que se pueda desvanecer (esto lo invocamos con jQuery), despues dentro de las opciones de fadeOut declaramos una funcion en la que enviamos mediante un metodo (puede ser un post o un get, se que con el post ocupo un recurso que no necesito, se puede cambiar a get si les es más factible) la petición al archivo get.php, no le indicamos un contenido post y declaramos la funcion que nos regresará un valor, en este caso data, en esa función lo que hacemos es cambiar el atributo de image donde el id sea probando+cual y al último le agregamos un fadeIn() para que la muestre.

Ahora el archivo get.php contiene lo siguiente:

<?php
require_once("config.php");
$consulta = mysql_query("SELECT * FROM `tabla`");
    $numero = 0;
    while ($row=mysql_fetch_array($consulta))
    {
        $imagenes[$numero] = $row["imagen"];
        $numero++;
    }
        if($i%rand(1,$numero) == 1)
            echo 'img/default.jpg';
        else
        echo $imagenes[rand(0,$numero)];
        
?>

Llamo el archivo config por que lo hago mediante una conección de base de datos. Seguido hago una consulta y agrego los resultados en un arreglo, al final hago un echo para mostrar un simple texto que contiene la ruta del script, por ejemplo:

"img/archivo.jpg"   (sin las comillas claro)

Ustedes pueden modificar el archivo get para obtener la salida y la ruta que ustedes quieran, pueden hacer un listado de un directorio y de ahí mostrar solo uno, que se yo, lo que quieran :P

Ahora vamos a la parte que muestra las imágenes, en este caso lo acomode con tablas de la siguiente forma:

<table align="center" border="0">
<tr>
    <?php 
    $consulta = mysql_query("SELECT * FROM `tabla`);
    $numero = 0;
    $modal = 1;
    while ($row=mysql_fetch_array($consulta))
    {
        $imagenes[$numero] = $row["imagen"];
        $numero++;
    }
    for ($i=0; $i < 16; $i++) {
        if($i%rand(1,$numero) == 1)
        {
            echo "<td style='background: url(img/default.png) no-repeat center'>
            <img id='probando$i' src='img/default.jpg' width='175' height='109'></td>";
        }
        else
        {
            echo "<td style='background: url(img/default.png) no-repeat center'>
            <img id='probando$i' src='".$imagenes[rand(0,$numero)]."' alt='' width='175' height='109'></td>";
        }
            if ($modal%4==0)
            {
                echo "</tr>";
                if ($i<16)
                echo "<tr>";
            }
        $modal++;
    }
    ?>
</table>

Primero declaro una tabla, y seguido abro php, hago la consulta a la base de datos, declaro $numero como 0 y modal como 1, agrego en un array los valores que obtengo de la base de datos y despues empiezo a mostrar las imágenes, ocupo el modal por que acomodo 4 columnas de la tabla, lo que nos interesa aquí es la parte donde dice: id='probando$i' - esto es lo que nos va a agregar los id's de forma dinámica y en incremento +1 para que así nuestro javascript mande a llamar de forma correcta los id's que ocupa.

Les dejo un enlace de ejemplo de como funciona.

http://kaguamedia.com/header_tipo_instagram.php

Si tienen alguna duda aquí estamos para ayudar, no creo que sea la única forma de hacerlo, pero creo que si es sencilla :D y claro, ustedes pueden acomodar como guste, con diseño responsivo, con algunos divs, o alguna otra cosa para que quede conforme a su diseño.

PD. Si quieren ver como es el encabezado de instagram les dejo un enlace a un perfil

<shamed>
http://instagram.com/Alination
</shamed>

PD2. Si usan el script, me gustaría ver como quedo el final, compartan su enlace :D

Saludos! :D

Komtec1 - @Komtec1