Sometimes you may need different configurations for different viewport sizes. So let’s make the configuration responsive.
Gridzy.js itself does not support responsive configuration, but adding such a feature is really easy. We only have to set the new options as soon as the window size changes.
Just look at the following script:
<script>
document.addEventListener('DOMContentLoaded', function() {
function update(viewport) {
/**
* here we iterate through all gridzy galleries so that each gallery is adjusted
*/
document.querySelectorAll('.gridzy').forEach(function(gridzyElement) {
/**
* first we get the specific gridzy instance
*/
var gridzyInstance = gridzyElement.gridzy;
/**
* here we set the options for screens wider than 999 pixels
*/
if (viewport.width >= 1000) {
gridzyInstance.setOptions({
desiredHeight: 300
});
}
/**
* here we set the options for screens smaller than 1000 pixels but wider than 499 pixels
*/
else if (viewport.width < 1000 && viewport.width >= 500) {
gridzyInstance.setOptions({
desiredHeight: 200
});
}
/**
* here we set the options for all other screens (so for screens smaller than 499 pixels)
*/
else {
gridzyInstance.setOptions({
desiredHeight: 100
});
}
});
}
// the rest is to retrive the viewport size and to call the update function when needed
function getViewportSize() {
return {
width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
};
}
window.addEventListener('resize', function() { update(getViewportSize()); });
update(getViewportSize());
});
</script>Place this script anywhere after the main Gridzy.js file and adopt it to your needs. You can respond also on viewport.height if you like and you can change any option parameter.
The above script works with breakpoints. However, you could also realize very dynamic values. Here is an example just to stimulate your creativity:
...
function update(viewport) {
gridzyInstance.setOptions({
desiredHeight: Math.round(viewport.width / 5) // here we set the desiredHeight option always to a fifth of the viewport width
});
}
...I hope everything is clear. However, if you have any questions, please contact me ✌😉
