Home → Question →

Background gallery 'Buffering' graphic

• Edit

paulsamuelwhite

Sep 23, 2014 @ 01:03 PM

Hi Berta,

In the background gallery, is there a way to have a different 'buffering' graphic between images other than the cycling dots?

Thanks,

Paul

1. Support Staff 1 Posted by Uldis on Sep 23, 2014 @ 01:17 PM

   

   Hello, Paul,
   yes, it's possible.
   under "template design - custom CSS" add this CSS definition:
   

   div.xGalleryContainer .loader {
   background: url('http://ajaxload.info/cache/FF/FF/FF/00/00/00/39-0.gif') no-repeat center center;
   width: 24px;
   height: 24px;
   }
   

   you can change the image you wish.

   Good luck

   • Edit

2. Uldis closed this discussion on Sep 23, 2014 @ 01:17 PM.

3. Paul White re-opened this discussion on Sep 23, 2014 @ 05:23 PM

4. 2 Posted by Paul White on Sep 23, 2014 @ 05:23 PM

   

   Hi Uldis,

   I tried your advice but with no result. I used ajaxload to generate a loading gif, then saved this gif, uploaded it to image host site, and pasted the image url in place of the previous image. I pasted the code in the CSS box, no other code is in there. Do you know what I've done wrong?

   Also, is there a way to change the 'menu' image in responsive?

   thanks,

   Paul

   • Edit

5. Support Staff 3 Posted by Uldis on Sep 24, 2014 @ 07:58 AM

   

   I can see, that it's working for slideshow gallery type, see attached screenshot. Maybe you mean a full screen gallery loading image? In this case use this custom CSS code:
   

   .mbLoading{ 
   background: rgba(255,255,255,0.8) url('http://example.com/sample.gif') no-repeat center; 
   }
   

   Keep in touch

   • loading.png 257 KB
   • Edit

6. Uldis closed this discussion on Sep 24, 2014 @ 07:58 AM.

7. Uldis re-opened this discussion on Sep 24, 2014 @ 08:03 AM

8. Support Staff 4 Posted by Uldis on Sep 24, 2014 @ 08:03 AM

   

   Here is the sample code for custom responsive menu toggle button:
   

   #menuToggle {
   background: url('http://s28.postimg.org/4c0z2h9uh/34_1.gif') no-repeat center center;
   border: none;
   }
   #menuToggle span, #menuToggle span:before, #menuToggle span:after {
   display: none;
   }
   

   you can customise this code as you wish

   Have a nice day

   • Edit

9. Uldis closed this discussion on Sep 24, 2014 @ 08:03 AM.