GOOGLE GRID GALLERY

    Rating: ★★★★☆
    View: 197
    Download: 195
    Từ khóa:

    This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view.

    In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key.

    Please note that we are using CSS 3D Transforms which are only supported in modern browsers.

    The images used in the demo were created using the grafitti shapes by Luke Roberts.

    THE HTML

    
     
    
    
    
    
    

    THE CSS

    @font-face {
        font-family: 'fontawesome';
        src:url('../fonts/fontawesome/fontawesome.eot?-e43dk9');
        src:url('../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'),
            url('../fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'),
            url('../fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'),
            url('../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg');
        font-weight: normal;
        font-style: normal;
    } /* Made with http://icomoon.io/app */
     
    /* General style */
    .grid-gallery ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
     
    .grid-gallery figure {
        margin: 0;
    }
     
    .grid-gallery figure img {
        display: block;
        width: 100%;
    }
     
    .grid-gallery figcaption h3 {
        margin: 0;
        padding: 0 0 0.5em;
    }
     
    .grid-gallery figcaption p {
        margin: 0;
    }
     
    /* Grid style */
    .grid-wrap {
        max-width: 69em;
        margin: 0 auto;
        padding: 0 1em 1.875em;
    }
     
    .grid {
        margin: 0 auto;
    }
     
    .grid li {
        width: 25%;
        float: left;
        cursor: pointer;
    }
     
    .grid figure {
        padding: 15px;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
    }
     
    .grid li:hover figure {
        opacity: 0.7;
    }
     
    .grid figcaption {
        background: #e4e4e4;
        padding: 25px;
    }
     
    /* Slideshow style */
    .slideshow {
        position: fixed;
        background: rgba(0,0,0,0.6);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 500;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
        transition: opacity 0.5s, visibility 0s 0.5s;
    }
     
    .slideshow-open .slideshow {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
     
    .slideshow ul {
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translate3d(0,0,150px);
        transform: translate3d(0,0,150px);
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }
     
    .slideshow ul.animatable li {
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }
     
    .slideshow-open .slideshow ul {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
     
    .slideshow li {
        width: 660px;
        height: 560px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -280px 0 0 -330px;
        visibility: hidden;
    }
     
    .slideshow li.show {
        visibility: visible;
    }
     
    .slideshow li:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
     
    .slideshow li.current:after {
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
        transition: opacity 0.3s, visibility 0s 0.3s;
    }
     
    .slideshow figure {
        width: 100%;
        height: 100%;
        background: #fff;
        border: 50px solid #fff;
        overflow: hidden;
    }
     
    .slideshow figcaption {
        padding-bottom: 20px;
    }
     
    .slideshow figcaption h3 {
        font-weight: 300;
        font-size: 200%;
    }
     
    /* Navigation */
    .slideshow nav span {
        position: fixed;
        z-index: 1000;
        color: #59656c;
        text-align: center;
        padding: 3%;
        cursor: pointer;
        font-size: 2.2em;
    }
     
    .slideshow nav span.nav-prev,
    .slideshow nav span.nav-next {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
     
    .slideshow nav span.nav-next {
        right: 0;
    }
     
    .slideshow nav span.nav-close {
        top: 0;
        right: 0;
        padding: 0.5em 1em;
        color: #31373a;
    }
     
    .icon:before,
    .icon:after {
        font-family: 'fontawesome';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
     
    span.nav-prev:before {
        content: "e601";
    }
     
    span.nav-next:before  {
        content: "e600";
    }
     
    span.nav-close:before {
        content: "e602";
    }
     
    /* Info on arrow key navigation */
    .info-keys {
        position: fixed;
        top: 10px;
        left: 10px;
        width: 60px;
        font-size: 8px;
        padding-top: 20px;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 1px;
        text-align: center;
    }
     
    .info-keys:before,
    .info-keys:after {
        position: absolute;
        top: 0;
        width: 16px;
        height: 16px;
        border: 1px solid #fff;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
    }
     
    .info-keys:before {
        left: 10px;
        content: "e603";
    }
     
    .info-keys:after {
        right: 10px;
        content: "e604";
    }
     
    /* Example media queries (reduce number of columns and change slideshow layout) */
     
    @media screen and (max-width: 60em) {
        /* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
        .grid li {
            width: 33.3%;
        }
     
        .slideshow li {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            margin: 0;
        }
     
        .slideshow li figure img {
            width: auto;
            margin: 0 auto;
            max-width: 100%;
        }
     
        .slideshow nav span,
        .slideshow nav span.nav-close {
            font-size: 1.8em;
            padding: 0.3em;
        }
     
        .info-keys {
            display: none;
        }
     
    }
     
    @media screen and (max-width: 35em) {
        .grid li {
            width: 50%;
        }
    }
     
    @media screen and (max-width: 24em) {
        .grid li {
            width: 100%;
        }
    }

    THE JAVASCRIPT

    ( function( window ) {
         
        'use strict';
     
        var docElem = window.document.documentElement,
            transEndEventNames = {
                'WebkitTransition': 'webkitTransitionEnd',
                'MozTransition': 'transitionend',
                'OTransition': 'oTransitionEnd',
                'msTransition': 'MSTransitionEnd',
                'transition': 'transitionend'
            },
            transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
            support = {
                transitions : Modernizr.csstransitions,
                support3d : Modernizr.csstransforms3d
            };
     
        function setTransform( el, transformStr ) {
            el.style.WebkitTransform = transformStr;
            el.style.msTransform = transformStr;
            el.style.transform = transformStr;
        }
     
        // from http://responsejs.com/labs/dimensions/
        function getViewportW() {
            var client = docElem['clientWidth'],
                inner = window['innerWidth'];
             
            if( client < inner )
                return inner;
            else
                return client;
        }
     
        function extend( a, b ) {
            for( var key in b ) { 
                if( b.hasOwnProperty( key ) ) {
                    a[key] = b[key];
                }
            }
            return a;
        }
     
        function CBPGridGallery( el, options ) {
            this.el = el;
            this.options = extend( {}, this.options );
            extend( this.options, options );
            this._init();
        }
     
        CBPGridGallery.prototype.options = {
        };
     
        CBPGridGallery.prototype._init = function() {
            // main grid
            this.grid = this.el.querySelector( 'section.grid-wrap > ul.grid' );
            // main grid items
            this.gridItems = [].slice.call( this.grid.querySelectorAll( 'li:not(.grid-sizer)' ) );
            // items total
            this.itemsCount = this.gridItems.length;
            // slideshow grid
            this.slideshow = this.el.querySelector( 'section.slideshow > ul' );
            // slideshow grid items
            this.slideshowItems = [].slice.call( this.slideshow.children );
            // index of current slideshow item
            this.current = -1;
            // slideshow control buttons
            this.ctrlPrev = this.el.querySelector( 'section.slideshow > nav > span.nav-prev' );
            this.ctrlNext = this.el.querySelector( 'section.slideshow > nav > span.nav-next' );
            this.ctrlClose = this.el.querySelector( 'section.slideshow > nav > span.nav-close' );
            // init masonry grid
            this._initMasonry();
            // init events
            this._initEvents();
        };
     
        CBPGridGallery.prototype._initMasonry = function() {
            var grid = this.grid;
            imagesLoaded( grid, function() {
                new Masonry( grid, {
                    itemSelector: 'li',
                    columnWidth: grid.querySelector( '.grid-sizer' )
                });
            });
        };
     
        CBPGridGallery.prototype._initEvents = function() {
            var self = this;
     
            // open the slideshow when clicking on the main grid items
            this.gridItems.forEach( function( item, idx ) {
                item.addEventListener( 'click', function() {
                    self._openSlideshow( idx );
                } );
            } );
     
            // slideshow controls
            this.ctrlPrev.addEventListener( 'click', function() { self._navigate( 'prev' ); } );
            this.ctrlNext.addEventListener( 'click', function() { self._navigate( 'next' ); } );
            this.ctrlClose.addEventListener( 'click', function() { self._closeSlideshow(); } );
     
            // window resize
            window.addEventListener( 'resize', function() { self._resizeHandler(); } );
     
            // keyboard navigation events
            document.addEventListener( 'keydown', function( ev ) {
                if ( self.isSlideshowVisible ) {
                    var keyCode = ev.keyCode 				
    loading Đang tải...

    template được ưa chuộng