.slide() method doesn't work?

[serjrd]

Hi,
The .slide() method doesn't work when trying to display an image.

I tried to execute it right on your demo page according to the example provided in the docs, but received an 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

Am I not using it right?

[kursusHC]

Hi,

Hard to help with your code formatting, but I can tell the slide() method does work. Could you post a JSFiddle to demonstrate ?

[serjrd]

Hi, it wasn't actually much of a code formatting. Merely the commands I ran at google dev-console with respective output.

Here's a jsfiddle to illustrate the issue. When you press the button, it doesn't open the gallery.

[kursusHC]

There is several issue in your code, but the general reason why it's not working is because the gallery instance has to be created (opened) before you can using methods on it. In your example you are basically trying to alter something that doesn't exist yet.

There is two ways for opening the gallery programmatically (ie not by clicking on a thumbnail) : triggering a click with jQuery or using Dynamic mode (see this answer).

So this would work :

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

See working example here. I added a "start" class to the first item in your html, but you could also give this class to the wanted item on the fly with jQuery : this would make the slide() call unnecessary and also get rid of the extra transition on the opening.

Or you could use the Dynamic Mode and use the 'index' option.

On a side note, don't forget methods need to be called on the instance of the gallery, not the jQuery container (your "g" variable), that is why I added a "gallery" variable in my example.

[serjrd]

kursusHC,

Thanks a lot for taking time to explain.
I did suspect that the .slide() method is only relevant when the gallery is already active. But at first I thought that the slide method was how you programmatically open a gallery. I did make it work with emulating a click on the relevant picture element, just decided to clarify this.

Perhaps a little note in the docs would help to avoid misunderstanding.

Btw, the docs example suggests running method on the jquery container (and it actually works, too).

[kursusHC]

You're right it can be a little confusing. Also yes I was wrong about the container ! Good luck.

[johnla]

This thread helped me a lot. Thanks!