css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
  <div class="menu">
    <div class="close-button"><span class="icon">&times;</span> Close</div>
    <ul class="nav">
      <li>
        <a href="#" class="nav-item selected">Original Collection</a>
      </li>
      <li>
        <a href="#"
          class="nav-item"
          data-cid="1163637"
          data-ctitle="Architectural Lines"
          data-cdesc="Metal and glass, concrete and wood, straight lines and curves."
          data-cavail="1000"
        >Architecture</a>
      </li>
      <li>
        <a href="#"
          class="nav-item"
          data-cid="1198157"
          data-ctitle="City Lines"
          data-cdesc="Architects, Engineers and builders...This is for you"
          data-cavail="51"
        >City</a>
      </li>
      <li>
        <a href="#"
          class="nav-item"
          data-cid="827737"
          data-ctitle="Sport"
          data-cdesc="Exercise, activities, fashion and lifestyle"
          data-cavail="137"
        >Sport</a>
      </li>
      <li>
        <a href="#"
          class="nav-item"
          data-cid="573226"
          data-ctitle="Retro"
          data-cdesc="Retro, vintage, blue, and car photos"
          data-cavail="29"
        >Retro</a>
      </li>
      <li>
        <a href="#"
          class="nav-item"
          data-cid="610876"
          data-ctitle="Sky"
          data-cdesc="Sky, star, night, and space photos"
          data-cavail="52"
        >Sky</a>
      </li>
      <li>
        <a href="#"
          class="nav-item"
          data-cid="504554"
          data-ctitle="Found Typography"
          data-cdesc="Letters and numbers out in the wild"
          data-cavail="55"
        >Typography</a>
      </li>
    </ul>
  </div>
  <div class="content">
    <div class="menu-button">
      <svg class="icon arrow-right" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
        <path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/>
      </svg>
      Menu
    </div>
    <section class="gallery">
      <ul class="cards">
        <li>
          <a href="https://unsplash.com/photos/m73iqlbI-3M">
            <img src="https://source.unsplash.com/m73iqlbI-3M/800x640" alt="Bauhaus Archiv, Berlin photo by Simone Hutsch" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Bauhaus Archiv, Berlin photo by Simone Hutsch</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/504554">
            <img src="https://images.unsplash.com/photo-1512445600578-574f23656707?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=6db397ff4e4f9a99afc060da5d9f820f" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/504554">
            <img src="https://images.unsplash.com/photo-1487392882838-c9cd493de5eb?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=b7cffc737c932ca603abcecb5ae79c42" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1481710216369-907102eb457d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=31b367ce9b852c07c6d809089075c3d3" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1467154243382-ebe2c7d14fef?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=1731ffd4d65f0f2434b3dd4e4efcd7d3" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1470768153548-5d248f5676fe?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=ee56526aa8a7cf694ef0c294316e8722" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1481535668376-4c3ab7d84e7d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=ce6f0be77e682b2260fc82c4fdbd05f0" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/504554">
            <img src="https://images.unsplash.com/photo-1468528885091-58bab38a6632?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=2620a2c5aaa55ce09c8ea6cceebfe793" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1493930251520-c4e958c27b86?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=5177b3a0aff6cc1d92fe4c85527caff2" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1504788482283-123743797899?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=4b653701e8ac58e0567cb51b39c58a90" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1529592829369-5e84d19ca37a?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=5145b716f75b37e5f2c2aca14a81b582" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1433832597046-4f10e10ac764?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=3631b94379188c455a54aa43c743fae6" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/504554">
            <img src="https://images.unsplash.com/photo-1468184271582-9198a28f064e?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=6c3fca7b6a4e257d6ed4d33da560189d" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">Found Typography</span><span class="caption-desc">Letters and numbers out in the wild</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1496307777624-f14b6bbf5349?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=fe92f7d3bf19f49a8f7ce560c8d98dbb" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/collections/1198157">
            <img src="https://images.unsplash.com/photo-1511355910413-2bc9ee1aa943?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=800&amp;h=640&amp;fit=crop&amp;ixid=eyJhcHBfaWQiOjF9&amp;s=de61ac9bd2c56b0e75af37e870d08858" alt="Photo from Unsplash">
            <div class="caption"><span class="caption-title">City Lines</span><span class="caption-desc">Architects, Engineers and builders...This is for you</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/czDvRp5V2b0">
            <img src="https://source.unsplash.com/czDvRp5V2b0/800x640" alt="Abu Dhabi Louvre Museum by Alvaro Pinot" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Abu Dhabi Louvre Museum by Alvaro Pinot</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/H0vuplqoX0c">
            <img src="https://source.unsplash.com/H0vuplqoX0c/800x640" alt="Architecture photo by Viktor Jakovlev" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Architecture photo by Viktor Jakovlev</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/4_N5a-_5K4o">
            <img src="https://source.unsplash.com/4_N5a-_5K4o/800x640" alt="Ginza Place by Dmitri Popov" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Ginza Place by Dmitri Popov</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/mTfdsOLHHL8">
            <img src="https://source.unsplash.com/mTfdsOLHHL8/800x640" alt="Window, building, architecture by Dmitri Popov" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Window, building, architecture by Dmitri Popov</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/gqNw3zshyXU">
            <img src="https://source.unsplash.com/gqNw3zshyXU/800x640" alt="Architecture, building, modern and glass HD photo by Mike Wilson" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Architecture, building, modern and glass HD photo by Mike Wilson</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/ypVM8PnygUo">
            <img src="https://source.unsplash.com/ypVM8PnygUo/800x640" alt="British Museum ceiling photo by Mika" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">British Museum ceiling photo by Mika</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/tvPvROBv0F4">
            <img src="https://source.unsplash.com/tvPvROBv0F4/800x640" alt="Evening over Millennium Bridge photo by James Padolsey" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Evening over Millennium Bridge photo by James Padolsey</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/c9z9RlCh0Zo">
            <img src="https://source.unsplash.com/c9z9RlCh0Zo/800x640" alt="Architecture, building, geometric and structure HD photo by Frances Gunn" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Architecture, building, geometric and structure HD photo by Frances Gunn</span></div>
          </a>
        </li>
        <li>
          <a href="https://unsplash.com/photos/KY-opXSvJsU">
            <img src="https://source.unsplash.com/KY-opXSvJsU/800x640" alt="Building, sky, grey and blue HD photo by Pierre Châtel-Innocenti" />
            <div class="caption"><span class="caption-title">Architecture</span><span class="caption-desc">Building, sky, grey and blue HD photo by Pierre Châtel-Innocenti</span></div>
          </a>
        </li>
      </ul>
    </section>
  </div>
