List masonry

Containers documentation


Albums

Examples


Installation

<script src='../../HTWF/scripts/jquery.twbsPagination.min.js'></script>
<link rel="stylesheet" href='../../HTWF/css/image-box.css'>

Usage

<div class="album-main" data-album-anima="fade-bottom">
    <div class="album-list row">
        <div class="album-box col-md-4">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2 class="album-name">Album one</h2>
                </div>
            </div>
        </div>
        <div class="album-box col-md-4">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2 class="album-name">Album two</h2>
                </div>
            </div>
        </div>
        <div class="album-box col-md-4" data-album-id="album-3">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2 class="album-name">Album three</h2>
                </div>
            </div>
        </div>
        <!-- INSERT OTHERS ALBUMS MENU ITEMS HERE -->
    </div>
    <div class="cont-album-box">
        <p class="album-title">
            <span>...</span>
            <a class="button-list btn btn-sm btn-sm">
                <i class="fa fa-arrow-left"></i> Album list
            </a>
        </p>
        <div class="album-item">
            <div class="maso-list gallery" data-trigger="manual">
                <div class="navbar navbar-inner">
                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav over ms-minimal inner maso-filters">
                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                            <li><a data-filter="cat1">Cities</a></li>
                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <i class="caret"></i></a>
                                <ul class="dropdown-menu multi-level">
                                    <li><a data-filter="subcat1">Mountain </a></li>
                                    <li><a data-filter="subcat2">Beach and sea </a></li>
                                    <li><a data-filter="subcat3">Desert </a></li>
                                </ul>
                            </li>
                            <li><a data-filter="cat3" href="#">People</a></li>
                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="maso-box row">
                    <div data-sort="2" class="maso-item col-md-4 row-9 cat1">
                        <a class="img-box mfp-iframe i-bottom" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                            <i class="fa fa-film"></i>
                            <img src="http://www.framework-y.com/images/thumb-video.png" />
                        </a>
                    </div>
                    <div data-sort="3" class="maso-item col-md-4 row-9 cat1">
                        <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                            <i class="fa fa-camera"></i>
                            <img src="http://www.framework-y.com/images/thumb.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="album-item">
            <div class="maso-list gallery" data-trigger="manual">
                <ul class="nav navbar-nav over ms-minimal inner maso-filters">
                    <li class="current-active active"><a data-filter="maso-item">All</a></li>
                    <li><a data-filter="cat1">Category 1</a></li>
                    <li><a data-filter="cat3" href="#">Category 2</a></li>
                    <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                </ul>
                <div class="maso-box row">
                    <div data-sort="3" class="maso-item col-md-4 row-9 cat1">
                        <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                            <i class="fa fa-camera"></i>
                            <img src="http://www.framework-y.com/images/thumb.png">
                        </a>
                    </div>
                    <div data-sort="5" class="maso-item col-md-4 row-8 cat2">
                        <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                            <i class="fa fa-camera"></i>
                            <img src="http://www.framework-y.com/images/thumb.png" />
                        </a>
                    </div>
                    <div data-sort="6" class="maso-item col-md-4 row-10 cat1">
                        <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                            <i class="fa fa-camera"></i>
                            <img src="http://www.framework-y.com/images/thumb.png" />
                        </a>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="album-item" id="album-3">
            <div class="maso-list gallery" data-trigger="manual">
                <div class="maso-box row">
                    <div data-sort="3" class="maso-item col-md-4 row-9 cat1">
                        <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                            <i class="fa fa-camera"></i>
                            <img src="http://www.framework-y.com/images/thumb.png">
                        </a>
                    </div>
                    <div data-sort="5" class="maso-item col-md-4 row-10 cat2">
                        <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                            <i class="fa fa-camera"></i>
                            <img src="http://www.framework-y.com/images/thumb.png" />
                        </a>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <!-- INSERT OTHERS ALBUMS HERE -->
    </div>
</div>

Main settings

Name Type Description
Albums settings Mixed Albums are auto linked to albums menu, by calculate item index. You can manually link album menu item to an album with attribute data-album-id="album-id", you can see a example on album 3 of above code. Album name read the text of element with class album-name, add this class to album item name of menu.
Albums items Mixed Album items used in the example are part of image box component.
Plugin dependency

This feature require image box styles (../../HTWF/css/image-box.css)

Image box documentation here
Albums animations HTML You can set a animation for albums by add attribute data-album-anima="animation-name" to album object.
Example: <div class="album-main" data-album-anima="fade-bottom"> ... </div>. Animations list available on animation page.
Plugin dependency

This feature require animations component (../../HTWF/css/animations.css)

Animations documentation here


Infinite loading

Examples


Installation

<script src="../../HTWF/scripts/jquery.twbsPagination.min.js"></script>

Usage

<div class="maso-list gallery">
    <div class="maso-box row" data-options="anima:fade-in">
        <div data-sort="2" class="maso-item col-md-4 row-9 cat1">
            <a class="img-box mfp-iframe i-bottom" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                <i class="fa fa-film"></i>
                <img src="http://www.framework-y.com/images/thumb-video.png" />
            </a>
        </div>
        <div data-sort="3" class="maso-item col-md-4 row-6 cat1">
            <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                <i class="fa fa-camera"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
            </a>
        </div>
        <div data-sort="4" class="maso-item col-md-4 row-9 cat1">
            <a class="img-box mfp-iframe i-bottom" href="https://vimeo.com/162564288">
                <i class="fa fa-film"></i>
                <img src="http://www.framework-y.com/images/thumb-video-wide.png" />
            </a>
        </div>
        <div data-sort="5" class="maso-item col-md-4 row-4 cat2">
            <a class="img-box i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
                <i class="fa fa-camera"></i>
                <img src="http://www.framework-y.com/images/thumb.png" />
            </a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="list-nav">
        <a href="#" class="btn-sm btn load-more-maso" data-page-items="4">Load More <i class="fa fa-arrow-down"></i></a>
    </div>
