prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[mod] update example

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
example/build/first_gallery/index.html
View File

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

6
example/build/index.html
View File

@ -30,7 +30,7 @@
--><div class="gallery-square"> --><div class="gallery-square">
<a href="first_gallery"> <a href="first_gallery">
<div class="gallery-title"> <div class="gallery-title">
<h2>my first gallery</h2> <h2>my first gallery</h2>
<h3>some subtitle</h3> <h3>some subtitle</h3>
<div class="gallery-datetime">08 December 2015</div> <div class="gallery-datetime">08 December 2015</div>
@ -38,7 +38,11 @@
</a> </a>
<div class="gallery-cover" style="background-image: url('first_gallery/stuff-x900png');"></div> <div class="gallery-cover" style="background-image: url('first_gallery/stuff-x900png');"></div>
</div><!-- comment tricks against space between inline-block </div><!-- comment tricks against space between inline-block
--> -->
</div> </div>

11
example/build/static/css/style.css
View File

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