Submit your widget

jQuery plugin for better grid layouts

Created 11 months ago   Views 8503   downloads 1517    Author htmldrive
jQuery plugin for better grid layouts
View DemoDownload 156.4 KB
21
Share |

Better Grid Layouts - Especially for Portfolio Pages!

Install using Bowerbower install brickfolio

 

Or copy the following files into your project:

Usage

In your HTML:

<div class="brickfolio">
    <div class="bf-item">
        <img data-src="image1.png">
        <h4>Lorem ipsum dolor sit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eadem nunc mea adversum te oratio est.</p>
    </div>
    <div class="bf-item">
        <img data-src="image2.png">
        <h4>Quare attende, quaeso</h4>
        <p>Quare attende, quaeso. Sed plane dicit quod intellegit. Non semper, inquam;</p>
    </div>
</div>

In your Javascript:

jQuery(function($){
  $('.brickfolio').brickfolio({
        animation: 'fly', // drop|fade-in|flip|fly|pop-up|scale-up|slide-up|swing-down
        filter: '.ignore-item', // a selector used to filter out items
        gutter: 40, // number in pixels of the gutter between items
        responseTime: 200, // number in milliseconds before the layout is redrawn after the window resizes
        hideErrors: false, // automatically hides items where the image fails to load
        classes: {
            container: 'brickfolio', // class added to the container
            loaded: 'bf-loaded', // class added to the container once items are loaded
            animated: 'bf-animated', // class added to the container to indicate animations are supported and being used
            item: 'bf-item', // class added to items within the container
            error: 'bf-error', // class added to items that have broken images
            filtered: 'bf-filtered' // class added to filtered items
        }
    });
});

 

Tag: layout