Cheng
02-13-2014, 07:07 AM
Hi.
I'm using this plugin for a responsive fullscreen isotope portfolio gallery:
jQuery(document).ready(function () {
(function ($) {
var container = $('.gallery-isotope');
function getNumbColumns() {
var winWidth = $(window).width(),
columnNumb = 1;
if (winWidth > 1500) {
columnNumb = 6;
} else if (winWidth > 1200) {
columnNumb = 5;
} else if (winWidth > 900) {
columnNumb = 4;
} else if (winWidth > 600) {
columnNumb = 3;
} else if (winWidth > 300) {
columnNumb = 2;
}
return columnNumb;
}
function setColumnWidth() {
var winWidth = $(window).width(),
columnNumb = getNumbColumns(),
postWidth = Math.floor(winWidth / columnNumb);
}
$('#portfolio-filter #filter a').click(function () {
var selector = $(this).attr('data-filter');
$(this).parent().parent().find('a').removeClass('current');
$(this).addClass('current');
container.isotope({
filter: selector
});
setTimeout(function () {
reArrangeProjects();
}, 300);
return false;
});
function reArrangeProjects() {
setColumnWidth();
container.isotope('reLayout');
}
container.imagesLoaded(function () {
setColumnWidth();
container.isotope({
itemSelector: '.box',
layoutMode: 'masonry',
resizable: false
});
});
$(window).on('debouncedresize', function () {
reArrangeProjects();
});
})(jQuery);
});
The problem is that if I use the following at the beginning of the script:
var container = $('.gallery-isotope');
Filtering works, but it won't go fullscreen.
If I use:
var $container = $('.gallery-isotope');
It goes fullscreen, but the filtering doesn't work any more.
Hopefully someone here can point out what the problem is.
Thanks in advance for any help
I'm using this plugin for a responsive fullscreen isotope portfolio gallery:
jQuery(document).ready(function () {
(function ($) {
var container = $('.gallery-isotope');
function getNumbColumns() {
var winWidth = $(window).width(),
columnNumb = 1;
if (winWidth > 1500) {
columnNumb = 6;
} else if (winWidth > 1200) {
columnNumb = 5;
} else if (winWidth > 900) {
columnNumb = 4;
} else if (winWidth > 600) {
columnNumb = 3;
} else if (winWidth > 300) {
columnNumb = 2;
}
return columnNumb;
}
function setColumnWidth() {
var winWidth = $(window).width(),
columnNumb = getNumbColumns(),
postWidth = Math.floor(winWidth / columnNumb);
}
$('#portfolio-filter #filter a').click(function () {
var selector = $(this).attr('data-filter');
$(this).parent().parent().find('a').removeClass('current');
$(this).addClass('current');
container.isotope({
filter: selector
});
setTimeout(function () {
reArrangeProjects();
}, 300);
return false;
});
function reArrangeProjects() {
setColumnWidth();
container.isotope('reLayout');
}
container.imagesLoaded(function () {
setColumnWidth();
container.isotope({
itemSelector: '.box',
layoutMode: 'masonry',
resizable: false
});
});
$(window).on('debouncedresize', function () {
reArrangeProjects();
});
})(jQuery);
});
The problem is that if I use the following at the beginning of the script:
var container = $('.gallery-isotope');
Filtering works, but it won't go fullscreen.
If I use:
var $container = $('.gallery-isotope');
It goes fullscreen, but the filtering doesn't work any more.
Hopefully someone here can point out what the problem is.
Thanks in advance for any help