kevin
/
Popsu-coloque


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />

  <title>media</title>

  <link rel="stylesheet" href="../css/flickity.css" />
  <link rel="stylesheet" href="sandbox.css" />

  <style>
  .image-gallery img {
    display: block;
    margin-right: 20px;
    max-height: 400px;
    max-width: 100%;
  }

  #video-gallery1 .cell {
    height: 300px;
    width: auto;
  }

  .image-gallery-contained .image-cell {
    width: 100%;
    height: 300px;
    background: black;
    text-align: center;
  }

  .image-gallery-contained .image-cell a {
    margin: 0 auto;
  }

  .image-gallery-contained .image-cell img {
    height: 300px;
  }
  </style>

</head>
<body>

  <h1>media</h1>


  <div id="image-gallery1" class="container image-gallery js-flickity"
     data-flickity-options='{ "wrapAround": false, "imagesLoaded": true, "percentPosition": false }'>
     <!-- images from unsplash.com -->
     <img src="http://i.imgur.com/r8p3Xgq.jpg" />
     <img src="http://i.imgur.com/q9zO6tw.jpg" />
     <img src="http://i.imgur.com/bwy74ok.jpg" />
     <img src="http://i.imgur.com/hODreXI.jpg" />
     <img src="http://i.imgur.com/UORFJ3w.jpg" />
     <img src="http://i.imgur.com/bAZWoqx.jpg" />
     <img src="http://i.imgur.com/PgmEBSB.jpg" />
     <img src="http://i.imgur.com/aboaFoB.jpg" />
     <img src="http://i.imgur.com/LkmcILl.jpg" />
   </div>

  <div id="image-gallery2" class="container image-gallery-contained js-flickity"
     data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }'>
     <!-- images from unsplash.com -->

     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/q9zO6tw.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/bwy74ok.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/hODreXI.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/UORFJ3w.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/bAZWoqx.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/PgmEBSB.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/aboaFoB.jpg" /></a>
     </div>
     <div class="image-cell">
       <a href="http://example.com"><img src="http://i.imgur.com/LkmcILl.jpg" /></a>
     </div>
   </div>

   <!-- <div id="video-gallery1" class="container video-gallery js-flickity">
    <div class="cell">
      <iframe src="//player.vimeo.com/video/87701971" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/87701971">Yosemite HD II</a> from <a href="http://vimeo.com/projectyose">Project Yosemite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    </div>
    <div class="cell">
      <iframe width="400" height="300" src="//www.youtube.com/embed/MvUE4WUtChk" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="cell">
      <iframe src="//player.vimeo.com/video/115014610" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115014610">The Coast</a> from <a href="http://vimeo.com/nrsfilms">NRS Films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    </div>
    <div class="cell">
      <iframe width="400" height="300" src="//www.youtube.com/embed/TmQd6S9wXYQ" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="cell">
      <iframe src="//player.vimeo.com/video/115680769" width="712" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115680769">Quids In</a> from <a href="http://vimeo.com/nbnumeric">New Balance Numeric</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    </div>

  </div> -->

  <!-- <div id="demo2" class="demo">
    <div class="container variable-width js-flickity"
      data-flickity-options='{ "wrapAround": true, "freeScroll": true }'>
    </div>
  </div> -->

<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>

<script src="../js/cell.js"></script>
<script src="../js/slide.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/flickity.js"></script>
<script src="../js/drag.js"></script>
<script src="../js/prev-next-button.js"></script>
<script src="../js/page-dots.js"></script>
<script src="../js/player.js"></script>
<script src="../js/add-remove-cell.js"></script>
<script src="../js/lazyload.js"></script>

<script src="../bower_components/imagesloaded/imagesloaded.js"></script>
<script src="../bower_components/flickity-imagesloaded/flickity-imagesloaded.js"></script>

<!-- <script src="../dist/flickity.pkgd.js"></script> -->

<script>
fizzyUIUtils.docReady( function() {

  // var imgLoad = imagesLoaded('#image-gallery1');
  var flkty1 = Flickity.data('#image-gallery1');
  // imgLoad.on( 'progress', function( instance, image ) {
  //   flkty1.cellSizeChange( image.img );
  // });

  flkty1.on( 'staticClick', function( event, pointer ) {
    console.log( event.target );
  });

});
</script>

</body>
</html>