Pinto.js : jQuery Grid Layout Plugin


Pinto.js is a lightweight and customizable jQuery plugin for creating pinterest like responsive grid layout. Pinto.js is intended for easy use and is fully deployable within minutes. The minified version is under 1KB. This plugin is very accessible & easy to use.(the minified version is under 1KB) autosize supportfluid item width animation (CSS3 transition)

Pinto is an extremely lightweight jQuery plugin which allows you to dynamically arrange your images in a Pinterest-like responsive, fluid grid layout.

Features of Pinto.js jQuery Grid Layout:

  • Super simple and lightweight.
  • Auto rearrange images with a smooth CSS3 transition on window resize.
  • Fluid item width based on the viewport size.
  • lightweight (the minified version is under 1KB)
  • autosize support
  • fluid item width
  • animation (CSS3 transition)

Configuration of Pinto.js jQuery Grid Layout

Enable Pinto Image Formatter and dependent JQuery Update and Libraries by going to Administration » Modules
The formatter will appear as Pinto.
Pinto Image Formatter settings are in the Manage Display tab for Content Types, users and Entities which use Image Field.
The size of the image block is customizable and can be changed through the Image Style options.
There are options to link the image to file or content.
Image titles are shown as image caption. To do so, the title attribute should be enabled from Manage Fields page » Edit of the desired field and under IMAGE FIELD SETTINGS select Number of values users can enter for this field.

Pinto can display the big images organised into colorbox gallery. This option requires the module Colorbox to be enabled. When it’s enabled, the relevant format option will be displayed under Link to in Format settings.

How to use it:

1. Load jQuery JavaScript library and the jQuery Pinto plugin at the end of the document.

1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="pinto.js"></script>
01 <div id="container">
02
03   <!-- These are our grid blocks -->
04   <div>
05     <img src="1.jpg">
06     <h3>Title 1</h3>
07   </div>
08   <div>
09     <img src="2.jpg">
10     <h3>Title 2</h3>
11   </div>
12   <div>
13     <img src="3.jpg">
14     <h3>Title 3</h3>
15   </div>
16
17   ..
18
19 </div>

3. The required CSS styles for the grid blocks & images.

01 #container {
02   width:100%;
03   margin:auto;
04 }
05
06 #container > div {
07   -webkit-box-shadow:0 4px 15px -5px #555;
08   box-shadow:0 4px 15px -5px #555;
09   background-color:#fff;
10   width:220px;
11   padding:2px;
12   margin:5px;
13 }
14
15 #container > div img {
16   padding:0px;
17   display:block;
18   width:100%;
19 }

4. Call the plugin on the parent container and done.

1 $('#container').pinto();

5. Available options.

01 $('#container').pinto({
02
03 // a class of items that will be layout
04 itemClass:"pinto",
05
06 // a class of items that will be skipped and not layouted
07 itemSkipClass:"pinto-skip",
08
09 // the width of one grid block in pixels
10 itemWidth: 220,
11
12 // the width spacing between blocks in pixels
13 gapX: 10,
14
15 // the height spacing between blocks in pixels
16 gapY: 10,
17
18 // a blocks alignment ("left", "right", "center")
19 align:"left",
20
21 // adjust the block width to create optimal layout based on container size
22 fitWidth:true,
23
24 // up<a href="https://www.jqueryscript.net/time-clock/">date</a> layout after browser is resized
25 autoResize:true,
26
27 // time in milliseconds between browser resize and layout update
28 resizeDelay: 50,
29
30 // fire after item layout complete
31 onItemLayout:function($item, column, position) {},
32   
33 });

 

Leave a Reply

Your email address will not be published. Required fields are marked *