The Easter Sale is on! Join now or renew your subscription with a 25% OFF! Read More

Support Forum

Gallery particles in roksprocket tabs

Have you tried placing the gallery particles in multiple roksprocket tabs...
Issue is on the first tab, the images display correctly - but, on the next tabs, the images are all stacked together...

Regards

Accepted Answer

Tuesday, December 06 2016, 02:41 PM - #Permalink
Hi Mohamed,

This is how the UIkit's Dynamic Grid component works.
It initializes on certain events like page load, browser re-size, etc.
The "Gallery" particle (UIkit's Dynamic Grid) does not get initialized in the inactive Tabs because they are not considered as part of the DOM until they got active.

All you need to do is to manually initialize the grid on a certain event. In your case, the event will be when the tab gets clicked.
Here's what you need to do:

1. Add the following JS code under the "Page Settings" tab in the Base outline:

(function($) {
$(document).ready(function() {
$(".sprocket-tabs .sprocket-tabs-inner").on("click", function(){
function gridAfterFilter() {
$('[data-uk-grid]').trigger('display.uk.check');
}
setTimeout(gridAfterFilter, 200);
});
});
})(jQuery);


2. Clear Joomla cache and refresh.

Have a look at this video (watch it in Fullscreen and FullHD for better quality). It shows everything that I explained above ;)
The reply is currently minimized Show
Responses (2)
  • Accepted Answer

    Saturday, August 04 2018, 04:46 PM - #Permalink
    Hello Ivo...i followed the instructions on the link and used the code here
    however it work partly. It loads but only when i click again on after the first click or if i navigate away from the tab then return to the tab

    so on the first click it doesnt display the images on their columns:(
    The reply is currently minimized Show
  • Accepted Answer

    Sunday, August 05 2018, 08:58 PM - #Permalink
    Hi Rotimi,

    I'm a bit confused.
    Did you mistakenly commented in this discussion instead the other one that you opened?
    You must use the code from the other discussion. The code in this discussion is for the Roksprocket Tabs extension.

    Anyway, if you still experience the issue even after using the correct code, then please send me your site details by using the Site Details tab in your other discussion and I will have a look.
    The reply is currently minimized Show
Your Reply

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!