Mostrar una imagen (jpg) de mi servidor en mi web.

amartin75 · #1 (**permalink**) 26/10/2015, 09:17

Muy buenas a todos saludos; tengo el siguiente inconveniente o preoblema, resulta que tengo una web (radio on-line), ésta tiene una reproductor en la base de la web en la cual por medio de una secuencia o archivo en AJAX cada vez que cambia la canción cambia el nombre de la misma en el reproductor, lo que quiero es hacer lo mismo pero con la caratula del disco de la canción; por suerte el programa que uso para la programación de la radio me envía por FTP a mi servidor la imagen de la caratula (datos de la etiqueta del MP3) a la carpeta que yo quiero, bien, mi pregunta es como hago para que esa caratula se vea en el reproductor en un <DIV> que ya tengo preparado y además que cada cierto tiempo se actualice, así que cuando cambie el archivo enviado tambien cambie en la web. El programa de la radio que envia los datos por FTP reescribe en archivo (jpg) así que siempre se llama de la misma forma, bueno espero haberme explicado bien y espero que me puedan ayudar y darme una mano con este problemita, muchas gracias desde ya. Les dejo unas capturas de pantalla de lo que tengo y de lo que realmente quiero....las imagenes no correpsonden a la web principal sino a una que utilizo para hacer las modificaciones y una vez resueltas las paso a la web final.

Web de Prueba

Web Final "[URL="http://www.latitudfm.com"]LATITUD[/URL]"

chronos682 · #2 (**permalink**) 26/10/2015, 10:44

Cuando tengo que actualizar una imagen yo lo hago así:

Código PHP:

  <html>

<head>

<script type="text/javascript">

    function CambiarImagen()

    {

        var portada = document.getElementById("portada");

        var id = new Date().getTime();

        portada.innerHTML = "<img src='images/portada.jpg?d="+id+"'>"

    }

</script>

</head>

<body>

    <div id="portada"><img src="images/portada.jpg?d=12345"></div>

    <input type="button" onclick="CambiarImagen()" value="Cambiar imagen">

</body>

</html>

Como puedes ver desde php no se puede hacer absolutamente nada, todo se maneja desde javascript. Con la función CambiarImagen haces la actualización. En el ejemplo yo la tengo puesta en un botón, pero en tu caso deberías llamar a la función luego de que hagas la petición asíncrona con AJAX, entonces tan pronto cambie la canción ejecutas la petición de AJAX para cambiar el nombre de la canción y luego llamas la función CambiarImagen.

Tienes que acomodar el código al tuyo cambiando la ruta de acceso a la imagen. o quites esta parte ?d=... ese número que se envía es para evitar el cache del explorador web y que te cargue la nueva imagen, teniendo en cuenta que la imagen nunca cambia de nombre.

Espero te sea de ayuda.

amartin75 · #3 (**permalink**) 27/10/2015, 05:00

Mucha gracias "chronos682", intentaré probar con lo que me dices y veremos si resulta, gracias nuevamente, seguimos en contacto.

-Bueno chronos682, lo pude hacer ya logré poner la imagén donde quería y del tamaño que es el DIV, lo que me falta es el tema del AJAX para que se actualice cada cierto tiempo, como lo hace el nombre de la canción, eso es lo que no sé como hacerlo. Me podrías dar una mano en eso, mil gracias desde yá.
-Lo debería poner en la misma petición de AJAX que el nombre de la canción? no sé ahí se me generan las dudas y de ponerlo ahí como iría.

chronos682 · #4 (**permalink**) 27/10/2015, 07:06

Coloca el código que tienes para ver dónde lo puedes colocar.

amartin75 · #5 (**permalink**) 27/10/2015, 08:20

pateketrueke · #6 (**permalink**) 27/10/2015, 08:22

Pero eso es Javascript, ¿qué relación tiene con el foro de PHP?

amartin75 · #7 (**permalink**) 27/10/2015, 08:29

Tienes razón "pateketrueke", pero no sabía que era Javascript, en realidad no se mucho del tema y como estoy en WordPress y es todo PHP pensé que éste era el foro adecuado; pero "chronos682" que es buena onda me está ayudando con el tema, disculpa si te molesta que esté ahí.

chronos682 · #8 (**permalink**) 27/10/2015, 08:33

Coloca la llamada a la función después de esta línea:

Código Javascript:

Ver originaldocument.getElementById('track_name').innerHTML = s;
CambiarImagen ();

amartin75 · #9 (**permalink**) 27/10/2015, 08:36

Cita:

Iniciado por amartin75

Y este el archivo PHP que tiene otro código vinculado a lo anterior.

<?php
//get artist/title info
$artist = $_GET['artist'];
$title = $_GET['title'];

//create a temp file to store values for AJAX script
$r = fopen("temp_title.txt", "w");
fwrite($r, $artist." - ".$title);
fclose($r);
?>

amartin75 · #10 (**permalink**) 27/10/2015, 08:51

No me funcionó "chronos682" lo puse donde me indicaste pero nada, o quizá lo estoy haciendo mal, fijate la imagen....

Supongo que el código lo dejo en el mismo lugar y solo agrego lo que tu me indicaste. O está mal?

