Cambiar el logo de tu sitio web con PHP y JQuery

Cambiar el logo de tu sitio web con PHP y JQuery

En esta guía te mostrare como cambiar tu cabecera de tu sitio usando JQuery y PHP.
Lo primero que debes de saber esque tu hosting corre PHP, casi todos lo hacen ya que PHP se a vuelto tan usado a nivel mundial…
Lo que aremos es hacer un pequeño script que hará que tu foto o logo de cabecera cambie en determinado tiempo sin que se note el cambio al refrescar, “nota:también puedes mostrar una base de datos en mysql” , en php esto no es posible completamente, es por eso que tenemos a la mano el JQuery..

  1. Creamos una pagina en html y la nombramos cabecera.html, si quiere que tenga extensión “php” también lo puedes hacer pero no es necesario, crea lo necesario..
    <html>
    <head>
    <title>Cambia el logo de tu sitio con php y ajax</title>
    <script type="text/javascript" src="jquery-latest.js"></script>
    <script language="javascript" type="text/javascript">
     $(document).ready(function() {
     	 $("#cabecera").load("cambiar_logo.php");
       var refreshId = setInterval(function() {
          $("#cabecera").load('cambiar_logo.php?randval='+ Math.random());
       }, 10000);
    });
    </script>
    </head>
    <body>
    <div id="cabecera">
    </div>
    </body>
    </html>
    
  2. Dejen le explico un poco de las partes mas importantes, entre el

    <head></head> 

    ira el código javascript es el mas importante pues es el que va actualizar el div tag

    <div id="cabecera"></div>

    aqui es donde se actualizara, el logo o foto o cualquier cosa que quieras que aparezca en el DIV.

  3. En el javascript asegura que cambias los nombres del div y de el nombre de php que ara la magia de cambiar el logo ,solo si deseas puedes cambiar el nombre que le di, a el tuyo propio que quieras usar:
    $("#aqui-el-div").load("nombre-de-el script.php");
     $("#aqui-el-div").load('nombre-de-el script.php?randval='+ Math.random());
  4. Ahora en el código javascript que cambia el tiempo de actualización o que refresca el script es este:

    }, 10000);

    La cantidad que ves es de 10 segundo, si lo cambiases a 5000 entonces te daría una actualización de 5 segundos…

  5. Ahora pasamos hacer el código php que se encarga de darte el cambio de foto, el javascript actualiza este escript llamándolo por el tiempo que tu desees, pero el código php es que cambia la foto al ser llamado por el javascript.. llámalo cambiar_logo.php, el codigo php es:

    <img src="/cabeceras/
    cabecera_<?php echo(rand(1,3)); ?>.jpg" width="1004" height="237" />
    
  6. Expliquemos un poco el código php, la parte que es php es la función

    <?php echo(rand(1,3)); ?>

    La cual cambia un numero al azar, si quieres poner una cantidad mas alta entonces cambia de “1,3”, pones un ejemplo “1,10” y colocas 10 imágenes en el folder /cabeceras/..
    las demás partes es la imagen tag y el folder donde colocaremos las fotos o logos, la cual es el folder “cabeceras” recuerda crearlo, en este folder colocamos las fotos o logos los cuales nombraremos cabecera_1.jpg, cabecera_2.jpg, cabecera_3.jpg, asi sucesivamente.. porque ese nombre?, pues en este caso y para la guía utilice ese termino… “cabecera” utiliza el que quieras en tu pagina..

  7. El ultimo paso para que el todo funcione es llamar JQuery que es llamado asi:
    <script type="text/javascript" src="jquery-latest.js"></script>
    

    Este es lo mas importante, el que hace todo el trabajo y la magia de refrescar el div sin que se vea ningún parpadeo, ahora yo lo tengo en en la base de mi hosting, lo puedes colocar donde quieras pero debes recordar llamarlo correctamente… ya sea por el path relativo o absoluto…

Llegamos al final de esta guia, alguna duda o algun paso falla, porfavor deja tu mensaje abajo… no olvides todos los pasos leerlos con calma, además asegura que tienes los path correctos, pues si no están, no te funcionara…
Quieres verlo funcionando clic en :
Cambiar de logo con php y JQuery.
Si quieres el contenido del JQuery descargalo o solo enlazalo con el siguiente código O solo enlazarlo así:

<script src="http://code.jquery.com/jquery-latest.js"></script>

One thought on “Cambiar el logo de tu sitio web con PHP y JQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *