This time I will share jQuery Plugin and tutorial about Responsive & Dynamic jQuery Grid Layout Plugin – Brick Folio, hope it will help you in programming stack.
| File Size: | 31.1 KB |
|---|---|
| Views Total: | 4330 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Brick Folio is a responsive jQuery plugin to create dynamic, fluid, animated and highly customizable layouts for your portfolio website.
More examples:
Basic Usage:
1. Embed the jQuery Javascript library and the jQuery brick folio plugin in the document.
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
2 |
<script src="src/js/jquery.brickfolio.js"></script> |
2. Create a responsive and dynamic portfolio layout using plain html structure as follows.
01 |
<div class="brickfolio"> |
02 |
03 |
<div class="bf-item"> <img data-src="1.jpg"> |
04 |
<h4>Title 1</h4> |
05 |
<p>Description 1</p> |
06 |
</div> |
07 |
08 |
<div class="bf-item"> <img data-src="2.jpg"> |
09 |
<h4>Title 2</h4> |
10 |
<p>Description 2</p> |
11 |
</div> |
12 |
13 |
<div class="bf-item"> <img data-src="3.jpg"> |
14 |
<h4>Title 3</h4> |
15 |
<p>Description 3</p> |
16 |
</div> |
17 |
18 |
... |
19 |
20 |
</div> |
3. Initialize the plugin with one JS call.
1 |
jQuery(function($){ |
2 |
$('.brickfolio').brickfolio(); |
3 |
}); |
4. The sample CSS to style the layout and children items.
01 |
.brickfolio { |
02 |
font-size: 16px; |
03 |
margin: 0 auto; |
04 |
background: #fff; |
05 |
padding: 40px; |
06 |
height: 200px; |
07 |
/* The brickfolio container must have a width set and it is recommended to make the min-width the same as the item width. */ |
08 |
width: 100%; |
09 |
min-width: 250px; |
10 |
} |
11 |
12 |
.brickfolio.bf-loaded { background: #fff; } |
13 |
14 |
.bf-item { |
15 |
background-color: #FFF; |
16 |
color: #333333; |
17 |
-webkit-box-shadow: 0 3px 8px rgba(50, 50, 50, 0.50); |
18 |
-moz-box-shadow: 0 3px 8px rgba(50, 50, 50, 0.50); |
19 |
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.50); |
20 |
/* The brickfolio item must have a width set. */ |
21 |
width: 250px; |
22 |
} |
23 |
24 |
.bf-item.bf-loaded { } |
25 |
26 |
.bf-item.bf-error { } |
27 |
28 |
.bf-item.blue { border: solid 4px #2074ff; } |
29 |
30 |
.bf-item.red { border: solid 4px #ff2f25; } |
31 |
32 |
.bf-item.green { border: solid 4px #62ff50; } |
33 |
34 |
.bf-item > img { |
35 |
display: block; |
36 |
margin: 0; |
37 |
} |
38 |
39 |
.bf-item > h4 { |
40 |
margin: 0; |
41 |
padding: 10px 0; |
42 |
border-bottom: solid 3px #333333; |
43 |
text-indent: 10px; |
44 |
} |
45 |
46 |
.bf-item > p { |
47 |
font-size: 11px; |
48 |
padding: 0 10px; |
49 |
} |
5. Available options to customize your layout.
01 |
// adds the specified animation class to the container. |
02 |
// Available = 'swing-forward'|'fly'|'fall' |
03 |
animation: '', |
04 |
05 |
// a selector used to filter out items |
06 |
filter: '', |
07 |
08 |
// the jQuery selector to find items within the container. |
09 |
itemSelector: '> .bf-item', |
10 |
11 |
// the jQuery selector to find the main image within an item. |
12 |
imageSelector: '> img:first', |
13 |
14 |
// number in pixels of the gutter between items. |
15 |
// This is used as a minimum value for vertical gutters and an absolute value for horizontal ones. |
16 |
gutter: 40, |
17 |
18 |
// number in milliseconds before the layout is redrawn after the window resizes |
19 |
responseTime: 100, |
20 |
21 |
// automatically hides any items where the image has failed to load |
22 |
hideErrors: false, |
23 |
24 |
// only used to delay loading for testing and demo purposes. |
25 |
loadTime: 0, |
26 |
27 |
classes: { |
28 |
29 |
// class added to the container |
30 |
container: 'brickfolio'
source : jqueryscript.net
|
