I have managed to create a page with a set of wedding images which I can filter by 5 categories using the MixItUp3 tutorial for Webflow. It took me awhile as I am not the most comfortable with Javascript but everything is working as I want except for one thing. As I understand it, the images should be laid out masonry-style, meaning that despite having various heights/widths, all the images stack together, if that makes sense?
As you can see on my page that’s not happening. I tried looking into how to fix this myself but can’t seem to find any examples with .mix element of varying heights/widths.
I might be getting MixItUp3’s functionality confused with Isotope? but regardless, does anyone have any recommendations for how to give this grid of images a “masonry” style layout?
The second issue I’d love some input on is how to make my filter ‘links’ change their styling when “active” (similar to what I’ve done on my “archive” page using @buntestrahlen’s guide here. I tried changing the “focussed” state but it doesn’t seem to have any effect.
UPDATE:
I played around with adding masonry.js from this tutorial that @Marci posted to the Forums here. I was excited because it seemed to work, but when I went to filter by any of the categories it broke pretty hard. Any suggestions on what to try from here? I feel like I am close to figuring it out.
Above is the code I added before the tag on the ‘weddings’ page. I changed .masonry to .container and .masonry-item to .mix because I figured I needed to so it could speak to the class names I gave the elements on the page.
Thank you for sharing this link. I am not sure I 100% understand the solution. I pasted the code on the Stackoverflow comment so all lines of my custom code of my Before /body tag section of my page “weddings” is as follows:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>
<script>
// Creating dynamic elements classes from its categories:
var catArray = document.querySelectorAll('.w-dyn-item .categ');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
if (!text) {
text = 'empty';
}
var conv = text.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
var className = conv.replace (/ /g, "-")
.toLowerCase()
.trim();
if (!isNaN(parseInt(className.charAt(0), 10))) {
className = ("_" + className);
}
elem.parentElement.classList.add(className); });
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll('.w-dyn-item .title');
sortArray.forEach( function(sortElem) {
var sortText = sortElem.innerText || sortElem.innerContent;
sortElem.parentElement.setAttribute('data-order', sortText);});
// Set the reference to the container
var containerEl = document.querySelector('.container');
// Call the MixitUp plugin
mixitup(containerEl);
</script>
<script>
// mixItUp function
$('#grid').mixItUp({
activeClass: 'on',
callbacks: {
onMixEnd: function(state){
masonryGrid(); // ******* here call masonry function
}
}
});
function masonryGrid(){
var $container = $('#container');
// initialize
$container.masonry({
itemSelector: '.item',
columnWidth: '.item', //as you wish , you can use numeric
isAnimated: true,
});
$container.masonry('reloadItems');
$container.masonry('layout');
}
</script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script>
//init masonry grid
$(window).on("load", function() {
$('.container').masonry({
itemSelector: '.mix'
});
});
</script>
--!>
I have exactly the same problem! I really need help with this, please. I understand the logic behind the fix but I don´t get it working. How do I have to adjust the code from stackoverflow?