tiles gallery
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.31/themes/default/ug-theme-default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.31/css/unite-gallery.min.css">
<script src="'unitegallery/themes/slider/ug-theme-slider.js"></script>
<script src="jquery-11.0.min.js"></script>
<script src="unitegallery.min.js"></script>
<script src="ug-theme-grid.js"></script>
<h2>Gallery with Tags - Prototype</h2>
<div id="myBtnContainer">
<button class="btn" id="tag-all"> Show all</button>
<button class="btn" id="tag-nature"> Nature</button>
<button class="btn" id="tag-video"> Video</button>
<button class="btn" id="tag-people"> People</button>
</div>
<div id="gallery" style="display:none;">
<!-- Portfolio Gallery Grid -->
<img class="nature"
alt="Preview Image 1"
src="images/thumbs/thumb1.jpg"
data-image="images/big/image1.jpg"
data-description="Preview Image 1 Description">
<img class="nature"
alt="Preview Image 2"
src="images/thumbs/thumb2.jpg"
data-image="images/big/image2.jpg"
data-description="Preview Image 2 Description">
<img class="video people"
alt="Youtube Video"
data-type="youtube"
data-videoid="A3PDXmYoF5U"
data-description="You can include youtube videos easily!">
<img class="nature"
alt="Preview Image 3"
src="images/thumbs/thumb3.jpg"
data-image="images/big/image3.jpg"
data-description="Preview Image 3 Description">
<img class="nature"
alt="Preview Image 4"
src="images/thumbs/thumb4.jpg"
data-image="images/big/image4.jpg"
data-description="Preview Image 4 Description">
<img class="video"
alt="Vimeo Video"
data-type="vimeo"
src="http://i.vimeocdn.com/video/447294219_200x150.jpg"
data-image="http://i.vimeocdn.com/video/447294219_640.jpg"
data-videoid="73234449"
data-description="This gallery can also play vimeo...
CSS
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
JavaScript
$("#output").unitegallery({
//tiles_type:"nested",
gallery_theme: "slider"
});