zallery/WebContent/page_gallery.jsp

<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>

<t:header />

<div class="container">
    <t:navbar />

    <script type="text/javascript">
    $(function(){
        $('.image-grid').imagesLoaded(function(){
            $('.grid').masonry({
                itemSelector: '.grid-item',
                columnWidth: '.grid-item',
            });
        });
    });
    </script>

    <div class="content">

        <div class="gallery col-center col-md-11">
            <div class="row">
                <div class="grid folder-grid">
                    <c:forEach items="${subFolders}" var="subFolder">
                        <div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4">
                            <a href="?folder=${subFolder.id}">
                                <img class="img-responsive" src="${subFolder.getUrlSmall()}" alt="${subFolder.name}" />
                            </a>
                        </div>
                    </c:forEach>
                </div>

                <hr>
            </div>
            <div class="row">
                <div class="grid image-grid">
                    <c:forEach items="${media}" var="item">
                        <div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12">
                            <img class="img-responsive" src="${item.getUrlSmall()}"/>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div> <!-- /gallery -->

    </div> <!-- /content -->

</div>  <!-- /container -->

<t:footer />