Hi Elsija,
While it should be possible to run multiple instances of the plugin, it is not recommended from a user experience point of view. Multiple galleries in different non-AJAX tabs can slow down your initial page load as the images of several galleries will attempt to load at the same time. In addition, repositioning the elements in a largish gallery after the page resizes can be quite resource heavy – and this problem can be compounded if there are multiple galleries present. So for these reasons, I recommend trying to find a different method altogether.
AJAX
If all of the galleries must be accessed from the same page, it would be good for each tab to AJAX load the galleries.
If you’re unfamiliar with AJAX: AJAX (in this context) would refer to the loading of page content from the server into a DIV on your page after it has loaded. WordPress is built in PHP, and PHP can only be interpreted by your server – not your browser. That means that any PHP requests must be made before your browser sees the page content. Therefore, shortcode (which relies on PHP) cannot be executed on a page after it has loaded.
So, how does AJAX help? AJAX allows server requests to be made from a page after it has loaded in the browser. With AJAX, new mini-pages (complete with PHP) can be retrieved from the server and pasted into your page after it has already loaded.
So in your case, it would be good to have each tab as a separate PHP page snipped with all the content (including the shortcode) dynamically loaded when the tab is changed. However, this would require some PHP, JavaScript, and JQuery knowledge to achieve. Additionally, this would still require each tab to load its images (complete with the loading box) when it is selected. If you are confident with PHP and JavaScript (or at least confident enough to proceed with the abundance of online tutorials available) this could be an option for you.
Cactus Masonry has some shortcode options available that can make the gallery a little more efficient when loaded with AJAX – so if you do get this running, I can help you reduce load times somewhat.
No AJAX
So, back to your problem. I would suspect that the galleries on the inactive tabs are not laying out properly because they (or something they are attached to) are set to CSS display: none while they are loading. This may cause the issue.
Without seeing the page, I can only guess that the chosen tab is set to display: block, while each hidden tab is set to display: none. These settings would of course change as different tabs are selected.
An alternative layout that may work (and this is just speculation at this point) would involve absolutely positioning each tab on top of each other with opacity: 0 when hidden and opacity: 1 when visible. You could even animate the transition between tabs with CSS or JQuery (although this may be laggy). This should allow the galleries to perform their layout correctly. However, as I mentioned above, multiple galleries loaded at the same time may still cause performance issues.
So, short story long, I hope that helps.
