LIBRERIA Isotope :: MANSORY

Hola buenos días,
a ver si me pueden ayudar.
Estoy usando la librería Isotope con el layout masonry en una web con bootstrap, y le tengo puesto que me muestre las fotos a 4 columnas(desde un PC). Hasta ahí todo perfecto.
Lo que me gustaría, seria que cuando ves la web desde móvil, en vez de mostrarme el contenido a una columna(como hace ahora), me gustaría que me lo mostrara a dos columnas. Así que la pregunta es:
Como configuro la llamada a la librería, para que cuando este en modo smartPhone, me ponga dos/tres columnas, y cuando este en modo Desktop me ponga 4.
Los elementos son asi:

Código HTML :

<div class="portfolio portfolio-masonry col-4  gutter">
                        <div class="portfolio-item">
                           <div class="thumb">
                              <img  style="cursor:hand; cursor: pointer" src="<?echo base_url();?>fotos/<? print $row['NOMBREFICHERO']?>"/>

Y la llamada a la libreria es asi:

Código Javascript :

        $(window).load(function () {

            var $c = $('.portfolio-masonry');
            if (typeof imagesLoaded == 'function') {
                imagesLoaded($c, function () {

                    setTimeout(function () {
                        $c.isotope({
                            itemSelector: '.portfolio-item',
                            resizesContainer: false,
                            layoutMode: 'masonry',
                            filter: "*"
                        });
                    }, 500);

                });
            }

        });

Muchas gracias y un saludo
David,
soluciones web

Hola amigo veo que tus preguntas son de un nivel mayor a un novato, pues ya conoces como funciona una invocación y los parámetros.

Sin embargo parece que te quedas un poquito corto a la hora de personalizar librerías, según las respuestas pasadas en este foro. en fin.

La respuesta para esta es:

No hay un modo con CSS o JS que permita hacer lo que pides, sin antes conocer la librería que estas utilizando. ¿porque?

Pues bien la librería ya tiene un flujo de métodos así como estilos aplicables, que los creadores entienden. En el mejor de los casos ya pueden existir estas opciones solo necesitamos leer la documentación. (es decir poner 2 o mas columnas con un viewport corto)

En el peor de los casos, las opciones no existen y podrías implementarlas o pedir a alguien implementarla, y bueno de ahí se vería quien tiene el tiempo para poder ayudar.

Saludos.

LA segunda cosa es que no lei que en el tema viene el nombre de la libreria, así que también fue un descuido mio.

Verificando las opciones, en http://isotope.metafizzy.co/options.html

No hay forma de hacer lo que pides con las opciones que da el desarrollador, por lo que hay que implementar una.

También podrias solicitar esta implementación de mejora en el sitio Github del repositorio oficial https://github.com/metafizzy/isotope

Suerte con tu búsqueda

Hola buenos días,
dices que no se puede cambiar el layout de isotope, dependiendo de si estas en Desktop, SmartPhone o tablet... Te confundes. Si se puede.

Aunque ando un poco corto de personalización de librerías, te pongo la solución, por si en algún momento, puedes ayudar a alguien:

Código CSS :

 .grid-item,.grid-sizer { width: 25%;}
   
   @media screen and (max-width: 760px) 
   {
      .grid-item,
      .grid-sizer {width: 50%;}      
   }

Código Javascript :

var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid-sizer'
    }
  });

Un saludo
David, soluciones web