Grid list

Containers documentation


Albums

Examples

Album pagination

Infinite loading

Album classic


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-right">
    <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 pagination</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">Infinite loading</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 classic</h2>
                </div>
            </div>
        </div>
        <!-- INSERT OTHERS ALBUM 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="grid-list gallery">
                <div class="grid-box row">
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                            <img src="http://www.framework-y.com/images/thumb-wide.png" />
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                </div>
                <ul class="pagination pagination-sm pagination-grid" data-page-items="3" data-pagination-anima="show-scale"></ul>
            </div>
        </div>
        <div class="album-item">
            <div class="grid-list gallery">
                <div class="grid-box row">
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
                            <img src="http://www.framework-y.com/images/thumb-wide.png" />
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                            <img src="http://www.framework-y.com/images/thumb-wide.png">
                        </a>
                    </div>
                    <div class="grid-item col-md-4">
                        <a class="img-box mfp-iframe i-center" href="https://www.youtube.com/watch?v=-BrDlrytgm8">
                            <img src="http://www.framework-y.com/images/thumb-wide.png" />
                        </a>
                    </div>
                </div>
                <div class="list-nav">
                    <a href="#" class="btn btn-sm load-more-grid" data-pagination-anima="fade-bottom" data-page-items="3">
                        Load More <i class="fa fa-arrow-down"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="album-item" id="album-3">
            <div class="grid-list gallery">
                <div class="grid-box row">
                    <div class="grid-box row">
                        <div class="grid-item col-md-4">
                            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                                <img src="http://www.framework-y.com/images/thumb-wide.png">
                            </a>
                        </div>
                        <div class="grid-item col-md-4">
                            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                                <img src="http://www.framework-y.com/images/thumb-wide.png">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- INSERT OTHERS ALBUMS HERE -->
    </div>
</div>

Main settings

Name Type Description
HTML initialization CSS class Initialization detect the class grid-list, if this class is not present initialization not start.
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)

Advanced image box documentation here
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 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="grid-list gallery">
    <div class="grid-box row" data-lightbox-anima="show-scale">
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box mfp-iframe i-center" href="http://www.youtube.com/watch?v=bpqhStV2_rc">
                <img src="http://www.framework-y.com/images/thumb-video-wide.png" />
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box i-center" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </div>
    </div>
    <div class="list-nav">
        <a href="#" class="btn btn-sm load-more-grid" data-pagination-anima="fade-bottom" data-page-items="3">
            Load More
            <i class="fa fa-arrow-down"></i>
        </a>
    </div>
</div>

Main settings

Name Type Description
HTML initialization CSS class Initialization detect the class grid-list, if this class is not present initialization not start, you can use also manual initialization for stop initialization on page load.
Javascript initialization Javascript You can use the Framework Y function or Isotope function:
1 ) Framework Y function is $('#target').initIsotope(); target must be <div id="target" class="grid-list"></div>.
2 ) Isotope function is $('#target').isotope(itemSelector: '.grid-item', option:value, ...);.
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-grid" data-page-items="8" data-options="lazyLoad:true">Load More</a>.
Manual initialization HTML To stop initialization on page load add attribute data-trigger="manual" list obejct. Example: <div class="grid-list" id="target" data-trigger="manual"> ... </div>. Now you can initialize the list with Javascript initialization.

Image box list

Examples


Usage

<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <a class="img-box lightbox thumbnail" 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">
                    <b>Hello World</b><br />
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox thumbnail" 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">
                    <b>Hello World</b><br />
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox thumbnail" 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">
                    <b>Hello World</b><br />
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
    </div>
</div> 
<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb.png">
                <i class="fa fa-krw anima"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb.png">
                <i class="fa fa-sort-numeric-asc anima"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
        <div class="grid-item col-md-4">
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb.png">
                <i class="fa fa-bullseye anima"></i>
                <img src="http://www.framework-y.com/images/thumb.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </div>
    </div>
</div> 
<div class="grid-list gallery">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <div class="img-box lightbox scale adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima" href="http://www.framework-y.com/images/thumb-large.png">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Hello World</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 ut labore et dolore magna aliqua. 
                    </p>
                    <button class="btn btn-sm btn-xs" type="button">Read more ...</button>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="img-box lightbox scale adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima" href="http://www.framework-y.com/images/thumb-large.png">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Hello World</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 ut labore et dolore magna aliqua.
                    </p>
                    <button class="btn btn-sm btn-xs" type="button">Read more ...</button>
                </div>
            </div> 
        </div>
        <div class="grid-item col-md-4">
            <div class="img-box lightbox scale adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
                <i class="im-camera-2 anima"></i>
                <a class="img-box lightbox anima-scale-up anima" href="http://www.framework-y.com/images/thumb-large.png">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Hello World</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 ut labore et dolore magna aliqua. 
                    </p>
                    <button class="btn btn-sm btn-xs" type="button">Read more ...</button>
                </div>
            </div> 
        </div>
    </div>
</div> 

Image box documentation

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


Content box list

Examples

Content box title

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

Content box title

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

Content box title

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

Alan Arrasange

Founder


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

Cristian Pitt

Marketing


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="grid-list">
    <div class="grid-box row">
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio.
                </p>
            </div>
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio.
                </p>
            </div>
        </div>
        <div class="grid-item col-md-4">
            <div class="advs-box advs-box-top-icon boxed-inverse" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-home icon circle anima"></i>
                <h3>Content box title</h3>
                <p>
                    Interdum iusto pulvinar consequuntur augue optio.
                </p>
            </div>
        </div>
    </div>
</div>  
<div class="grid-list">
    <div class="grid-box row">
        <div class="grid-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-large.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</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. Lorem has been the industry.</p>
                </div>
            </div> 
        </div>
        <div class="grid-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-large.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</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. Lorem has been the industry.</p>
                </div>
            </div> 
        </div>
        <div class="grid-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-large.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</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. Lorem has been the industry.</p>
                </div>
            </div> 
        </div>
    </div>
</div>  

Content box documentation

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