161 lines
5.8 KiB
HTML
161 lines
5.8 KiB
HTML
|
<!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>
|