This template is a Isotope example that requires jQuery and Isotope from here:
http://isotope.metafizzy.co/
Include it like this with TypoScript:
page {
includeJSFooter.isotope = fileadmin/templates/scripts/mpezzi-bootstrap_isotope/js/isotope.pkgd.min.js
includeJSFooter.isotopeinit = fileadmin/templates/scripts/mpezzi-bootstrap_isotope/js/isotope.init.js
}
isotope.init.js should contain something like this:
var lastiso = '';
$('.grid').isotope({
// options
itemSelector: '.grid-item',
// layoutMode: 'fitRows',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: 50
}
});
$('.isoheader').click(function(event){
event.preventDefault();
$(this).closest('div').addClass('isoopen');
$(this).closest('div').addClass('grid-item--width2');
$(this).closest('div').addClass('grid-item--height2');
if (lastiso != '') {
lastiso.removeClass('isoopen');
lastiso.removeClass('grid-item--width2');
lastiso.removeClass('grid-item--height2');
}
lastiso = $(this).closest('div');
$('.grid').isotope('layout');
});
Note: if you want to copy this HTML-file to your fileadmin-folder, you can specifty the folder like this:
plugin.tx_camaliga.view.templateRootPaths.1 = fileadmin/template/files/
Copy this file in a subfolder named "Content" of this folder.