ninefolio/templates/Illustration/slide.html.twig

113 lines
3.8 KiB
Twig
Executable File

{% extends "base.html.twig" %}
{% block metablock %}
<meta property="og:title" content="{{ appName }} - Slide" />
<meta property="og:url" content="{{ absolute_url(path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params'))) }}" />
{% endblock %}
{% block localstyle %}
<style>
#main {
padding: 0px;
display:none;
margin-bottom:200px;
}
/* Image */
#illustration_illustration_img, #kadavresky_kadavresky_img, #album_photo_img,#webzine_page_img{
margin: 30px auto 0px auto;
display:block;
/*box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.45);*/
}
</style>
<div id="content" style="display:flex">
<div style="width:70%; overflow:hidden;padding-left:35px;test-align:center;">
<img style="display:none;" id="illustration_illustration_img" src="/{{ appAlias }}/uploads/illustration/{{illustrations[0].illustration}}">
</div>
<div style="width:30%; display:flex; flex-direction: column; align-items:center;padding-top:15px">
<img src="{{asset("uploads/avatar/"~user.avatar)}}" style="width:150px; height:150px;border-radius:100%">
<h2 style="flex-grow:1">{{user.pseudo}}</h2>
{% set qrCode = qr_code_result(absolute_url(path("app_home_user",{userpseudo:user.slug}))) %}
<img src="{{ qrCode.dataUri }}" width="200px" />
</div>
</div>
{% endblock %}
{% block localjavascript %}
var posImg=0
var tbimg=[]
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle.
while (currentIndex > 0) {
// Pick a remaining element.
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
function resizeImage() {
height=$(window).height()-35;
$("#content").height($(window).height()-35);
$("#illustration_illustration_img").css({height:height,width:'auto'});
width=$(window).width()-90;
if($("#illustration_illustration_img").width()>width)
$("#illustration_illustration_img").css({width:width,height:'auto'});
height=$("#illustration_illustration_img").height();
}
$(document).ready(function() {
{% for illustration in illustrations %}
tbimg.push("{{illustration.illustration}}");
{% endfor %}
tbimg=shuffle(tbimg);
total=tbimg.length;
console.log(total);
$('body').imagesLoaded(function() {
resizeImage();
$("#illustration_illustration_img").fadeIn();
});
var intervalId = window.setInterval(function(){
posImg++;
if(posImg>=total) posImg=0;
img=tbimg[posImg];
console.log(img);
url="/{{ appAlias }}/uploads/illustration/xxx";
url=url.replace("xxx",img);
$("#illustration_illustration_img").fadeOut();
$("#illustration_illustration_img").promise().done(function(){
$("#illustration_illustration_img").hide();
$("#illustration_illustration_img").attr("src",url);
/*
resizeImage();
$("#illustration_illustration_img").fadeIn();
*/
});
}, 5000);
});
$('#illustration_illustration_img').on("load",function() {
resizeImage();
$("#illustration_illustration_img").fadeIn();
});
$(window).resize(function() {
resizeImage();
});
{% endblock %}