Refrescar Imagen Lightbox

[xever]

Buenas a tod@s.
Llevo tiempo con este problemilla, y no consigo dar con la solucion....
La Imagen de la webcam que podeis ver aqui http://meteoreocin.no-ip.info/VirtualWeatherHelgueraCumulus/webcam.php, se recarga cada 10 seg, hasta ahi todo correcto, pero el problema viene, cuando quiero que tambien refresque la imagen que carga el lightbox si pinchas sobre ella, puesto que si os fijais, la imagen se va recargando pero en el lightbox se mantiene la misma imagen que se cargo inicialmente.
A alquien se le ocurre algo?.
Un saludo!

[jmviper]

Hola xever

Por lo que he visto de código en tu página lightbox es una librería que trabaja sobre jQuery y crea su propio objeto y elementos (prácticamente como todas las que funcionan con jQuery). En su documentación no hay una animación como la que tú pretendes pero a ver si con jQuery podemos...

Prueba a poner este código en la página a ver si funciona la animación al abrirse el lightbox:

Código: [Seleccionar]

<script>

$(document).ready(setInterval(function(){$('.lb-image')[0].src='http://meteoreocin.no-ip.info:81/image/meteoreocin&t='+Date.now();},10000));

</script>

El $(document).ready hará que dé igual dónde lo coloques en la página ya que se cargará al terminar de cargarse la misma y aprovechando esperemos que lightbox ya haya creado el elemento lb-image se le mete un setInterval que cada 10 segundos actualizará esa imagen. Puedes cambiar el 10000 (milisegundos) por el intervalo de tiempo que tú quieras que se actualice.

En principio poniendo el código en la consola del navegador funciona.

saludos

[xever]

Muy Buenas jmviper, muchas gracias por la ayuda, lo he puesto y es lo que buscaba. Funciona de lujo 

[jmviper]

Perfecto 

Pero tiene el inconveniente de que cada imagen que carga de la webcam para el lightbox "pesa" casi 1 Mega independientemente de si está el lightbox abierto o no, o sea que en 1 minuto a ese ritmo ha descargado casi unos 30 Megas en imágenes....

Lo suyo sería que solamente descargara esa imagen si está el lightbox abierto para ahorrar esos datos cuando esté cerrado (en el móvil con los datos se notaría más).

Para ello en vez del código anterior puedes poner que solamente descargue la imagen cuando el lightbox sea visible:

Código: [Seleccionar]

<script>

$(document).ready(setInterval(function(){if ($('#lightbox').css('display') == "block") $('.lb-image')[0].src='http://meteoreocin.no-ip.info:81/image/meteoreocin&t='+Date.now();else $('.lb-image')[0].src=""},2000));

</script>
Pruébalo a ver si ahorramos esa descarga cuando esté cerrado.

[xever]

Ya te entiendo,con ese no me funciona, lo acabo de probar.....
Al final lo he dejado con el primer codigo y cada 10 seg que es mas que suficiente ;P

[jmviper]

Lo siento... con las prisas se me olvidó ponerle el signo de dólar al id del lightbox...

Pruébalo si quieres ahora:

Código: [Seleccionar]

<script>

$(document).ready(setInterval(function(){if ($('#lightbox').css('display') == "block") $('.lb-image')[0].src='http://meteoreocin.no-ip.info:81/image/meteoreocin&t='+Date.now();else $('.lb-image')[0].src=""},2000));

</script>

Ahora sí debería de ir bien. Lo corrijo también en el código anterior.

saludos

[xever]

ahora si que funciona. Muchas gracias  . Lo unico como compruebas que no este descargando las imagenes del lightbox??

[jmviper]

Lo unico como compruebas que no este descargando las imagenes del lightbox??

Por ejemplo en Chrome abres las herramientas de desarrollador con F12 y abres el lightbox en la página, entonces con el botón derecho del ratón sobre la imagen del lightbox le das a Inspeccionar y te llevará en el código a donde está el elemento. Tendrá un atributo src con la dirección de la imagen actualizándose y si cierras el lightbox se pondrá el atributo con src(unknown) o sea que no carga nada. Se le podría decir de quitar el atributo pero no sé exactamente qué comportamiento tendría el navegador (y según que navegador).

Así está bien 

saludos