jquery-plugins - hacer - slider de imagenes jquery

Carrusel de imágenes Javascript o jQuery con imágenes y enlaces cargados dinámicamente

Question

¿Hay un buen carrusel de imágenes javascript o jQuery que muestre 5 imágenes y si hay más, el usuario puede hacer clic en Siguiente y las siguientes fuentes de imágenes y URL de enlaces se cargarán a través de AJAX?

Es muy posible que haya miles de imágenes y cada una se vincule a una página web dedicada a esa imagen, así que básicamente necesito un carrusel de imágenes que pueda lidiar de manera eficiente con esto.

Answer 1

Creo que el complemento Cycle de JQuery te dará el 50% del camino hasta allí. Esta función es bastante fácil de usar y creo que le dará la funcionalidad de imágenes "haga clic para llegar a más" que busca (con algunos efectos de transición bastante ingeniosos).

Sin embargo, solo he usado el complemento con todas las imágenes definidas en la página. En mi caso, estaba haciendo una "presentación de diapositivas" para demostrar el uso de una aplicación. El HTML fue bastante simple ...

<div id="slideshow">
  <img src="Images/Usage1.png" />
  <img src="Images/Usage2.png" />
  <img src="Images/Usage3.png" />
  <img src="Images/Usage4.png" />
  <img src="Images/Usage5.png" />
  <img src="Images/Usage6.png" />
  <img src="Images/Usage7.png" />
  <img src="Images/Usage8.png" />
  <img src="Images/Usage9.png" />
  <img src="Images/Usage10.png" />
</div>
<a href="javascript:moveSlide(''prev'');" style="float: left;">&lt; Prev</a>
<a href="javascript:moveSlide(''next'');" style="float: right;">Next &gt;</a>

El JavaScript asociado es ...

function moveSlide(direction) {
    $("#slideshow").cycle(direction);
} // End function

$(document).ready(function () {
    $("#slideshow").cycle({
        fx: ''fade'',
        speed: 300,
        timeout: 0
    });
});

(Haga clic aquí para ver el efecto).

En cuanto a abordar el desafío adicional de cargar nuevas imágenes cuando el usuario quiere buscar más, creo que es solo cuestión de ampliar el código detrás del enlace "Siguiente" en mi ejemplo. Su código realizaría una llamada JQuery AJAX para obtener las imágenes siguientes y luego agregarlas a la div de la presentación de diapositivas .

Por último, eso deja la funcionalidad de hacer clic en la imagen para ir al sitio. Puede tratar de poner las etiquetas img presentación de diapositivas dentro de las etiquetas apropiadas. Si el complemento de ciclo no se reproduce con las etiquetas a, los manejadores de evento onclick en las imágenes deben hacer el trabajo.

Answer 2

He usado jShowOff para un proyecto.

Beneficios:

• Usted tiene control total sobre el HTML de cada diapositiva (por lo tanto, se pueden usar imágenes o imágenes, HTML y enlaces)
• Según uno de sus requisitos, el usuario puede rotar las diapositivas por sí mismo

Problema

• Tendría que idear su propia solución AJAX y ajustarla.

http://ekallevig.com/jshowoff/

Tengo un ejemplo de mi uso aquí: http://www.rhmachine.com/ (los enlaces pueden modificarse para mostrar solo prev / next).

Voy a cavar un poco y ver si puedo encontrar una solución AJAX ya hecha para ello.

Answer 3

La primera solución es bastante buena, otra solución que te puede gustar y que yo uso: http://jquery.malsup.com/cycle/

Answer 4

Puede usar el control deslizante de jQuery Tools como deslizador y asociar una llamada $get() al botón "siguiente".

Aquí hay una demostración: http://flowplayer.org/tools/demos/scrollable/edit.htm (Observe el botón ''agregar'').

En esta demostración, simplemente clona un div y lo agrega. Podrías hacer lo mismo al hacer clic en ''Siguiente'' pero cargando contenido desde otro lugar.