No pasa nada.
Primeramente sé lo que hago pero es una librería que he encontrado para hacer el filtrado de imágenes y me iba bien con la imágen que pongo siempre de prueba, pero al meter ya las de la bbdd me hacía esto que os he contado.
El Jquery llevo relativamente poco tiempo empleándolo y todavía hay cosas que no las controlo muy bien.
Disculpar mi pequeña ignorancia en éste aspecto.
Y tienes razón porque con el follón que tengo aquí en el curro no os he puesto lo que interesa.
Código:
(function($){
/**********************************************
* PORTFOLIO FILTER WITH QUICKSAND
**********************************************/
// PortfolioFilter constructor
// set - initial set of objects (<ul> element)
// filters - elements that have "filter" attr and define filter rules
// conf - configuration object for "quicksand" plugin
// callback - function to run on new item set after rearrange with quicksand
function PortfolioFilter(set,filters,conf,callback){
//check if "quicksand" is loaded
if(typeof $.fn.quicksand != 'function'){
alert("portfolio: quicksand plugin is not loaded");
return;
}
// make sure we have something to sort
if(!(set.length && filters.length)){
return;
}
//save ref to "PortfolioFilter" object in local variable
var ref = this;
this.set = set;
this.setCopy = set.children().clone();
this.setTempCopy = null;
this.quicksandConf = conf;
this.afterCallback = function(){
if(typeof callback == 'function'){
callback(ref.set);
}
};
//add click handlers to portfolio filters
filters.click(function(e){
ref.find($(this).attr('filter'));
//apply active class to filter
var link_wrap = $(this).parent();
link_wrap.siblings('.active-filter').removeClass('active-filter');
link_wrap.addClass('active-filter');
e.preventDefault();
}).eq(0).parent().addClass('active-filter');
// portfolio preload (preloadImage,preloadTime)
set.children().css('opacity',0);
set.css({'backgroundImage':'url("images/loader.gif")','backgroundPosition':'50% 50%','backgroundRepeat':'no-repeat'});
var set_length = set.find('img').length;
set.find('img').bind('load',function(){
set_length--;
if(set_length == 0){
set.css({'backgroundImage':'none'});
set.children().each(function(i){
$(this).animate({'opacity':1},500);
});
}
});
}
// method to filter elements (uses .filter() jquery function)
PortfolioFilter.prototype.filter=function(by){
this.setTempCopy = this.setTempCopy.filter(by);
};
// method to sort elements (uses numeric sorting by attr values)
PortfolioFilter.prototype.sort=function(by){
if(by != ''){
this.setTempCopy.sort(function(a,b){
return parseInt($(b).attr(by)) - parseInt($(a).attr(by));
});
}
};
// method that uses filter() and sort() to find final set of elements
PortfolioFilter.prototype.find=function(filter){
var filter_class="*";
var filter_attr='';
//look for 'class'
var filter_value = filter.match(/;?class:(\w+);?/);
if(filter_value !== null){
filter_class = '.'+filter_value[1];
}
//look for 'attr'
var filter_value = filter.match(/;?attr:(\w+);?/);
if(filter_value !== null){
filter_attr = filter_value[1];
}
this.setTempCopy = this.setCopy.clone();
this.sort(filter_attr);
this.filter(filter_class);
//realign items with quicksand
var ref = this;
this.set.quicksand(this.setTempCopy,this.quicksandConf,this.afterCallback);
};
//create jQuery plugin
$.fn.portfolioFilter = function(quicksand,callback){
var filter = new PortfolioFilter($('.folio-list',this),$('a[filter]',this),quicksand,callback);
//chaining
return this;
}
})(jQuery);