entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Mostrar imágenes de una base de datos en un slider mediante mvc

Tengo un slider html5 de imágenes en una página php, donde dentro de su etiqueta ul se crean de forma dinámica los tag Li con su contenido, que son imágenes extraídas de la base de datos, esto es realizado mediante una consulta ajax que envía una primary key al controlador que se comunica con el modelo donde retorna un array al succes de la petición Ajax, luego creo los tag li del slider con for each y los agrego al tag ul gracias a su id con append. Esto funciona sin problemas cuando la consulta ajax es ejecutada en forma directa sin document.on ready dentro de la etiqueta script, pero al momento de agregar la sentencia ajax dentro de una función on click activada por un botón, el algoritmo no se ejecuta de forma satisfactoria.

Por conclusión: la función ajax funciona en el mismo instante en que se carga el DOM que contiene la estructura base del slider , por lo tanto la petición post de ajax no alcanza a regresar al mismo tiempo, por lo que imprime las etiquetas li retrasadas no logrando visualizar las fotos. Que me sugieren para poder lograr que el slider sea activado mediante un botón en la misma página extrayendo las imágenes de la base de datos con la variable enviada en el data de Ajax? Adjunto codigo:

 <script>
    $("#btn_verFotos").on("click", function(){      
           $.ajax({
           type:"POST",
           url:"controlador.php",
           dataType:"JSON",
           data:{pkcasa:'42'},
           success:function(data){

                    $.each(data.mensaje, function(i, item){
                        //console.log(item);
                       var valorUl = $("#unUl").append();

 $("#unUl").append(valorUl + "<li><a  href='images/"+item.foto+"'></a><div class='caption'>Houses</div></li>");

                        });

           },
           beforeSend:function(){

           },
           complete:function(){

           }
       });
    });
  </script> 

    <body>
      <div id="slider">

        <div class="slider-two">

          <ul id="unUl">

          </ul>

          <div class="icon" title="Expandir/Salir"></div>

        </div>

      </div>

      <button type="button" id="btn_verFotos">Ver Fotos</button>
  </body>

1 Respuesta

3votos

Leonardo-Tadei Puntos227320

Hola @Bryan-SW,

para ayudarte con esto, nos haría falta el código del slider que estás usando...

El fallo que tenés es porque el slider carga las imágenes al arrancar, pero después no refresca lo cargado.

En algunos sliders hay métodos para detenerlo y rearrancarlo, para que relea las imágenes recibidas. En otros hay algún método para refrescar o actualizar que no requiere deternerlo.

En cualquier caso, deberías detener el slide, cargar el nuevo contenido y rearrancar el slide, o para los otros, actualizar el contenido y luego refrescar. Puede ser que el slider no tenga cómo hacer esto y tengas que implementarlo... o cambiar de slider.

Saludos cordiales!

1voto

Bryan-SW comentado

Hola estimado Leonardo, gracias por su respuesta, el slider que estoy ocupando se llama ninja-slider estoy utilizando el numero 1 de 9 tipos que hay disponibles,,link de descarga slider para visualizar el codigo, ojala me pueda ayudar en poder resolver el problema o definitivamente cambiar de slider que cumpla con mis necesidades
de ante mano gracias.

3votos

Leonardo-Tadei comentado

Hola @Bryan-SW,

en el enlace que enviaste aparece una sección "Built-in event handlers and functions" que tiene un botón para ver el contenido.

Ahí aparecen funciones para manejar programaicamente al slide.

Fijate si después de actualizarlo el llamar a init() recarga el contenido, o si hay que hacer algo previo con displaySlide().

También el slider tiene un foro en el que consultar... tal vez le haya pasado a alguien esto mismo y por ahí haya una respuesta que te sirva.

Saludos cordiales!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta