Changing the speed of the pop-up

@plimfec, I will chat to the javascript developer to see if this can be changed, but I am not certain at this point. I will ask him to comment on this thread.

Thanks for using our plugins ??

Hi @plimfec,

Unfortunately this is not the easiest thing to do with the way FooBox’s HTML is laid out in the free version. In the PRO version we actually have made changes which allow for various open/close transitions to occur but they require JS, CSS and HTML changes which the free version simply does not have included. That said there are some things you can try.

First off there are certain classes applied to the main container (.fbx-modal) for FooBox during certain phases, to handle open/close transitions the most notable for you would be fbx-loading and fbx-show. As you can probably guess the fbx-loading class is applied when any of the images are loading (both first time load and switching between images). The fbx-show class is applied when we want to actually display the inner container (.fbx-inner) with the images and buttons, in the free version this simply toggles the visibility between hidden and visible.

So knowing the above we can get a very simple fade in transition by doing something like:

.fbx-modal .fbx-inner {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
.fbx-modal.fbx-show .fbx-inner {
	visibility: visible;
	opacity: 1;
}

But this does have a drawback, the transparent backdrop will appear almost instantly and the loader will be visible, only the actual inner container with the image and buttons will fade in/out of view when opening/closing the modal. We can’t really apply the fade in/out to the backdrop as it is the root container for the modal and if we hid it until loading was complete you would never see the loader at all, which would probably make people wonder if anything is happening when opening larger images.

Thanks

Thank you both for your replies.

@steveush
I understand the limitations for the free version, but nevertheless I’m quite happy with your solution. It’s not exactly what I was aiming for, but it all feels more smooth now for sure.

The flashing loader indeed looks a bit awkward now, so I added this to my stylesheet to hide it:

.fbx-modal .fbx-loader {
	display: none;
}

I’m happy with the results. The images I normally use are not that heavy, so the loader is not to be missed I think. But I keep an eye on that.

Thank you very much for the information and your CSS code. I think this is great support.