Docs

[esmeet]

Hello,

I’ve set up Essential Grid so the post content opens in a lightbox/modal. I have tried two methods and both are taking a long time (several seconds) to show the lightbox after the button is clicked.

I have a test-page for each method
Default lightbox Fancybox (tutorial I used: https://www.youtube.com/watch?v=shG9O6DcJzg)
http://eskimoos.nl/?page_id=483

EasyModal (tutorial I used: https://www.themepunch.com/faq/open-post-content-inside-modal-popup/)
http://eskimoos.nl/?page_id=475

I would like the box to appear much quicker (it’s also slow with just text as content). It would already be better if just the overlay appeared immediately after clicking or if a preloader/spinner appears.

I have tried everything but couldn’t find a solution. I hope you guys can help!

[esmeet]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

Everything is slow on my end, even the loading. Have you tried decreasing the image size? Took time to load on my end, and lightbox won’t display the image until it is completely loaded.

Thanks!

[esmeet]

The second item has a really small image and no images in the lightbox content. It’s still slow to open.

I would like a preloader to appear immediately after clicking the item, how can I achieve this?

[Nabeel A]

Hi again,

Yes that can possible. To achieve a similar effect, first add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.loader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #000;
    z-index: 9999;
}

.loader:before {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 40%;
    z-index: 99999;
    content: 'Please Wait';
    font-size: 40px;
    color: White;
    text-align: center;
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.tp-esg-item').click(function(){
		var loader = '<div class="loader"></div>';
		$('body').append(loader);
		var popup = setInterval(function(){ 
			if($('.eg-ajax-closer-wrapper').length) {
				$('.loader').hide();
				clearInterval(popup);
			}
		}, 1000);
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[esmeet]

Thanks a lot!

Just two things:

– It works only when clicking outside the loupe-button. How can I add this div to the code?

– It disappears a little too quickly, there is a gap between the loader and the opening of the modal. How do I make it stay until the loader appears?

Here’s the page: http://eskimoos.nl/?page_id=483

[Rad]

Hi there,

Hmm, it’s slow because the content is loaded through Ajax. Usually, it depends on connectivity and site’s processing power.

It can’t be fix by CSS and javascript permanently, it’s just a temporary fix since Ajax loading speed varies. Example, it appears too slow on my end and had to wait for each click.

I checked my network logs and Ajax request is finished at 14.5 seconds and it’s random. I think you shouldn’t utilize ajax content if your site responds too slow. Try increasing your site’s memory limit or host it on cloud hosting. I downloaded your EG and it works fast which confirm that your site’s connectivity and processing power are affecting it.

Thanks!

[Author]

Posts