Hola a todos, gracias de antemano y os cuento mi caso:
Mi consulta es sobre esta plantilla de wordpress
http://livedemo00.template-help.com/wordpress_44951/portfolio/portfolio-4/
En la parte del menú donde pone portfolio, da 3 opciones: 2 columnas, 3 columnas y 4 columnas.
No se como hacer para poder poner 5, 6, o el numero que quiera!
La verdad es que no entiendo de programación, pero imagino que los tiros deben ir por esta parte del código:
jQuery(document).ready(function($) {
var $container = jQuery('#portfolio-grid'),
filters = {};
$container.imagesLoaded( function(){
setColumnWidth();
$container.isotope({
itemSelector : '.portfolio_item',
resizable : false,
transformsEnabled : true,
layoutMode: 'fitRows'
});
});
function getNumColumns(){
var $folioWrapper = jQuery('#portfolio-grid').data('cols');
if($folioWrapper == '1col') {
var winWidth = jQuery("#portfolio-grid").width();
var column = 1;
return column;
}
if($folioWrapper == '2cols') {
var winWidth = jQuery("#portfolio-grid").width();
var column = 2;
if (winWidth<380) column = 1;
return column;
}
else if ($folioWrapper == '3cols') {
var winWidth = jQuery("#portfolio-grid").width();
var column = 3;
if (winWidth<500) column = 1;
else if(winWidth>=500 && winWidth<788) column = 2;
else if(winWidth>=788 && winWidth<1160) column = 3;
else if(winWidth>=1160) column = 3;
return column;
}
else if ($folioWrapper == '4cols') {
var winWidth = jQuery("#portfolio-grid").width();
var column = 4;
if (winWidth<380) column = 1;
else if(winWidth>=380 && winWidth<788) column = 2;
else if(winWidth>=788 && winWidth<1160) column = 3;
else if(winWidth>=1160) column = 4;
return column;
}
}
function setColumnWidth(){
var columns = getNumColumns();
var containerWidth = jQuery("#portfolio-grid").width();
var postWidth = containerWidth/columns;
postWidth = Math.floor(postWidth);
jQuery(".portfolio_item").each(function(index){
jQuery(this).css({"width":postWidth+"px"});
});
}
function arrange(){
setColumnWidth();
$container.isotope('reLayout');
}
jQuery(window).on("debouncedresize", function( event ) {
arrange();
});
// Filter projects
$('.filter a').click(function(){
var $this = $(this).parent('li');
// don't proceed if already active
if ( $this.hasClass('active') ) {
return;
}
var $optionSet = $this.parents('.filter');
// change active class
$optionSet.find('.active').removeClass('active');
$this.addClass('active');
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.find('a').attr('data-filter');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
Agradezco vuestra ayuda!
Amigo, habia escrito todo una explicación larga de como funcionaba pero parece que el foro anda cuando quiere, culpa de cloudflare no me la mando, mi deducción era esta, por como funciona el sistema el ancho de una pc para que se puedan colocar 5 columnas tendrá que ser de 1500px, algo muy poco probable
Hola !
Quizás mi respuesta no resuelva del todo tu duda, pero los sistemas de grillas (grid), por lo general usan 12 columnas, lo porque la suma de todas las filas siempre tiene que dar "12" , me explico:
3 filas de 4 columnas = 12
2 filas de 6 columnas = 12
1 fila de 12 columnas = 12
4 filas de 3 columnas = 12
6 filas de 2 columnas = 12
Y en fin, siempre fíjate que la suma de ambas columnas sea 12, si tienes en una misma fila : 6columnas y 7columnas, esta se desfigura, pues no calza en una misma fila.
Saludos.