Monitor Reply

Support

Loading Icon for slower loading galleries?

Permalink Browser Info Environment February 22, 2016 at 5:50 PM

Hey there - Just wondering - I've got a site with some fairly large galleries on it and am wondering if there is any way to get a loading notification while the gallery is loading up? Like a spinning icon or something?

Your help appreciated,
Judd

Type:	Discussion
Status:	Resolved

emirii replied on Feb 22, 2016 at 9:12 pm Permalink Reply

Hey there,

You can do several things with some simple jQuery in your theme:

It would require a template override of my Package (under packages/gallery_e_s/blocks/gallery_e_s_view/view.php)

On line 40 of that file there is:

<div class="galleryES galleryES<?php  echo $ubID ?>">

just replace with:

<div class="galleryESLoading">Loading Gallery...</div>
<div class="galleryES loading  galleryES<?php  echo $ubID ?>">

You can also replace the Loading Gallery... text with a spinning gif or whatever you prefer, and style however you want.

Then add this jQuery to bottom of page or wherever as long as its included afte the jQuery library:

<script>
$(document).ready(function() {
   $('.galleryESLoading').hide();
  $('.galleryES').fadeIn(1000, function() {
    $('.galleryES').removeClass('loading').addClass('loaded');
  });
</script>
});

Then just a little bit of CSS at the bottom of all your other CSS:

.galleryES.loading {
  display: none;
}
.galleryES.loaded {
  display: block;
}

Then you get a nice fade-in with a loading notification!

Here's a JSfiddle:
https://jsfiddle.net/xpn47svL/6/...

Let me know if you need additional help with it.

juddc replied on Feb 23, 2016 at 2:15 pm Permalink Reply

Thanks - I'll give it a shot.

juddc replied on Feb 23, 2016 at 6:28 pm Permalink Reply

Hey there - Followed the instructions and no dice - didn't want to work for me. Any other help?

emirii replied on Feb 23, 2016 at 7:09 pm Permalink Reply

Hey there, do you have a public page I can see your modifications on?

emirii replied on Feb 23, 2016 at 7:19 pm Permalink Reply

Actually hang tight... I should be able to add something pretty nifty to the add-on! Give me about a day for a new version, maybe a lot less.

juddc replied on Feb 23, 2016 at 7:59 pm Permalink Reply

Sure thing - Thanks!

emirii replied on Feb 24, 2016 at 1:01 am Permalink Reply

I have updated version 4.2.1, if you would please try it out and let me know if that's what you had in mind!

If you have existing blocks you will need to edit them and enable the new feature, under tile gallery there is a checkbox name "Enable Image Loader Placeholder"

If you had any overrides or changes to the add-on i would remove them before applying to update just to save a little confusion.

If you run into any problems a public url of the website would help bunches (you can PM me C5 login infos if you want to keep it private)

Thank you!

juddc replied on Feb 24, 2016 at 1:32 am Permalink Reply

The beta site I'm working on isn't connected to the community. Can I download the latest version via my license and just replace the package in the Packages folder?

emirii replied on Feb 24, 2016 at 9:02 am Permalink Reply

Yes that should work!

juddc replied on Feb 25, 2016 at 1:30 am Permalink Reply

Hey there,

I took a copy of the website local and added the new version of the Add-On - Did you only make the loader available to the Tile gallery?

I've been using the Slideshow single gallery.

emirii replied on Feb 25, 2016 at 8:25 am Permalink Reply

Heya, sorry I've been assuming the Tile gallery for some reason (each gallery is completely different code wise)!

I can see if I can add preloader to the Slideshow tonight!

emirii replied on Feb 25, 2016 at 4:40 pm Permalink Reply

Hello, I have updated to version 2.4.2 that includes a loader before slideshow loads.

You can override the styles in your own css if you don't want the black/loading image etc:

.flexslider.loading, .bx.loading {
                height: 300px; 
                overflow: hidden;
                background: black url("/packages/gallery_e_s/src/Assets/images/loading.gif") no-repeat center center !important;
            }

if your slider container is fixed height i would change the height of loading to that, etc.

Because the sliders look really ugly if they don't load fast enough, this is just on by default. So you shouldn't have to edit anything in the block.

Hope this helps!

juddc replied on Feb 25, 2016 at 5:00 pm Permalink Reply

That seems to have done it - Thanks - That's awesome!

On 2016-02-25 1:40 PM, concrete5 Community wrote:

GalleryES

Support

Loading Icon for slower loading galleries?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post