Bought a template and I'm using this in MODX 2.2.4-pl. This template has a portfolio page with a filter option (jquery masonry). In the template it works perfectly but in modx it doesn't.
<section class="filter">
<a href="#">all</a>
<a href="#video">video</a>
<a href="#graphics">graphics</a>
<a href="#webdesign">web design</a>
<a href="#photography">photography</a>
</section>
Clicking one of the links the filter works for a second and after that I get redirected to the homepage.
I tried adding [[~[[*id]]]] before the #, but that makes all the itens dissapear and there is nothing to filter anymore,
I'm not (yet) familiar with javascript so I did found the filter function but I have no idea if this is what I have to change and how I should do that.
// Filter
$('.filter').each(function() {
var links = $('> a', this);
var items = $(this).next('.items');
links.click(function() {
var category = $(this).attr('href').substr(1);
if (category == '') {
$('.item', items).removeClass('hidden').fadeIn(250);
} else {
$('.item', items).each(function() {
var regexp = new RegExp('\\b'+category+'\\b', 'i');
if (
(typeof $(this).data('category') == 'undefined') ||
(!regexp.test($(this).data('category')))
) {
$(this).addClass('hidden').fadeOut(250);
} else {
$(this).removeClass('hidden').fadeIn(250);
}
});
}
$(this).parent().find('.active').removeClass('active');
$(this).addClass('active');
if (typeof items.data('masonry') == 'object') {
items.masonry('reload');
}
});
if (links.filter('.active').length > 0) {
links.filter('.active').click();
} else {
links.eq(0).click();
}
});
// hash = unescape(self.document.location.hash);
Help would be really appreciated!