Most transition types are not working and can I change the transition duration?

[acwolff]

For the type of transition between images with parameter 'mode', the documentation gives a long list of possibilities:

lg-slide lg-fade lg-zoom-in lg-zoom-in-big lg-zoom-out lg-zoom-out-big lg-zoom-out-in lg-zoom-in-out lg-soft-zoom lg-scale-up lg-slide-circular lg-slide-circular-vertical lg-slide-vertical lg-slide-vertical-growth lg-slide-skew-only lg-slide-skew-only-rev lg-slide-skew-only-y lg-slide-skew-only-y-rev lg-slide-skew lg-slide-skew-rev lg-slide-skew-cross lg-slide-skew-cross-rev lg-slide-skew-ver lg-slide-skew-ver-rev lg-slide-skew-ver-cross lg-slide-skew-ver-cross-rev lg-lollipop lg-lollipop-rev lg-rotate lg-rotate-rev lg-tube

However I noticed that only two transition types are working in my test album:

	mode: 'lg-fade',
	mode: 'lg-slide',

If I try for instance mode: 'lg-tube', the previous picture is not removed:

Do I something wrongly”? Is there a codepen example which shows all transitions?

Another question: How can I change the duration of the transition?

Edit: I see now I have to use setting speed, but that works weird, see next comment.

[acwolff]

In my test album I use this code:

`
var viewtime = 5000;
var transtime = 3000;
var transeffect = "lg-slide";

const lg = document.getElementById("thumbsgallery");
let plugin = null;
function initGallery() {
    console.log("initGallery viewtime: " + viewtime + " transtime: " + transtime);
    plugin = lightGallery(lg, {
        mode: transeffect,
        slideShowInterval: viewtime,
        speed: transtime,
	//speed: 3000,

` With this code I can't go to the next slide via the arrow key and also clicking the slide show button, does not bring me to the next slide.

If I open this link I see in the console:

[1] Variables loaded from localStorage, viewtime: 3000 transtime: 3000 transeffect: lg-slide initGallery viewtime: 3000 transtime: 3000

However if I define the speed as

speed:3000,

everything works as expected!

I realy don't understand this!

Edit:

It works if I change

var transtime = 3000;

into

const transtime = 3000;

but that is unacceptable for me, because I that case I can't change the transition time in the setting window. Click on the settings button of my test album (the button in the uper right corner of the index page) to see where I can change the transition time / speed.

[sachinchoolur]

Hey @acwolff,

For all the transition effects other than, lg-fade and lg-slide, you need to include https://github.com/sachinchoolur/lightGallery/blob/master/dist/css/lg-transitions.css in your document.

Somehow it got removed from the docs. I'll update it

Sorry for the confusion

[acwolff]

Yes @sachinchoolur that solves the problem, thanks a lot!

I use now this:

    <link rel="stylesheet" href="res/lightgallery-bundle.css" />
    <link rel="stylesheet" href="res/lg-transitions.css" />

Is that sufficient or should I include more CSS files?

Did you see the related problem around the transition time, your setting speed, see https://github.com/sachinchoolur/lightGallery/issues/1346#issuecomment-1198043437 ?

[acwolff]

@sachinchoolur is there any progress with the problem of the update of the 'speed' setting?

I used my variable transtime also for a similar variable:

startAnimationDuration: transtime,

This works fine except if the transtime is 0. If transtime=0 you see no close transition as expected, but you see still an open transition of a length defined in setting 'speed'!

[acwolff]

After an update of the transtime variable, a string instead of a number was saved in transtime and that did give the problem. After I applied the paseInt function, the problem was solved.