Solution:
Resolved the issue by replacing Cycle2 with a responsive slideshow script called Slick.
Check out the code on jsfiddle.
(function($) {
var $carousel = $('.carousel'),
$masonry = $('#cards');
$carousel.on('afterChange', function(slick){
$masonry.masonry({
itemSelector: '.card-item'
}).on('shown.bs.collapse hidden.bs.collapse', function() {
$masonry.masonry();
});
}).slick({
arrows: false,
speed: 0,
infinite: true,
autoplay: true,
autoplaySpeed: 400
});
})(jQuery);
Original Question:
Adapted the card-column "masonry" from bootstrap 4 to work with masonry js instead, but ran into an issue with the collapse link. The grid-item does not push its container down to reformat the masonry layout as intended.
Despite the collapse link showing and hiding properly, the layout remains unchanged, causing elements to overlap instead of maintaining the masonry layout.
Check out the jsfiddle here.
Attempted to incorporate the following code with no success:
$grid.on('shown.bs.collapse', function() {
$grid.masonry('layout');
});
Struggled to merge bootstrap events with masonry layout to achieve desired effect.
$('.collapsing').on('show.bs.collapse', function () {
// do something…
$grid.masonry('layout');
});
Enhanced code snippet in the fiddle includes both of these attempts.
Looking for a solution that involves:
- Determine container size when closed
- Determine container size when opened
- Adjust layout to accommodate open size
Struggling to translate this concept into proper code implementation.