I am using isotope filter with infinite scroll plug-in in same page, so that here at the same time both are not working perfectly, some design issues reflecting with isotope jQuery file. When I click more button in scroll, it gets some more post well, but not placed correctly. It takes behind to older post. I couldn't find out the solution still now. If anyone have same problem and found any idea with this means, please feel free to reply for my question.
This is my jQuery function of isotope filter
$(function(){
// Orginal function by Alien51
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 80
},
sortBy: 'number',
getSortData: {
number: function( $elem ) {
var number = $elem.hasClass('element') ?
$elem.find('.number').text() :
$elem.attr('data-number');
return parseInt( number, 10 );
},
alphabetical: function( $elem ) {
var name = $elem.find('.name'),
itemText = name.length ? name : $elem;
return itemText.text();
}
}
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var myArray = [];
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
if($('#arrays').val()=="")
comm = "";
else
comm = ',';
myArray = $('#arrays').val()+comm+'.'+value;
alert(myArray);
//myArray = substring(1, myArray.length);
if(value!='Show All')
$('#arrays').val(myArray);
else
$('#arrays').val('Show All');
if(value=='Show All')
value = '*';
else
value = $('#arrays').val();
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
//alert(key);
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
// dynamically load sites using Isotope from Zootool
//var ajaxError='';
//alert(ajaxError);
$.getJSON('http://zootool.com/api/users/items/?username=desandro' +
'&apikey=8b604e5d4841c2cd976241dd90d319d7' +
'&tag=bestofisotope&callback=?')
.error( ajaxError )
.success(function( data )
{
// proceed only if we have data
if ( !data || !data.length ) {
ajaxError();
return;
}
var items = [],
item, datum;
for ( var i=0, len = data.length; i < len; i++ ) {
datum = data[i];
item = '<li><a href="' + datum.url + '">'
+ '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
+ '<b>' + datum.title + '</b>'
+ '</a></li>';
items.push( item );
}
var $items = $( items.join('') )
.addClass('example');
// set random number for each item
$items.each(function(){
$(this).attr('data-number', ~~( Math.random() * 100 + 15 ));
});
$items.imagesLoaded(function(){
$sitesTitle.removeClass('loading').text('Sites using Isotope');
$container.append( $items );
$items.each(function(){
var $this = $(this),
itemHeight = Math.ceil( $this.height() / 20 ) * 120 - 10;
$this.height( itemHeight );
});
$container.isotope( 'insert', $items );
});
});
});
$("#infscr-loading a").click( function(){
alert('njasd');
var h = $("#container").height();
//alert(h);
$("#container").css("min-height",h);
$("#container").addClass("aft_fst");
});
Thanks in advance for your help.