PDA

View Full Version : Need sone help with iqery plugin - Please !



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

Deadweight
02-14-2014, 12:25 AM
Do you have a live code example?

Cheng
02-14-2014, 02:29 AM
....... no I don't, but while I was creating a stripped down version for a jsfiddle for you to have a look at, I found the error.
To make a long story short, there was a conflict in one of the css files.
There was an entry with: [ margin: 0; ]
That was causing the conflict, but it's fixed now.
Anyway, thanks for your reply .......