[mod] update example
This commit is contained in:
parent
c014d8633c
commit
2fee9ff370
@ -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>
|
||||
|
||||
@ -66,9 +67,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
@ -100,9 +102,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
@ -30,7 +30,7 @@
|
||||
--><div class="gallery-square">
|
||||
<a href="first_gallery">
|
||||
<div class="gallery-title">
|
||||
<h2>my first gallery</h2>
|
||||
<h2>my first gallery</h2>
|
||||
<h3>some subtitle</h3>
|
||||
<div class="gallery-datetime">08 December 2015</div>
|
||||
|
||||
@ -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>
|
||||
|
@ -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%;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user