2011-02-15 10 views
5

Tengo una galería de imágenes personalizada que rellena un div con miniaturas, cada una contenida en un grupo de fancybox.Fancybox - Galería de imágenes de Ajax

Al hacer clic en uno (se abre en fancybox) y puede presionar Prev/Siguiente para alternar entre las imágenes en la primera "página". Para moverse entre páginas, debe cerrar fancybox y cambiar páginas, luego abra una nueva miniatura. Este nuevo conjunto de fotos se recupera a través de ajax.

para mostrar exactamente lo que estoy hablando, http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

¿Cómo puedo usar FancyBox para cambiar de página y cargar el siguiente grupo de imágenes?

Respuesta

4

No parece que existan métodos internos en FancyBox, por lo que deberá modificar el complemento. Me tomé la libertad de hacer un cambio menor y publicar un demo - en la demostración, abrir cualquier imagen en una ventana emergente de FancyBox, luego presionar Enter en el teclado. Cargará todas las imágenes en la galería y comenzará desde la primera.

línea modificada 887, a continuación, insertar una línea antes de 892:

$.fancybox.pos = function(pos, array) { // array parameter added 
    if (busy) { 
     return; 
    } 

    if (array) { currentArray = array; } // new line 

Así que, básicamente añadir "array" como un parámetro de función, a continuación, añadir la línea de if (array)....

Para utilizarlo, simplemente llame a la función pos mientras FancyBox está abierto. Este es el código de la demo:

// pos(index of image, jQuery object of gallery objects) 
$.fancybox.pos(0, $('#examples a[id]')); 

* Nota: En un principio que acabo de utilizar $('a[id]') e incluía la imagen que estaba dentro de la caja de lujo.


actualización: Así como usted ha dicho, que está cargando en más imágenes usando ajax ... supongo que se acaba de entrar una lista de URL de imagen. A partir de una URL, tendrá que formar y añadir estas imágenes a la página en un área oculta:

<div id="ajax-loaded" style="display:none"> 
<a href="#" title="image1 title"><img src="image1.jpg"></a> 
<a href="#" title="image2 title"><img src="image2.jpg"></a> 
... 
<a href="#" title="imageN title"><img src="imageN.jpg"></a> 
</div> 

entonces puede presentar una gran variedad de jQuery objetos $('#ajax-content img') a la función $.fancybox.pos como segundo parametro, y el inicio con la primera imagen (el cero)

// ajax complete, add images to gallery 
$.fancybox.pos(0, $('#ajax-loaded a')); 

actualización # 2: me envolvió el HTML anterior en los enlaces y el selector de jQuery después de encontrar que es necesario si desea incluir un título de la imagen.

+0

Veo su lógica aquí, pero estoy un poco confundido en el segundo bit (y la demostración no funciona para mí). ¿Qué estoy pasando en el argumento de la matriz? ¿Puede explicar más detalladamente el "objeto jQuery de los objetos de la galería" – pws5068

+0

Hiya, la demostración dejó de funcionar porque estaba vinculando los archivos de fancybox en su sitio web. Acabo de cambiar todos los enlaces y agregué el CSS, por lo que debería funcionar ahora. El segundo bit con '$ .fancybox.pos' es una función interna de fancybox que es una especie de imagen" goto "# ... Todo lo que hice fue reemplazar la matriz actual (matriz de objetos jQuery) por una que usted mismo agregue. – Mottie

+0

Gracias por toda su ayuda, generosidad otorgada – pws5068

1

He publicado algunos enlaces útiles de FancyBox en mis respuestas here. Por favor verifíquelos.

Si no encuentra útil, por favor corríjanme.

Mientras tanto, si hay algún problema con la implementación, por favor, escriba el código.

Gracias.

1

Acaba de agregar $("#profileGallery .vehiclePictures:first").click() al final de prepGallery(). Entonces, después de su llamada AJAX, automáticamente "hará clic" en la foto.

+0

Eso sería un evento para la primera foto en la galería si se hiciera clic explícitamente. ¿Cómo puedo modificarlo para que, si hacen clic en la imagen "n" y pasan al último en la página (con flechas de fancybox) ... haga una llamada ajax? – pws5068

+0

@ pws5068 Puede usar el evento onStart para verificar si la imagen actual es la última, por lo que puede hacer algo como [esto] (https://gist.github.com/854863). – Haochi

Cuestiones relacionadas