Lightgallery: ¿El método .slide() no funciona?

Creado en 14 dic. 2015  ·  6Comentarios  ·  Fuente: sachinchoolur/lightGallery

Hola,
El método .slide() no funciona cuando se intenta mostrar una imagen.

Traté de ejecutarlo directamente en su página de demostración de acuerdo con el ejemplo proporcionado en los documentos , pero recibí un error: Uncaught TypeError: this.$outer.find is not a function(…) .

> d = $('.demo-gallery')
[<div class=​"demo-gallery mrb50">​…​</div>​, <div class=​"demo-gallery mrb50">​…​</div>​]
> d.lightGallery()
[<div class=​"demo-gallery mrb50">​…​</div>​, <div class=​"demo-gallery mrb50">​…​</div>​]
> d.data('lightGallery').slide(0)
lightgallery.js:727 Uncaught TypeError: this.$outer.find is not a function(…)Plugin.slide @ lightgallery.js:727(anonymous function) @ VM1979:2InjectedScript._evaluateOn @ VM1970:875InjectedScript._evaluateAndWrap @ VM1970:808InjectedScript.evaluate @ VM1970:664

¿No lo estoy usando bien?

Comentario más útil

Hay varios problemas en su código, pero la razón general por la que no funciona es porque la instancia de la galería debe crearse (abrirse) antes de que pueda usar métodos en ella. En su ejemplo, básicamente está tratando de alterar algo que aún no existe.

Hay dos formas de abrir la galería mediante programación (es decir, no haciendo clic en una miniatura): activando un clic con jQuery o usando el modo dinámico (ver esta respuesta ).

Así que esto funcionaría:

var g = $('div.gallery');
var gallery = g.lightGallery({
    selector: 'span.pic'
});
$('button').on('click', function(){
    $('.start').trigger('click');
    gallery.data('lightGallery').slide(2);
});

Ver ejemplo de trabajo aquí . Agregué una clase de "inicio" al primer elemento en su html, pero también podría darle esta clase al elemento deseado sobre la marcha con jQuery: esto haría innecesaria la llamada slide() y también eliminaría la transición adicional en la apertura.

O puede usar el modo dinámico y usar la opción 'índice'.

En una nota al margen, no olvide que los métodos deben llamarse en la instancia de la galería, no en el contenedor jQuery (su variable "g"), es por eso que agregué una variable "galería" en mi ejemplo.

Todos 6 comentarios

Hola,

Es difícil ayudar con el formato de su código, pero puedo decir que el método slide() funciona. ¿Podrías publicar un JSFiddle para demostrarlo?

Hola, en realidad no era mucho de un formato de código. Simplemente los comandos que ejecuté en google dev-console con la salida respectiva.

Aquí hay un jsfiddle para ilustrar el problema. Cuando presionas el botón, no abre la galería.

Hay varios problemas en su código, pero la razón general por la que no funciona es porque la instancia de la galería debe crearse (abrirse) antes de que pueda usar métodos en ella. En su ejemplo, básicamente está tratando de alterar algo que aún no existe.

Hay dos formas de abrir la galería mediante programación (es decir, no haciendo clic en una miniatura): activando un clic con jQuery o usando el modo dinámico (ver esta respuesta ).

Así que esto funcionaría:

var g = $('div.gallery');
var gallery = g.lightGallery({
    selector: 'span.pic'
});
$('button').on('click', function(){
    $('.start').trigger('click');
    gallery.data('lightGallery').slide(2);
});

Ver ejemplo de trabajo aquí . Agregué una clase de "inicio" al primer elemento en su html, pero también podría darle esta clase al elemento deseado sobre la marcha con jQuery: esto haría innecesaria la llamada slide() y también eliminaría la transición adicional en la apertura.

O puede usar el modo dinámico y usar la opción 'índice'.

En una nota al margen, no olvide que los métodos deben llamarse en la instancia de la galería, no en el contenedor jQuery (su variable "g"), es por eso que agregué una variable "galería" en mi ejemplo.

kursushc,

Muchas gracias por tomarte el tiempo de explicar.
Sospeché que el método .slide() solo es relevante cuando la galería ya está activa. Pero al principio pensé que el método de diapositivas era cómo abrir una galería mediante programación. Lo hice funcionar emulando un clic en el elemento de imagen relevante, solo decidí aclarar esto.

Quizás una pequeña nota en los documentos ayudaría a evitar malentendidos.

Por cierto, el ejemplo de documentos sugiere ejecutar el método en el contenedor jquery (y en realidad también funciona).

Tienes razón, puede ser un poco confuso. ¡También sí, me equivoqué con el contenedor! Buena suerte.

Este hilo me ayudó mucho. ¡Gracias!

¿Fue útil esta página
0 / 5 - 0 calificaciones