Ir al contenido principal

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

Comentarios

Radio - A todo rock ha dicho que…
que es $imagenes[$numero]?
Komtec1 ha dicho que…
Hola!

Es el arreglo que guarda nuestra consulta de la db.

Entradas populares de este blog

Integrar API de Google Maps, archivos kml, kmz y otras fumarolas :D

Ya que andamos en eso de la posteada ahora les voy a dejar un pequeño manual sobre como integrar la API de maps (google) dentro de nuestro código, hay varia documentación en la página developers de google, pero realmente lo que uno busca cuando pone en google: "integrar api de maps" es ver un ejemplo claro y directo para que se pueda entender de mejor forma. Así que pues ya comentada la información de arriba les paso a dejar un ejemplo. Lo primero que tenemos que poner en nuestro código es la llamada a la API de maps: < script type = " text/javascript " src = " http://maps.googleapis.com/maps/api/js?sensor=false&language=es " > < / script > En este caso la variable sensor está en false, esto nos indica que no hay un dispositivo gps que pueda tomar la ubicación (se pone generalmente en true cuando es para aplicación movil, llámese celular o tableta) El lenguaje declaramos español, esto es para los menús que se van a most

[Anotaciones] Importar DB MySQL con archivos frm/ibd

Primero, vamos a extraer las consultas para crear las tablas, lo podemos hacer con el siguiente comando> mysqlfrm --server=user:pass@localhost --port 3307 --diagnostic /ruta/de/los/archivos/data/nombredebase/*.frm Esto nos regresa todos los CREATE que tengamos para las tablas, guardar todo el resultado. Creamos la base de datos, con el mismo nombre que se tenía anteriormente. Ejecutamos la consulta que nos regresó el comando mysqlfrm, si nuestra versión de mysql es mayor a 5.6, es importante hacer este cambio:  ENGINE=InnoDB DEFAULT CHARSET=utf8; por  ENGINE=InnoDB ROW_FORMAT=compact CHARSET=utf8; Es decir, se remplaza DEFAULT por ROW_FORMAT=compact, realmente no se por qué, pero me llevó como una hora dar con el error, espero quien lea esto le sea más facil. Una vez que tengamos las tablas creadas, ejecutamos lo siguiente: ALTER TABLE nombredetabla1 DISCARD TABLESPACE; ALTER TABLE nombredetabla2 DISCARD TABLESPACE; ALTER TABLE nombredetabla3 DISCARD TABLESPAC

Solución [fix] a hamachi Logging in .. failed, busy

Hola! Aquí con una pequeña entrada, pero que a más de uno le será útil. Tengo hamachi instalado en varias máquinas, pero en una precisamente al reiniciar, algunas veces me da este problema: usuarioserver@server:~$ sudo hamachi login [sudo] password for usuarioserver: Logging in .. failed, busy Lo busqué en internet y la "solución" que dan, es reinstalar hamachi, y para los que han instalado hamachi en ubuntu, saben que no es una opción, pues se tendrían que hacer estos pasos:  sudo apt-get remove logmein-hamachi sudo dpkg -i logmein-hamachixxx.deb sudo apt-get install -f Para lo cual (siempre) es molesto hacer esos pasos, y algunas veces la configuración se llega a perder.  Para solucionar ese problema, basta con hacer un:  sudo /etc/init.d/logmein-hamachi force-reload Esto forzará el reinicio de hamachi, y así después hacen:  sudo hamachi login Y listo, el problema de failed busy desaparece y los deja loguear bien en la red de hama