Evince

JS

In order to use this plugin on your page you will need to include the following script in the page.


<script src="plugins/gridgallery/js/modernizr.custom.js"></script>
<script src="plugins/gridgallery/js/imagesloaded.pkgd.min.js"></script>
<script src="plugins/gridgallery/js/masonry.pkgd.min.js"></script>
<script src="plugins/gridgallery/js/classie.js"></script>
<script src="plugins/gridgallery/js/cbpgridgallery.js"></script>
<script src="js/pages/gallery.js"></script>
                                        

CSS

In order to use this plugin on your page you will need to include the following css in the page.


<link rel="stylesheet" href="plugins/gridgallery/css/component.css" />
                                        

<div id="grid-gallery" class="grid-gallery">
    <section class="grid-wrap">
        <ul class="grid">
            <li class="grid-sizer"></li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio01.jpg" alt="img01" />
                    <figcaption>
                        <h3 class="h5">Circular Wood Vase</h3>
                        <p>Mollit anim id est laborum. Sed ut perspiciatis.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio02.jpg" alt="img02" />
                    <figcaption>
                        <h3 class="h5">Tradition Art</h3>
                        <p>Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio03.jpg" alt="img03" />
                    <figcaption>
                        <h3 class="h5">Groth smart goal</h3>
                        <p> Voluptate velit esse cillum dolore eu fugiat nulla pariatur proident.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio04.jpg" alt="img04" />
                    <figcaption>
                        <h3 class="h5">Fly Dreams</h3>
                        <p>Quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio06.jpg" alt="img05" />
                    <figcaption>
                        <h3 class="h5">Plastic Durable</h3>
                        <p>quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio05.jpg" alt="img06" />
                    <figcaption>
                        <h3 class="h5">Balloons Mockup</h3>
                        <p>Sed ut perspiciatis unde omnis iste.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio07.jpg" alt="img01" />
                    <figcaption>
                        <h3 class="h5">Woodan var decor</h3>
                        <p>Mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio08.jpg" alt="img02" />
                    <figcaption>
                        <h3 class="h5">Fries Box Mockup</h3>
                        <p>ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio09.jpg" alt="img03" />
                    <figcaption>
                        <h3 class="h5">Sugar-Jar-Spoon-Mockup</h3>
                        <p>anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio10.jpg" alt="img04" />
                    <figcaption>
                        <h3 class="h5">Unpainted Ceramic Vases</h3>
                        <p>sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio11.jpg" alt="img05" />
                    <figcaption>
                        <h3 class="h5">Cup-Cookies-Mockup</h3>
                        <p>enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio12.jpg" alt="img01" />
                    <figcaption>
                        <h3 class="h5">Bottle locavore</h3>
                        <p>voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio13.jpg" alt="img01" />
                    <figcaption>
                        <h3 class="h5">Tea cup Mocup</h3>
                        <p>vitae dicta sunt explicabo.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio14.jpg" alt="img02" />
                    <figcaption>
                        <h3 class="h5">Mocup fress</h3>
                        <p>onsectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio15.jpg" alt="img03" />
                    <figcaption>
                        <h3 class="h5">Brunch Leaves</h3>
                        <p>natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio16.jpg" alt="img04" />
                    <figcaption>
                        <h3 class="h5">Decore Idea</h3>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio23.jpg" alt="img05" />
                    <figcaption>
                        <h3 class="h5">Booklet Mockup</h3>
                        <p>ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio24.jpg" alt="img06" />
                    <figcaption>
                        <h3 class="h5">Tranding art</h3>
                        <p>voluptatem sequi nesciunt.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio17.jpg" alt="img01" />
                    <figcaption>
                        <h3 class="h5">Design Shooes</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio18.jpg" alt="img02" />
                    <figcaption>
                        <h3 class="h5">Sea Shell On Sand</h3>
                        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio19.jpg" alt="img03" />
                    <figcaption>
                        <h3 class="h5">Star Code Sea</h3>
                        <p>oluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio20.jpg" alt="img04" />
                    <figcaption>
                        <h3 class="h5">Digital Points</h3>
                        <p>sed quia consequuntur magni dolores eos qui ratione.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio21.jpg" alt="img05" />
                    <figcaption>
                        <h3 class="h5">Yellow Mind Change</h3>
                        <p>dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius moditempora.</p>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/gallery/portfolio22.jpg" alt="img01" />
                    <figcaption>
                        <h3 class="h5">Blue Water Duck</h3>
                        <p>mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.</p>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </section>
    <section class="slideshow">
        <ul>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Circular Wood Vase</h3>
                        <p>Mollit anim id est laborum. Sed ut perspiciatis.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.consectetur, adipisci velit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio01.jpg" alt="img01" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Tradition Art</h3>
                        <p>adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat Neque porro quisquam est, qui dolorem ipsum quia dolor sit adipisci velit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio02.jpg" alt="img02" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Groth smart goal</h3>
                        <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur proident. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.consectetur, adipisci velit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio03.jpg" alt="img03" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Fly Dreams</h3>
                        <p>Quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio04.jpg" alt="img04" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Plastic Durable</h3>
                        <p>quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio06.jpg" alt="img06" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Balloons Mockup</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio05.jpg" alt="img05" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Woodan var decor</h3>
                        <p>Mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio07.jpg" alt="img07" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Fries Box Mockup</h3>
                        <p>ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio08.jpg" alt="img08" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Sugar-Jar-Spoon-Mockup</h3>
                        <p>anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
                    </figcaption>
                    <img src="img/gallery/portfolio09.jpg" alt="img09" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Unpainted Ceramic Vases</h3>
                        <p>Tsit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio10.jpg" alt="img10" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Cup-Cookies-Mockup</h3>
                        <p>enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio11.jpg" alt="img11" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Bottle locavore</h3>
                        <p>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio12.jpg" alt="img12" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Tea cup Mocup</h3>
                        <p>vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
                    </figcaption>
                    <img src="img/gallery/portfolio13.jpg" alt="img13" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Mocup fress</h3>
                        <p>onsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio14.jpg" alt="img14" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Brunch Leaves</h3>
                        <p>natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio15.jpg" alt="img15" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Decore Idea</h3>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio16.jpg" alt="img16" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Booklet Mockup</h3>
                        <p>ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio23.jpg" alt="img23" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Tranding art</h3>
                        <p>voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio24.jpg" alt="img24" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Design Shooes</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio17.jpg" alt="img17" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Sea Shell On Sand</h3>
                        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio18.jpg" alt="img18" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Star Code Sea</h3>
                        <p>oluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>
                    </figcaption>
                    <img src="img/gallery/portfolio19.jpg" alt="img19" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Digital Points</h3>
                        <p>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio20.jpg" alt="img20" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Yellow Mind Change</h3>
                        <p>dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius moditempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                    </figcaption>
                    <img src="img/gallery/portfolio21.jpg" alt="img21" />
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3 class="h5">Blue Water Duck</h3>
                        <p>mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim .</p>
                    </figcaption>
                    <img src="img/gallery/portfolio22.jpg" alt="img22" />
                </figure>
            </li>
        </ul>
        <nav>
            <span class="fa fa-angle-left nav-prev"></span>
            <span class="fa fa-angle-right nav-next"></span>
            <span class="icon-close nav-close"></span>
        </nav>
    </section>
</div>