Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope - add more than 4 columns, or adjust X columns to screensize.

Hi,

Looking for a way to add more columns, and still keep my current setup. My current code is :

jQuery(document).ready(function(){
    // Isotope
        // modified Isotope methods for gutters in masonry
        jQuery.Isotope.prototype._getMasonryGutterColumns = function() {
            var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
                containerWidth = this.element.width();

        this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there\'s no items, use size of container
                  containerWidth;

        this.masonry.columnWidth += gutter;

        this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
        this.masonry.cols = Math.max( this.masonry.cols, 1 );
        };

        jQuery.Isotope.prototype._masonryReset = function() {
            // layout-specific props
            this.masonry = {};
            // FIXME shouldn\'t have to call this again
            this._getMasonryGutterColumns();
            var i = this.masonry.cols;
            this.masonry.colYs = [];
            while (i--) {
                this.masonry.colYs.push( 0 );
            }
        };

        jQuery.Isotope.prototype._masonryResizeChanged = function() {
            var prevSegments = this.masonry.cols;
            // update cols/rows
            this._getMasonryGutterColumns();
            // return if updated cols/rows is not equal to previous
            return ( this.masonry.cols !== prevSegments );
        };

        // cache jQuery window
        var $window = jQuery(window);

        // cache container
        var $container = jQuery(\'#portfolio\');

        // start up isotope with default settings
        $container.imagesLoaded( function(){
            reLayout();
            $window.smartresize( reLayout );
        });

        function reLayout() {

            var mediaQueryId = getComputedStyle( document.body, \':after\' ).getPropertyValue(\'content\');
            // fix for firefox, remove double quotes \"
            if (navigator.userAgent.match(\'MSIE 8\') == null) {
                mediaQueryId = mediaQueryId.replace( /\"/g, \'\' );
            }
            //console.log( mediaQueryId );
            var windowSize = $window.width();
            var masonryOpts;
            // update sizing options 
            switch ( mediaQueryId ) {
                case \'large\' :
                    masonryOpts = {
                      columnWidth: $container.width() / 4
                    };
                break;
                case \'big\' :
                    masonryOpts = {
                      columnWidth: $container.width() / 4
                    };
                break;

                case \'medium\' :
                    masonryOpts = {
                      columnWidth: $container.width() / 4
                    };
                break;

                case \'small\' :
                    masonryOpts = {
                        columnWidth: $container.width() / 2
                    };
                break;

                case \'tiny\' :
                masonryOpts = {
                  columnWidth: $container.width() / 1
                };
                break;
            }

            $container.isotope({
              resizable: false, // disable resizing by default, we\'ll trigger it manually
              itemSelector : \'.hentry\',
              masonry: masonryOpts
            }).isotope( \'reLayout\' );

        }

        // filter items when filter link is clicked
        jQuery(\'#filters a\').click(function() {
            var selector = jQuery(this).attr(\'data-filter\');
            $container.isotope({ filter: selector });
            return false;
        });

        // set selected menu items
        var $optionSets = jQuery(\'.option-set\'),
            $optionLinks = $optionSets.find(\'a\');

            $optionLinks.click(function(){
                var $this = jQuery(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\'); 
            });
});

Any help is very much appreciated.

Best regards Ras

User Gravatar

HH

Posted Jun 20 2013 16:45 UTC

$25


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
  • 3802 Views

3 Replies


Hello Ras,

From the code above, I suppose, that you have responsive site, with fluid masonry elements, that and fixed number of columns on every layout - 4 for the bigger devices, 2 for the medium (i guess portrait tablet and landscape phone) and 1 for the smallest devices.

If you want to change the number of columns on a device, you\'ll have to change the way that it\'s calculated: http://jsfiddle.net/Z4dPj/ (Read the comments)

And here I\'ve changed them for you: http://jsfiddle.net/NRknt/

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jun 20 2013 19:24 UTC

Hi Nikola,

Thanks for your reply! But I also tried that, and the result looks like this.

Default 4 columns : https://docs.google.com/file/d/0B2Yz9QUyQaTCa2hlT1RiQWRJc2s/edit?usp=sharing Changed it to 6 instead : https://docs.google.com/file/d/0B2Yz9QUyQaTCOW50VE45UDNUczQ/edit?usp=sharing

Best regards Ras

User Gravatar

HH

Posted Jun 21 2013 11:33 UTC

I\'ve worked with Ras and solved the problem. Because the project is private, I can\'t post the solution, but I can describe it.

The problem in this masonry was in the css. New media queries was added to manage high resolution displays. Most of the JS was deleted.

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jun 27 2013 19:00 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions