masonry/angular/gallery

masonry/angular/gallery

by Andrew Pougher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
<div id="container">

		<div class="andrewsGallery"></div>

		<div class="item">
			<img src="http://placekitten.com/650/450" class="image">
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
		<div class="item">
			<img src="http://placekitten.com/450/450" class="image">
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
		<div class="item">
			<img src="http://placekitten.com/450/550" class="image">
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
		<div class="item">
			<img src="http://placekitten.com/550/750" class="image">
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
		<div class="item">
			<img src="http://placekitten.com/650/550" class="image">
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
		<div class="item">
			<img src="http://placekitten.com/400/450" class="image">
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
		<div...

CSS

html {
    overflow-y: scroll;
}

body {
    font-family: sans-serif;
    margin: 0; padding: 0;
}

.item {
    float: left;
    position: relative;
    line-height: 1em;
}


.andrewsGallery{ width: 20%; }
.item { width: 20%; }


@media screen and (max-width: 1224px) {
  /* 10 columns for larger screens */
  .andrewsGallery { width: 33.33%; }
  .item { width: 33.33%; }
}

@media screen and (max-width: 720px) {
  /* 10 columns for larger screens */
  .andrewsGallery { width: 50%; }
  .item { width: 50%; }
}

@media screen and (max-width: 480px) {
  /* 10 columns for larger screens */
  .andrewsGallery { width: 100%; }
  .item { width: 100%; }
}

.image{
    max-width: 100%;
    margin: 0;
    display: block;
}

.image:after {
    clear:both;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}

.overlay .title {
    text-align: center;
    font-size: 30px;
}

.overlay .description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.80);
    width: 100%;
    margin: 0;
}

.overlay .description p {
    margin: 20px;
}

.item:hover .overlay {
    display: block;
}

JavaScript

$('#container').masonry({
        "itemSelector": ".item",
        "columnWidth": ".andrewsGallery",
    });



$.getScript( "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js", function( data, textStatus, jqxhr ) {

  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});