datenvorr.at/renders.datenvorr.at
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improved slideshow

Browse Source
This commit is contained in:
Anton Lydike 2020-04-29 16:00:40 +02:00
parent 91d583eaa2
commit 3db2b7734f
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -49,7 +49,7 @@
<p>This is where the <i>power</i> comes in (mentioned in the image descriptions). We can look at Mandelbulbs with powers that are not 2.</p> <p>This is where the <i>power</i> comes in (mentioned in the image descriptions). We can look at Mandelbulbs with powers that are not 2.</p>
<h1>Can you animate the Mandelbulb?</h1> <h1>Can you animate the Mandelbulb?</h1>
<p>Yes, of couse. It only takes a huge amount of time. This one rendered in about an hour:</p> <p>Yes, of course! It only takes a huge amount of time. This one rendered in about an hour:</p>
<video src="https://datenvorr.at/renders/mbulb.mp4" controls="show"></video> <video src="https://datenvorr.at/renders/mbulb.mp4" controls="show"></video>
@ -59,6 +59,7 @@
<footer> <footer>
<div class="footer-inner"> <div class="footer-inner">
<div class="footer-links"> <div class="footer-links">
<b>Source code:</b>
<ul> <ul>
<li><a href="https://git.datenvorr.at/anton/fractals2d.h" target="_blank">2D Mandelbrot rendering</a></li> <li><a href="https://git.datenvorr.at/anton/fractals2d.h" target="_blank">2D Mandelbrot rendering</a></li>
<li><a href="https://git.datenvorr.at/anton/raymarcher.c" target="_blank">3D Fractal rendering</a></li> <li><a href="https://git.datenvorr.at/anton/raymarcher.c" target="_blank">3D Fractal rendering</a></li>
@ -67,7 +68,7 @@
</div> </div>
<div class="footer-other"> <div class="footer-other">
&copy; Copyright by Anton Lydike <br> &copy; Copyright by Anton Lydike <br>
All images are public domain All fractal images and videos are public domain
</div> </div>
</div> </div>
</footer> </footer>

1
src/main.js
View File

@ -22,6 +22,7 @@ function init_slideshow(images) {
function slide_template(slide_data) { function slide_template(slide_data) {
return `<div class="slide-item" style="background-image: url('${slide_data.url}')"> return `<div class="slide-item" style="background-image: url('${slide_data.url}')">
<p class="slide-info">${slide_data.text}</p> <p class="slide-info">${slide_data.text}</p>
<a href="${slide_data.source || slide_data.url}" target="_blank" rel="noopener">View image</a>
</div>`; </div>`;
} }

18
src/style.css
View File

@ -56,11 +56,27 @@ footer {
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #000; background-color: #000;
height: 500px; height: 500px;
color: #fff;
position: relative;
} }
.slide-info { .slide-info {
padding: 8px 0;
margin: 0;
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
color: #fff;
text-align: center; text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
.slide-item a {
position: absolute;
top: 8px;
left: 8px;
margin: 0;
padding: 0;
line-height: 1;
} }
:fullscreen .siema-slider { :fullscreen .siema-slider {