0

He hecho una aplicación web sencilla en php para visualizar imágenes, tipo galería de imágenes, pero tiene un defecto que me gustaría corregir.

La cosa es que hay un formulario para introducir una fecha y una hora que se utiliza para mostrar la primera imagen de la galería. Luego hay unos botones de adelante y atrás para ir mostrando sucesivamente las siguientes o anteriores imágenes a esa fecha. Las imágenes las tengo en una carpeta en el servidor, y el nombre de cada imagen es la fecha y la hora en la que se subió. Cada media hora se va añadiendo una imagen a la carpeta, así que hay miles de imágenes ya y van aumentando.

Bueno, la aplicación funciona bien, pero el defecto que tiene es que cada vez que voy pinchando en el botón de adelante o atrás para ver otra imagen se refresca la página para mostrar la nueva y se produce un "flashazo" al cambiar la imagen (debido al refresco de la página, supongo). He de comentar que las imágenes varían muy poco de una a otra y me gustaría que se superpusiera una sobre otra de forma instantánea para poder apreciar bien la diferencia entre ellas, pero ese flash que se produce en el cambio de imagen al refrescar la página es muy molesto y me gustaría eliminarlo. He pensado que la solución sería usar ajax para refrescar solo el div que tiene la imagen en vez de refrescar toda la página, pero no se como hacerlo, no tengo mucha idea de javascript. Supongo que con jquery se podrá hacer.

¿Alguien podría darme algunas indicaciones de como podría hacerlo o decirme alguna página donde lo expliquen?.

He visto algún script en internet para hacer galerías de imágenes pero ninguno hace lo que yo quiero. Todos estos scripts realizan algún tipo de animación para ir cambiando las imágenes y yo lo único que quiero es que se superponga una sobre otra de manera imperceptible. Puedo poner el código que tengo en html y php por si se necesita.

Gracias. Un saludo.

3 respuestas 3

0

lo que tienes que hacer es usar ajax.

    var params = {
            "fecha" : //dato de la fecha
            "hora" : //dato de la hora
        };
         $.ajax({
                data:  params, //Aqui envias algun parametro en tu caso puede ser la fecha y hora mediante json
                url:   'funcion.php',
                dataType: 'html',
                type:  'post',
                success:  function (response) {

        }
    });

En tu php adquieres los parámetros mediante post como un formulario cualquiera. Dentro de la función succes podrás utilizar jquery para añadir la respuesta a tu html

$('#id').html(response);

si tienes dudas te recomiendo leer un poco mas sobre ajax y ahí tendrás tu solución

0

Usando ajax podés bajar la imagen siguiente sin refrescar la página.

Yo creo que bajaría los nombres de las 10 imágenes siguientes (si estuvieran disponibles) como para no ir tanto al servidor (pensando en que es probable que se haga siguiente varias veces).

Para pedir los siguientes tenes que hacer el ajax request (un POST) indicando cual es la última imagen que tenés (en un parametro), para que el servidor sepa a partir de donde tiene que buscar para mandarte los siguientes de vuelta.

La respuesta la podés recibir como un json array y cacheas los 10 nombres en alguna variable.

Ya con el nombre de la imagen siguiente (con javascript o jQuery) podés crear un elemnto html <img>. Al agregarlo al DOM, el navegador lo descarga del servidor y lo muestra.

0

Si, efectivamente es ajax lo que buscas. Primero tienes que dar de alta el botón que quieres que "escuche" el click que el usuario va a hacer. Este "evento" debe afectar a todo el documento, independientemente si exsitía antes o ha sido llamado desde ajax.

jQuery( document ).on("click", "a.change-image", function( event ){
    // a#next-image es el botón algo como: <a class="next-image">Siguiente</a> "#" se refiere al id del elemento (Debe ser único).
    event.preventDefault();
    // event.preventDefault(); Detiene la acción por defecto del botón, como es un hipervinculo, recargaría la página aunque agregues codigo javascript, recuerda tener en function( event ) "evento" que se refiere a la acción que se realizó
    var url = this.href;
    // var url = this.href; decimos que la url será lo que este botón tenga como atributo "href"
    jQuery.get( url, null, function( respuesta ){
      // En jQuery.get estas haciendo una petición tipo GET a la url que le asignamos, en null irían las variables adicionales que queremos enviar al servidor, algo como: {id_image: 55, is_ajax=true} traducido como: http://midominio.com/?id_image=5&is_ajax=true
      // "respuesta" se refiere a lo que el servidor retornó, esto es en tu caso todo el HTML que está en la siguiente página.
      var html = jQuery( respuesta );
      // var html = jQuery( respuesta ); Metemos en la variable html el HTML del servidor ya convertiro en un objeto jQuery que podemos manipular.
      var container_gallery = html.find("#container_gallery");
      //var container_gallery = html.find("#container_gallery"); asignamos en "container_gallery" la etiqueta que sea  <div id="container_gallery">[botones e imagenes estan aqui dentro]</div>
      jQuery("#container_gallery").replaceWith( container_gallery );
      // jQuery("#container-gallery").html( container_gallery.html() ); reemplazamos el contenido de lo actual con lo que acabamos de obtener.
    });
});

Algo así sería el html:

<div id="container_gallery">
  <a href="anteriorPagina.html" class="change-image">Anterior imagen</a>
  <img src="imagen.png">
  <a href="siguientePagina.html" class="change-image">Siguiente imagen</a>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.