Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/Google Photos Material Gallery.markdown

Forked from anonymous/Google Photos Material Gallery.markdown
Created January 12, 2016 12:30
Show Gist options
  • Save CodeMyUI/123deff6296a6e8ac895 to your computer and use it in GitHub Desktop.
Save CodeMyUI/123deff6296a6e8ac895 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jan 12, 2016.
    7 changes: 7 additions & 0 deletions Google Photos Material Gallery.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Google Photos Material Gallery
    ------------------------------
    A vanilla javascript photo gallery plugin inspired by Google Photos.

    A [Pen](http://codepen.io/ettrics/pen/VvxmPV) by [Ettrics](http://codepen.io/ettrics) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/ettrics/pen/VvxmPV/license).
    29 changes: 29 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <h2>Material Photo Gallery</h2>
    <p>
    <a href="https://github.com/ettrics/material-photo-gallery" class="demo-btn">Documentation</a>
    <a href="https://github.com/ettrics/material-photo-gallery/archive/master.zip" class="demo-btn" download="material-photo-gallery">Download</a>
    </p>

    <div class="m-p-g">
    <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
    <img src="http://unsplash.it/600/400?image=940" data-full="http://unsplash.it/1200/800?image=940" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/640/450?image=906" data-full="http://unsplash.it/1280/900?image=906" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/550/420?image=885" data-full="http://unsplash.it/1100/840?image=885" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/650/450?image=823" data-full="http://unsplash.it/1300/900?image=823" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/600/350?image=815" data-full="http://unsplash.it/1200/700?image=815" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/560/500?image=677" data-full="http://unsplash.it/1120/1000?image=677" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/670/410?image=401" data-full="http://unsplash.it/1340/820?image=401" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/620/340?image=623" data-full="http://unsplash.it/1240/680?image=623" class="m-p-g__thumbs-img" />
    <img src="http://unsplash.it/790/390?image=339" data-full="http://unsplash.it/1580/780?image=339" class="m-p-g__thumbs-img" />
    </div>

    <div class="m-p-g__fullscreen"></div>
    </div>

    <script>
    var elem = document.querySelector('.m-p-g');

    document.addEventListener('DOMContentLoaded', function() {
    var gallery = new MaterialPhotoGallery(elem);
    });
    </script>
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/material-photo-gallery.min.js"></script>
    240 changes: 240 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,240 @@
    /*------------------------------------*\
    MATERIAL PHOTO GALLERY
    \*------------------------------------*/

    $gallery-width: 860px;
    $transition-duration: 0.5s;

    .m-p-g {
    max-width: $gallery-width;
    margin: 0 auto;

    &__thumbs {

    &-img {
    margin: 0;
    float: left;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 1;
    position: relative;
    opacity: 0;
    filter: brightness(100%);
    -webkit-tap-highlight-color: rgba(black, 0);
    will-change: opacity, transform;
    transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);

    &.active {
    z-index: 50;
    }

    &.layout-completed {
    opacity: 1;
    }

    &.hide {
    opacity: 0;
    }

    &:hover {
    filter: brightness(110%);
    }
    }
    }

    &__fullscreen {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(black, 0);
    visibility: hidden;
    transition:
    background .25s ease-out,
    visibility .01s $transition-duration linear;
    will-change: background, visibility;
    backface-visibility: hidden;

    &.active {
    transition:
    background .25s ease-out,
    visibility .01s 0s linear;
    visibility: visible;
    background: rgba(black, 0.95);
    }

    &-img {
    pointer-events: none;
    position: absolute;
    transform-origin: left top;
    top: 50%;
    left: 50%;
    max-height: 100vh;
    max-width: 100%;
    visibility: hidden;
    will-change: visibility;
    transition: opacity $transition-duration ease-out;

    &.active {
    visibility: visible;
    opacity: 1 !important;
    transition:
    transform $transition-duration cubic-bezier(0.23, 1, 0.32, 1),
    opacity $transition-duration ease-out;
    }

    &.almost-active {
    opacity: 0;
    transform: translate3d(0,0,0) !important;
    }
    }
    }

    &__controls {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    height: 20vh;
    background: linear-gradient(to top, transparent 0%, rgba(black, 0.55) 100%);
    opacity: 0;
    visibility: hidden;
    transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);

    &.active {
    opacity: 1;
    visibility: visible;
    }

    &-close,
    &-arrow {
    appearance: none;
    border: none;
    background: none;

    &:focus {
    outline: none;
    }
    }

    &-arrow {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 20%;
    height: 100vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(black, 0);
    opacity: 0;

    &:hover {
    opacity: 1;
    }

    &--prev {
    left: 0;
    padding-left: 3vw;
    justify-content: flex-start;
    }

    &--next {
    right: 0;
    padding-right: 3vw;
    justify-content: flex-end;
    }
    }

    &-close {
    position: absolute;
    top: 3vh;
    left: 3vw;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(black, 0);
    }
    }

    &__btn {
    $size: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: rgba(white, 0.07);
    transition: all .25s ease-out;

    &:hover {
    background: rgba(white, 0.15);
    }
    }

    &__alertBox {
    position: fixed;
    z-index: 999;
    max-width: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border-radius: 3px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
    color: grey;

    h2 {
    color: red;
    }
    }
    }

    /* DEMO */
    body {
    background: #fefefe;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    font-family: 'Roboto Mono';
    }

    h2 {
    font-weight: 300;
    margin: 4vh 4vw;
    letter-spacing: 3px;
    color: grey;
    text-transform: uppercase;
    }

    .demo-btn {
    display: inline-block;
    margin: 0 2.5px 4vh 2.5px;
    text-decoration: none;
    color: grey;
    padding: 15px;
    line-height: 1;
    min-width: 140px;
    background: rgba(0,0,0, 0.07);
    border-radius: 6px;
    }

    .demo-btn:hover {
    background: rgba(0,0,0,0.12);
    }

    @media (max-width: 640px) {

    .demo-btn {
    min-width: 0;
    font-size: 14px;
    }
    }