Toggle from imageCarrusel to portfolio widget

Hi,

I have a button that toggles from the image carrusel to the fp-portfolio widget. It works, but the problem is that when it toggles, the widgets appears like break or un-layout, but when I click in a filter option “show all” for example of the portfolio widget it works and looks good.(The same the other way around, in case of the carrusel, if I wait until it calls the function to show the next 3 images it works perfect).

So my questions is the following:
Is there any option to update the portfolio, or to set the current active filter manually with a js script?
My code is the following (ourWorkCarrusel is the image carrusel and the ourWorkAll is the portfolio):

jQuery(function($) {
	$('#ourWorkAll').hide();
	 $( '#showAllProjects' ).on( 'click', function( event ){
		event.preventDefault();
      	       $('#ourWorkCarrusel').toggle("slow");
		$('#ourWorkAll').toggle("slow");
  	});
});

Thank you very much.

Hello there,

Please share a link to your site, so I can check it directly.

Regards,
Kharis

Sure, thanks.

http://www.cgpills.eu/cgPillsNew/

Hello there,

Thank you for sharing. I tested it and it’s really good. Almost working. I think you should re-initiate the masonry grid with reloadItems() method. See: https://masonry.desandro.com/methods.html#reloaditems

Regards,
Kharis

Thanks for your reply,

I have it pretty much working with reloadItems(), but just for the image carrusel, not for the fp-portfolio.
The code I’m using is the following:

jQuery(function($) {
	$('#ourWorkAll').hide();
	 $( '#showAllProjects' ).on( 'click', function( event ){
		event.preventDefault();
      	$('#ourWorkCarrusel').toggle("slow");
            $('#ourWorkCarrusel').masonry('reloadItems');
		$('#ourWorkAll').toggle("slow");
            $('#ourWorkAll').masonry('reloadItems');
  	});
});

Do you know what could happen?

Thanks.

Hi,

Any news with that?
I don’t really know how to solve the problem, it is still there.

Thank you very much.