</div>

Main settings

Name Type Description
HTML initialization HTML To implement the pagination add object <ul class="load-more-maso" data-page-items="6"></ul> to the bottom of gallery container.
Items per page HTML You can set how many items are showed in at same time with attribute data-page-items="123".
Lazy Load Attribute To set lazy loading, feature that auto load next items when page scroll to bottom, add attribute data-options="lazyLoad:true" to load-more object. Example: <a href="#" class="btn-sm btn load-more-maso" data-page-items="8" data-options="lazyLoad:true">Load More</a>.

Image box

Examples


Usage

<div class="maso-list gallery">
    <div class="maso-box row">
        <div data-sort="2" class="maso-item col-md-4 row-9 cat1">
            <a class="img-box lightbox thumbnail inner img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
                <span>
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </span>
                <span class="caption-box">
                    <span class="caption">
                        <b>Sudnar City</b><br />
                        Sed do eiusmod tempor incididunt
                    </span>
                </span>
            </a>
        </div>
        <div data-sort="3" class="maso-item col-md-4 row-9 cat1">
            <a class="img-box lightbox thumbnail inner img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
                <span>
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </span>
                <span class="caption-box">
                    <span class="caption">
                        <b>African snake</b><br />
                        Sed do eiusmod tempor incididunt
                    </span>
                </span>
            </a>
        </div>
        <div data-sort="4" class="maso-item col-md-4 row-9 cat1">
            <a class="img-box lightbox thumbnail inner img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
                <span>
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </span>
                <span class="caption-box">
                    <span class="caption">
                        <b>Young woman</b><br />
                        Sed do eiusmod tempor incididunt
                    </span>
                </span>
            </a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="maso-list gallery" id="demo-masonry" data-trigger="manual">
    <div class="maso-box row">
        <div data-sort="2" class="maso-item col-md-4 cat1">
            <a class="img-box lightbox circle inner thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Image box title</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div data-sort="3" class="maso-item col-md-4 cat1">
            <a class="img-box lightbox circle inner thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Image box title</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div data-sort="4" class="maso-item col-md-4 cat1">
            <a class="img-box lightbox circle inner thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Image box title</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="maso-list gallery" id="demo-masonry-2" data-trigger="manual">
    <div class="maso-box row">
        <div data-sort="2" class="maso-item col-md-4 cat1">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Image box title</h2>
                    <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2018</p>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt.
                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
                    </p>
                </div>
            </div>
        </div>
        <div data-sort="3" class="maso-item col-md-4 cat1">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Image box title</h2>
                    <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2018</p>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt.
                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
                    </p>
                </div>
            </div>
        </div>
        <div data-sort="4" class="maso-item col-md-4 cat1">
            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Image box title</h2>
                    <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2018</p>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt.
                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur porro quisquam esto qui dolorem ipsum quia dolore.
                    </p>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

Image box

Image box are part of image box documentation. You can use almost all image box types.
Complete documentation here


Content box

Examples

Content box title

Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.

Content box title

Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.

Content box title

Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.

Cristian Pitt

Marketing


Lorem Ipsum is simply dummy text of the printing and industry.

Alan Arrasange

Founder


Lorem Ipsum is simply dummy text of the printing and industry.

Will Abram

Design


Lorem Ipsum is simply dummy text of the printing and industry.


Usage

<div class="maso-list">
    <div class="maso-box row">
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="im-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.
                </p>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="im-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.
                </p>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="im-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita.
                </p>
            </div>
        </div>
    </div>
</div>
<div class="maso-list">
    <div class="maso-box row">
        <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
            <a class="img-box">
                <img class="anima" src="http://www.framework-y.com/images/thumb.png" />
            </a>
            <div class="content-box">
                <h2>Cristian Pitt</h2>
                <h4>Marketing</h4>
                <hr class="e" />
                <div class="btn-group social-group">
                    <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                    <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                    <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
            </div>
        </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb.png" />
                </a>
                <div class="content-box">
                    <h2>Cristian Pitt</h2>
                    <h4>Marketing</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
                </div>
            </div>
        </div>
        <div class="maso-item col-md-4">
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb.png" />
                </a>
                <div class="content-box">
                    <h2>Cristian Pitt</h2>
                    <h4>Marketing</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
                </div>
            </div>
        </div>
    </div>
</div> 

Content box

Content box are part of content box documentation. You can use almost all content box types.
Complete documentation here


Masks

Mask 1

Mask 2


Mask 4



Usage

<div class="maso-box maso-mask row">
    <div class="maso-item col-md-8 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
        <img src="http://www.framework-y.com/images/thumb.png"></a>
    </div>
    <div class="maso-item col-md-4 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
        <img src="http://www.framework-y.com/images/thumb.png"></a>
    </div>
    <div class="maso-item col-md-12 row-4">
        <a class="img-box lightbox img-scale-rotate" href="../../images/large/image-5.jpg">
        <img src="http://www.framework-y.com/images/thumb.png"></a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-8 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-3 row-8">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-6 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-9 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-8 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-4 row-4">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>
<div class="maso-box maso-mask row">
    <div class="maso-item col-md-3 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-9 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-12 row-6">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-9 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="maso-item col-md-3 row-3">
        <a class="img-box lightbox img-scale-rotate" href="http://www.framework-y.com/images/thumb-large.png">
            <img src="http://www.framework-y.com/images/thumb.png">
        </a>
    </div>
    <div class="clear"></div>
</div>