[mod] update example

This commit is contained in:
Laurent Peuch 2016-05-11 18:00:50 +02:00
parent c014d8633c
commit 2fee9ff370
3 changed files with 45 additions and 20 deletions

View File

@ -40,6 +40,7 @@
<section class="full-picture">
<div class="video-container">
@ -57,7 +58,7 @@
<video autoplay loop muted class="fillWidth">
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
<img class="lazy" src="video-2000.png">
<img class="lazy full-picture" src="video-2000.png">
</div>
</section>
@ -67,8 +68,9 @@
<section class="bordered-picture baguette" style="position: relative;">
<img class="lazy" data-original="video-2000.png" src="video-2000.png" alt="">
<img class="lazy" data-original="video-2000.png" src="" alt="">
<video class="lazy" id="video" poster="video-2000.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
@ -87,7 +89,7 @@
<section class="bordered-picture baguette">
<div class="caption">
<a href="stuff.png ">
<img class="lazy" src="stuff.png" data-original="stuff.png" alt="">
<img class="lazy" src="" data-original="stuff.png" alt="">
</div>
</a>
@ -101,8 +103,9 @@
<section class="bordered-picture baguette" style="position: relative;">
<img class="lazy" data-original="video-2000.png" src="video-2000.png" alt="">
<img class="lazy" data-original="video-2000.png" src="" alt="">
<video class="lazy" id="video" poster="video-2000.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
@ -121,7 +124,7 @@
<section class="bordered-picture baguette">
<div class="caption">
<a href="stuff.png data-caption="plop"">
<img class="lazy" src="stuff.png" data-original="stuff.png" alt="">
<img class="lazy" src="" data-original="stuff.png" alt="">
<div class="caption__overlay">
<h5 class="caption__overlay__title">plop</h5>
@ -153,7 +156,7 @@
<div class="picture caption">
<a href="stuff.png" data-caption="test">
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
<div class="caption__overlay">
<h5 class="caption__overlay__title">test</h5>
@ -172,11 +175,12 @@
<div class="picture caption">
<img class="lazy" data-original="video-600.png" src="video-600.png"alt="">
<img class="lazy" data-original="video-600.png" src="" alt="">
<video class="lazy" id="video" poster="video-600.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
</div>
<div class="separator"></div>
@ -189,10 +193,14 @@
<div class="picture caption">
<img class="lazy" data-original="video-600.png" src="video-600.png"alt="">
<video class="lazy" id="video" poster="video-600.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
<a href="stuff.png" data-caption="test">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
<div class="caption__overlay">
<h5 class="caption__overlay__title">test</h5>
</div>
</a>
</div>
@ -209,7 +217,7 @@
<div class="picture caption">
<a href="stuff.png" >
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
</a>
@ -224,11 +232,12 @@
<div class="picture caption">
<img class="lazy" data-original="video-600.png" src="video-600.png"alt="">
<img class="lazy" data-original="video-600.png" src="" alt="">
<video class="lazy" id="video" poster="video-600.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
</div>
@ -250,7 +259,7 @@
<div class="picture caption">
<a href="stuff.png" data-caption="test">
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
<div class="caption__overlay">
<h5 class="caption__overlay__title">test</h5>
@ -271,7 +280,7 @@
<div class="picture caption">
<a href="stuff.png" data-caption="test">
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
<div class="caption__overlay">
<h5 class="caption__overlay__title">test</h5>
@ -292,7 +301,7 @@
<div class="picture caption">
<a href="stuff.png" data-caption="test">
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
<div class="caption__overlay">
<h5 class="caption__overlay__title">test</h5>
@ -315,7 +324,7 @@
<div class="picture caption">
<a href="stuff.png" >
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
</a>
@ -332,7 +341,7 @@
<div class="picture caption">
<a href="stuff.png" >
<img class="lazy" src="stuff-x600png" data-original="stuff-x600png" alt="">
<img class="lazy" src="" data-original="stuff-x600png" alt="">
</a>
@ -358,13 +367,14 @@
<section class="full-picture">
<div class="video-container">
<video autoplay loop muted class="fillWidth">
<source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
</video>
<img class="lazy" src="video-2000.png">
<img class="lazy full-picture" src="video-2000.png">
</div>
</section>

View File

@ -38,7 +38,11 @@
</a>
<div class="gallery-cover" style="background-image: url('first_gallery/stuff-x900png');"></div>
</div><!-- comment tricks against space between inline-block
-->
</div>

View File

@ -252,3 +252,14 @@ nav ul li > a.item-menu::before {
letter-spacing: 3px;
font-style: normal;
}
.gallery-cover video.fillWidth {
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.gallery-cover img.fillWidth {
width: 100%;
}