Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Masonry grid - 2 rows in different width?

5 years 6 months ago #1

  • tschiwi's Avatar
  • tschiwi
  • Posts: 27
Hi,

is it possible to have a masonry grid with 2 colums, where the second colum is twice as width as the first?
like 33% | 66% ?

just like this one (3 pics, near bottom) www.sporer-alm.com/wilderer-chalet.html

5 years 6 months ago #2

  • Artem's Avatar
  • Artem
  • Posts: 9812
Hello,

Here is solution. Go to: components/com_bagallery/assets/js/ba-gallery.js
Lines 805 - 806

Replace from:
gallery.find('.ba-gallery-items').height('auto');
gallery.find('.ba-gallery-items, .ba-gallery-items img').width(widthContent);

to:
if (imgC == 2) {
    var s = galleryOptions.image_spacing * 1,
        w = $container.width() * 1;
    widthContent =  Math.floor(((w - s *  6) / 3) + s);
    gallery.find('.ba-gallery-items').each(function(i){
        var width = widthContent;
        if (i % 2 == 1) {
            width = widthContent* 2 + s
        }
        jQuery(this).width(width);
        jQuery(this).find('img').width(width)
    });
} else {
    gallery.find('.ba-gallery-items, .ba-gallery-items img').width(widthContent);
}
gallery.find('.ba-gallery-items').height('auto');

Important, it will work only with 2 columns

Regards,
Powered by Kunena Forum