en la foto figura "function CambiarImagen ();" por que estuve probando pero lo puse como tu me dijiste "CambiarImage ();" y tampoco funciona.

chronos682 · #11 (**permalink**) 27/10/2015, 09:12

Colócalo así:

Código PHP:

  <script type="text/javascript">

function CambiarImagen() 

{ 

    var portada = document.getElementById("albumcover"); 

    var id = new Date().getTime(); 

    portada.innerHTML = "<img src='images/cover/artwork.jpg?d="+id+"'>";

}

 
function UpdateTitle()

{ 

    var xmlhttp;

    //get "track name" block

    if (window.XMLHttpRequest)

    {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp = new XMLHttpRequest();

    }

    else

    {// code for IE6, IE5

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    

    xmlhttp.onreadystatechange = function()

    {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)

        {

            var s = xmlhttp.responseText;

            document.getElementById('track_name').innerHTML = s;

            CambiarImagen();

        }

    }

    //use random number in request to prevent caching

    var rand_no = Math.random();

    rand_no = rand_no * 100;

    //read the "temp_title.txt" file

    xmlhttp.open("POST", "/temp_title.txt?"+rand_no, true);

    xmlhttp.send();    

}    

//

setInterval("UpdateTitle()", 1000);

UpdateTitle();

</script>

Debes estar seguro que el div tiene como id albumcover o sino no va a funcionar, debes estar seguro que esa es la ruta de la imagen. De resto debería servir. O por lo menos a mí me funcionó en la prueba que hice.

PD: Un problema que veo es que tienes el tiempo de actualización muy seguido, cada segundo estás haciendo la petición y eso no le da tiempo a la imagen siquiera de mostrarse. Si quieres puedes aumentar el tiempo de refresco y si definitivamente no hay posibilidad deberías crear otro SetInterval exclusivo para la función CambiarImagen() que se ejecute cada 5 o 10 segundos.

amartin75 · #12 (**permalink**) 27/10/2015, 09:34

No hubo caso, no funcionó te envío las imagenes, lo he colocado como mes has indicado, lo unico que puede ser que el DIV del "albumcover" tiene "class" en vez de "id" y como me dices anteriormente no va a funcionar sino tiene el "id"....será eso? como lo soluciono?

amartin75 · #13 (**permalink**) 27/10/2015, 09:42

Cita:

Iniciado por chronos682

Colócalo así:

Código PHP:

  <script type="text/javascript">

function CambiarImagen() 

{ 

    var portada = document.getElementById("albumcover"); 

    var id = new Date().getTime(); 

    portada.innerHTML = "<img src='images/cover/artwork.jpg?d="+id+"'>";

}

 
function UpdateTitle()

{ 

    var xmlhttp;

    //get "track name" block

    if (window.XMLHttpRequest)

    {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp = new XMLHttpRequest();

    }

    else

    {// code for IE6, IE5

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    

    xmlhttp.onreadystatechange = function()

    {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)

        {

            var s = xmlhttp.responseText;

            document.getElementById('track_name').innerHTML = s;

            CambiarImagen();

        }

    }

    //use random number in request to prevent caching

    var rand_no = Math.random();

    rand_no = rand_no * 100;

    //read the "temp_title.txt" file

    xmlhttp.open("POST", "/temp_title.txt?"+rand_no, true);

    xmlhttp.send();    

}    

//

setInterval("UpdateTitle()", 1000);

UpdateTitle();

</script>

Debes estar seguro que el div tiene como id albumcover o sino no va a funcionar, debes estar seguro que esa es la ruta de la imagen. De resto debería servir. O por lo menos a mí me funcionó en la prueba que hice.

PD: Un problema que veo es que tienes el tiempo de actualización muy seguido, cada segundo estás haciendo la petición y eso no le da tiempo a la imagen siquiera de mostrarse. Si quieres puedes aumentar el tiempo de refresco y si definitivamente no hay posibilidad deberías crear otro SetInterval exclusivo para la función CambiarImagen() que se ejecute cada 5 o 10 segundos.

Si lo del tiempo, no hay problema por que con el retardo del streaming lo debo poner a casi 30 segundos, por el delay, ahí lo puse a 10 segundo para probar. Pero tampoco funciona, puede ser que el problema está en el "id" que me dices, ahí te deje fotos yo lo tengo como "class".

chronos682 · #14 (**permalink**) 27/10/2015, 09:51

Así es tienes que colocarle id="albumcover" no hay necesidad que borres el class. Y la ruta de la imagen debe ser igual a como la tienes en la imagen, desde /wp-content en adelante y ten en cuenta que no vayas a borrar esta parte ?d="+id+"' en la función que te pasé.

amartin75 · #15 (**permalink**) 27/10/2015, 10:01

Disculpa mi ignorancia "chronos682", pero dónde le coloco el id="albumcover" por que el div los tengo así: <div class="albumcover"><img src="/wp-content/themes/soundwave/images/cover/artwork.jpg" width="46px" height="46"></div>

y el CSS está así

div.albumcover {
border: 1px solid #fff;
width: 46px;
height: 46px;
position: absolute;
top: 8px;
left: 260px;
}

Disculpa que no entienda mucho.