</body>

            
          
!
            
              /*
====================================

Gallery UI CSS

====================================
*/

body {
  left: 0;
  margin: 0;
  position: relative;
  font-family: Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
------------------------------------
Content
------------------------------------ */
.content {
  background: #eee;
}

/*
------------------------------------
Menu
------------------------------------ */
.menu {
  background: #222;
  left: -320px;
  height: 100%;
  position: fixed;
  width: 320px;
  z-index: 10;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  line-height: 45px;
}

.menu a {
  color: #999;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding: 0 25px;
}

.menu a:hover {
  color: #fff;
  background: #333;
}

.menu a.selected,
.menu a:active {
  color: #fff;
  background: DodgerBlue;
}

/*
------------------------------------
Buttons
------------------------------------ */
.close-button,
.menu-button {
  color: #999;
  cursor: pointer;
  font-size: 16px;
  padding: 25px 25px 25px 65px;
  height: 68px;
  box-sizing: border-box;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-button {
  background: #eee;
  background: rgba(255,255,255,.85);
  position: fixed;
  width: 100%;
  z-index: 5;
}

.menu-button:hover {
  background: #fff;
}

.close-button {
  color: #666;
}

.close-button:hover {
  color: #fff;
}

.close-button .icon {
  font-size: 30px;
  position: absolute;
  top: 14px;
  left: 25px;
}

.close-button:hover .icon {
  color: DodgerBlue;
}

.menu-button .icon {
  fill: #999;
  position: absolute;
  top: 23px;
  left: 25px;
}

.menu-button:hover {
  color: #000;
  background: rgba(255,255,255,.85);
}

.menu-button:hover .icon {
  fill: DodgerBlue;
}

.open .menu-button {
  color: #bbb;
  cursor: default;
}

.open .menu-button .icon {
  fill: #bbb;
}


/*
------------------------------------
Gallery
------------------------------------
*/
.gallery {
  padding-top: 68px;
}

.cards {
  font-size: 1em;
  line-height: 1.4em;
  list-style: none;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.cards li {
  background: #fff;
  position: relative;
  width: 100%;
}
.cards li a,
.cards li a img {
  display: block;
  position: relative;
}
.cards li a img {
  max-width: 100%;
}
.cards li a {
  overflow: hidden;
  text-decoration: none;
  color: #999;
}
.cards li a div {
  background: #fff;
  min-height: 120px;
  padding: 25px 30px;
  box-sizing: border-box;
}
.cards li a div span {
  display: block;
}

.caption-title {
  font-weight: bold;
}

.caption-desc {
  font-size: .85em;
}

/*
------------------------------------
Images (Lazy Loading)
------------------------------------ */
img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
  min-height: 150px;
}

/*
------------------------------------
Media Queries
------------------------------------ */
@media (min-width: 750px) {

  .gallery {
    padding: 88px 20px 20px;
  }

  .cards {
    min-height: 1600px;
    overflow: hidden;
  }

  .cards li {
    float: left;
    width: 50%;
    background: none;
  }

  .open .cards li {
    width: 100%;
  }

  .cards li a {
    background: none;
    margin: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px #ccc;
  }

  .cards li a div {
    height: 120px;
  }

}

@media (min-width: 1024px) {

  .cards li {
    width: 33.33333333%;
  }

  .open .cards li {
    width: 50%;
  }

}

@media (min-width: 1400px) {

  .gallery {
    max-width: 1400px;
    margin: 0 auto;
  }

  .cards li {
    width: 25%;
  }

  .open .cards li {
    width: 33.33333333%;
  }

}

@media (min-width: 1800px) {

  .open .cards li {
    width: 25%;
  }

}

            
          
!
            
              /*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-csstransitions-domprefixes-mq-setclasses-shiv-testallprops-testprop !*/
!function(e,t,n){function r(e,t){return typeof e===t}function o(){var e,t,n,o,a,i,s;for(var l in S)if(S.hasOwnProperty(l)){if(e=[],t=S[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"function")?t.fn():t.fn,a=0;a<e.length;a++)i=e[a],s=i.split("."),1===s.length?Modernizr[s[0]]=o:(!Modernizr[s[0]]||Modernizr[s[0]]instanceof Boolean||(Modernizr[s[0]]=new Boolean(Modernizr[s[0]])),Modernizr[s[0]][s[1]]=o),C.push((o?"":"no-")+s.join("-"))}}function a(e){var t=b.className,n=Modernizr._config.classPrefix||"";if(w&&(t=t.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),w?b.className.baseVal=t:b.className=t)}function i(e,t){return!!~(""+e).indexOf(t)}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):w?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function u(e,t){return function(){return e.apply(t,arguments)}}function c(e,t,n){var o;for(var a in e)if(e[a]in t)return n===!1?e[a]:(o=t[e[a]],r(o,"function")?u(o,n||t):o);return!1}function f(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(t,n,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,t,n);var a=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(a){var i=a.error?"error":"log";a[i].call(a,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!n&&t.currentStyle&&t.currentStyle[r];return o}function p(){var e=t.body;return e||(e=s(w?"svg":"body"),e.fake=!0),e}function m(e,n,r,o){var a,i,l,u,c="modernizr",f=s("div"),d=p();if(parseInt(r,10))for(;r--;)l=s("div"),l.id=o?o[r]:c+(r+1),f.appendChild(l);return a=s("style"),a.type="text/css",a.id="s"+c,(d.fake?d:f).appendChild(a),d.appendChild(f),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(t.createTextNode(e)),f.id=c,d.fake&&(d.style.background="",d.style.overflow="hidden",u=b.style.overflow,b.style.overflow="hidden",b.appendChild(d)),i=n(f,e),d.fake?(d.parentNode.removeChild(d),b.style.overflow=u,b.offsetHeight):f.parentNode.removeChild(f),!!i}function h(t,r){var o=t.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(t[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var a=[];o--;)a.push("("+f(t[o])+":"+r+")");return a=a.join(" or "),m("@supports ("+a+") { #modernizr { position: absolute; } }",function(e){return"absolute"==d(e,null,"position")})}return n}function g(e,t,o,a){function u(){f&&(delete j.style,delete j.modElem)}if(a=r(a,"undefined")?!1:a,!r(o,"undefined")){var c=h(e,o);if(!r(c,"undefined"))return c}for(var f,d,p,m,g,v=["modernizr","tspan","samp"];!j.style&&v.length;)f=!0,j.modElem=s(v.shift()),j.style=j.modElem.style;for(p=e.length,d=0;p>d;d++)if(m=e[d],g=j.style[m],i(m,"-")&&(m=l(m)),j.style[m]!==n){if(a||r(o,"undefined"))return u(),"pfx"==t?m:!0;try{j.style[m]=o}catch(y){}if(j.style[m]!=g)return u(),"pfx"==t?m:!0}return u(),!1}function v(e,t,n,o,a){var i=e.charAt(0).toUpperCase()+e.slice(1),s=(e+" "+N.join(i+" ")+i).split(" ");return r(t,"string")||r(t,"undefined")?g(s,t,o,a):(s=(e+" "+_.join(i+" ")+i).split(" "),c(s,t,n))}function y(e,t,r){return v(e,n,n,t,r)}var C=[],S=[],E={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){S.push({name:e,fn:t,options:n})},addAsyncTest:function(e){S.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=E,Modernizr=new Modernizr;var b=t.documentElement,w="svg"===b.nodeName.toLowerCase();w||!function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=C.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=C.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),C.elements=n+" "+e,u(t)}function a(e){var t=y[e[g]];return t||(t={},v++,e[g]=v,y[v]=t),t}function i(e,n,r){if(n||(n=t),f)return n.createElement(e);r||(r=a(n));var o;return o=r.cache[e]?r.cache[e].cloneNode():h.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!o.canHaveChildren||m.test(e)||o.tagUrn?o:r.frag.appendChild(o)}function s(e,n){if(e||(e=t),f)return e.createDocumentFragment();n=n||a(e);for(var o=n.frag.cloneNode(),i=0,s=r(),l=s.length;l>i;i++)o.createElement(s[i]);return o}function l(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return C.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(C,t.frag)}function u(e){e||(e=t);var r=a(e);return!C.shivCSS||c||r.hasCSS||(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||l(e,r),e}var c,f,d="3.7.3",p=e.html5||{},m=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,h=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g="_html5shiv",v=0,y={};!function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",c="hidden"in e,f=1==e.childNodes.length||function(){t.createElement("a");var e=t.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(n){c=!0,f=!0}}();var C={elements:p.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:d,shivCSS:p.shivCSS!==!1,supportsUnknownElements:f,shivMethods:p.shivMethods!==!1,type:"default",shivDocument:u,createElement:i,createDocumentFragment:s,addElements:o};e.html5=C,u(t),"object"==typeof module&&module.exports&&(module.exports=C)}("undefined"!=typeof e?e:this,t);var x="Moz O ms Webkit",_=E._config.usePrefixes?x.toLowerCase().split(" "):[];E._domPrefixes=_;var N=E._config.usePrefixes?x.split(" "):[];E._cssomPrefixes=N;var z={elem:s("modernizr")};Modernizr._q.push(function(){delete z.elem});var j={style:z.elem.style};Modernizr._q.unshift(function(){delete j.style});E.testProp=function(e,t,r){return g([e],n,t,r)};E.testAllProps=v,E.testAllProps=y,Modernizr.addTest("csstransitions",y("transition","all",!0));var P=function(){var t=e.matchMedia||e.msMatchMedia;return t?function(e){var n=t(e);return n&&n.matches||!1}:function(t){var n=!1;return m("@media "+t+" { #modernizr { position: absolute; } }",function(t){n="absolute"==(e.getComputedStyle?e.getComputedStyle(t,null):t.currentStyle).position}),n}}();E.mq=P,o(),a(C),delete E.addTest,delete E.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);


/*--------------------------------*/
/* Unsplash Gallery               */
/*--------------------------------*/
/* by Stephen Bau                 */
/*--------------------------------*/

var main = function() {

  var count = 0;
  var windowResize = 0;
  var body = $('body');
  var menu = $('.menu');
  var menuButton = $('.menu-button');
  var closeButton = $('.close-button');
  var navItems = $('.nav a');
  var menuClick = 0;
  var closeClick = 0;
  var navClick = 0;
  var loadCount = 0;
  var resizeTimer;
  var unloadTimer;
  var imageFetch = {
    on: false,
    timer: null,
    timeout: 250
  };
  var unique = true;
  var numItemsToGenerate = 24; //how many gallery items you want on the screen
  var numImagesAvailable = 1000; //the number of images available in the collection
  var imageWidth = 800; //desired image width in pixels
  var imageHeight = 640; //desired image height in pixels
  var collectionID = 1163637; //the collection ID from the original url
  var collectionTitle = "Architectural Lines"; //the collection ID from the original url
  var collectionDesc = "Metal and glass, concrete and wood, straight lines and curves.";
  var mQuery = Modernizr.mq('(min-width: 750px)');
  var gallery = $('.cards');
  var galleryItems = $('.cards li');
  var cards = galleryItems;
  var galleryLoaded = true;

  // Generate random image gallery on page load
  // var unsplashImages = getUnsplashImages(true);

  // Hide cards on page load
  // cards.css({opacity: 0});

  addClickEvents();

  $(window).on('resize', function(e) {

    removeClickEvents();
    resetMenu();

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      windowResize++;
      // console.log("Window resized: " + windowResize);
      addClickEvents();
    }, 200);
  });

  function lazyLoad() {

    // https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
    [].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
      img.setAttribute('src', img.getAttribute('data-src'));
      img.onload = function() {
        img.removeAttribute('data-src');
      };
    });
  }

  function testQuery() {
    return mQuery = Modernizr.mq('(min-width: 750px)');
  }

  function addClickEvents() {

    testQuery();

    menuButton.on('click', function(e) {
      menuClick++;
      // console.log("Menu clicked: " + menuClick);
      menu.animate({left: 0}, 200);
      if (mQuery) {
        body.animate({marginLeft: '320px'}, 250).addClass('open');
      } else {
        body.addClass('open');
      }
    });
    closeButton.on('click', function(e) {
      closeClick++;
      // console.log("Close clicked: " + closeClick);
      menu.animate({left: '-320px'}, 200);
      if (mQuery) {
        body.animate({marginLeft: 0}, 200).removeClass('open');
      } else {
        body.removeClass('open');
      }
    });

     navItems.on('click', function(e) {
       navClick++;
       // console.log("Nav clicked: " + navClick);
       clickGalleryMenu(this);
       unloadCards();
     });

  }

  function resetMenu() {
    body.css({marginLeft: 0}).removeClass('open');
    menu.css({left: -320});
  }

  function removeClickEvents() {
    menuButton.off('click');
    closeButton.off('click');
    navItems.off('click');
  }

  function positionCards() {
    if (cards instanceof jQuery) {
      cards.each(function(index, value) {
        var topValue = ((index + 3) * 200) + 1000 + "px";
        $(this).css({top: topValue, opacity: 0});
      });
    }
  }

  function loadCards() {
    loadCount++;
    console.log("===================================");
    console.log("Loading");
    console.log("-----------------------------------");
    console.log("loadCount: " + loadCount);
    if (galleryLoaded) {
      console.log("Cards already loaded");
      animateCards();
    } else {
      animateCards();
    }
  }

  function animateCards() {
    if (cards instanceof jQuery) {
      cards.each(function(index, value) {
        var delayValue = (index * 150);
        $(this).delay(delayValue).animate({top: 0, opacity: 1}, 400, "swing", countingCards(loadCompleted));
      });
    }
  }

  function loadCompleted() {
    galleryLoaded = true;
    console.log("Load Completed");
  }

  function unloadCards() {
    console.log("===================================");
    console.log("Unloading");
    console.log("-----------------------------------");
    galleryLoaded = false;
    if (cards instanceof jQuery) {
      cards.each(function(index, value) {
        var reverse = Math.abs(index - cards.length);
        var topValue = ((index + 3) * 200) + 1000 + "px";
        var delayValue = (reverse * 30);
        $(this).delay(delayValue).animate({top: topValue, opacity: 0}, 400, "swing", countingCards(unloading));
      });
    }
  }

  function unloading() {
    unloadTimer = setTimeout(function() {
      getNewImageCollection();
    }, 1000);
  }

  function getNewImageCollection() {
    clearTimeout(unloadTimer);
    if (collectionID) {
      getUnsplashImages(true);
    } else {
      loadOriginalImageCollection();
    }
  }

  function loadOriginalImageCollection() {
    cards = galleryItems;
    replaceGallery(cards);
    positionCards();
    loadCards();
  }

  function shuffleAndLoadCards() {
    clearTimeout(unloadTimer);
    cards = shuffle(cards);
    replaceGallery(cards);
    positionCards();
    loadCards();
  }

  function replaceGallery(items) {
    gallery.empty();
    for(let i = 0; i < items.length; i++) {
      gallery = gallery.append(items[i]);
    }
  }

  function shuffle(items) {
    return items.slice().sort(function() { return 0.5 - Math.random() });
  }

  function countingCards(func = null) {
    count++;
    // console.log("image " + count);
    if (count >= cards.length) {
      count = 0;
      if (func) {
        func();
      }
    }
  }

  function clickGalleryMenu(item) {
    collectionID = item.dataset.cid;
    collectionTitle = item.dataset.ctitle;
    collectionDesc = item.dataset.cdesc;
    numImagesAvailable = item.dataset.cavail;

    navItems.removeClass('selected');
    $(item).addClass('selected');
  }

  function getUnsplashImages(render = false) {
    // https://medium.com/quick-code/how-to-quickly-generate-a-random-gallery-of-images-from-an-unsplash-collection-in-javascript-4ddb2a6a4faf

    console.log("===================================");
    console.log(collectionTitle);
    console.log("-----------------------------------");
    console.log("collectionID: " + collectionID);
    console.log("collectionTitle: " + collectionTitle);
    console.log("collectionDesc: " + collectionDesc);
    console.log("numImagesAvailable: " + numImagesAvailable);
    console.log("-----------------------------------");

    var imageCount = 0;
    let images = [];

    for(let i = 0; i < numItemsToGenerate; i++){
      let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
      getImage(randomImageIndex, unique);
    }

    function startFetchTimer (time = imageFetch.timeout) {
      imageFetch.on = true;
      imageFetch.timer = setTimeout(function() {
        stopFetchTimer(renderImages);
      }, time);
    }

    function stopFetchTimer(callback = null) {
      clearTimeout(imageFetch.timer);
      imageFetch.on = false;
      if (callback) {
        console.log("Fetch timer timed out");
        callback();
      }
    }

    function getImage(randomNumber){
      fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`)
      .then((response)=> {
        if (!galleryLoaded) {
          if (unique) {
            if (isUnique(images, response.url)) {
              images.push(response.url);
              imageCount++;
              console.log("image " + imageCount);
              stopFetchTimer();
              startFetchTimer();
            }
          } else {
            images.push(response.url);
            imageCount++;
            // console.log("image " + imageCount);
          }
        } else {
          // console.log("Gallery already loaded");
          // console.log("image " + imageCount);
          // console.log("Number of images: " + images.length);
          return;
        }
        // if (!unique && imageCount >= numItemsToGenerate && render) {
        //   renderUnsplashGallery(images, collectionID, collectionTitle, collectionDesc);
        //   return images;
        // } else {
        //   if (!imageFetch.on) {
        //     startFetchTimer(imageFetch.timeout);
        //   }
        // }
      });
    }

    function renderImages() {
      console.log("Render Images");
      renderUnsplashGallery(images, collectionID, collectionTitle, collectionDesc);
      return images;
    }

  }

  function renderUnsplashGallery(images, collectionID, collectionTitle, collectionDesc) {
    var newGallery = $('<ul />').addClass('cards');
    for(let i = 0; i < images.length; i++){
      var galleryItem = document.createElement('li');
      var html = `
        <a href="https://unsplash.com/collections/${collectionID}">
          <img data-src="${images[i]}" alt="Photo from Unsplash" />
          <div class="caption"><span class="caption-title">${collectionTitle}</span><span class="caption-desc">${collectionDesc}</span></div>
        </a>
      `;
      galleryItem.innerHTML = html;
      galleryItem = $(galleryItem);
      newGallery.append(galleryItem);
    }
    cards = newGallery.find('li');
    replaceGallery(cards);
    lazyLoad();
    positionCards();
    loadCards();
    console.log("Unsplash images loaded");
  }

  function isUnique(array, value) {
    for(let i = 0; i < array.length; i++){
      if (array[i] == value) {
        return false;
      }
    }
    return true;
  }

};

$(document).ready(main);

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console