correction && add form && add slide && add masonry && css
This commit is contained in:
239
node_modules/flickity/sandbox/lazyload.html
generated
vendored
Normal file
239
node_modules/flickity/sandbox/lazyload.html
generated
vendored
Normal file
@@ -0,0 +1,239 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>lazyload</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.carousel {
|
||||
border: 1px solid;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.carousel__image {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
height: 400px;
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
background: #DDD;
|
||||
transition: opacity 0.8s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.carousel__image.flickity-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel__cell {
|
||||
width: 80%;
|
||||
height: 400px;
|
||||
margin-right: 20px;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
.carousel__cell__image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>lazyload</h1>
|
||||
|
||||
<div class="carousel js-flickity" data-flickity-options='{ "lazyLoad": true }'>
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="carousel js-flickity"
|
||||
data-flickity-options='{ "lazyLoad": 1, "wrapAround": true }'>
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="carousel js-flickity"
|
||||
data-flickity-options='{ "lazyLoad": true }'>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
|
||||
</div>
|
||||
|
||||
<div class="carousel carousel--jq">
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="foo.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<h2>srcset</h2>
|
||||
|
||||
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=718 720w,
|
||||
https://picsum.photos/360/270/?image=718 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=517"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=517 720w,
|
||||
https://picsum.photos/360/270/?image=517 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=696"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=696 720w,
|
||||
https://picsum.photos/360/270/?image=696 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=56"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=56 720w,
|
||||
https://picsum.photos/360/270/?image=56 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1084"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1084 720w,
|
||||
https://picsum.photos/360/270/?image=1084 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1080"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1080 720w,
|
||||
https://picsum.photos/360/270/?image=1080 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=718 720w,
|
||||
https://picsum.photos/360/270/?image=718 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=517 720w,
|
||||
https://picsum.photos/360/270/?image=517 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=696 720w,
|
||||
https://picsum.photos/360/270/?image=696 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=56 720w,
|
||||
https://picsum.photos/360/270/?image=56 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1084 720w,
|
||||
https://picsum.photos/360/270/?image=1084 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1080 720w,
|
||||
https://picsum.photos/360/270/?image=1080 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
|
||||
<!-- dependencies -->
|
||||
<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>
|
||||
<!-- Flickity -->
|
||||
<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>
|
||||
|
||||
var $jQCarousel = $('.carousel--jq').flickity({
|
||||
lazyLoad: true
|
||||
});
|
||||
|
||||
$jQCarousel.on( 'lazyLoad', function( event, cellElem ) {
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user