ninefolio/templates/Illustration/slide.html.twig

{% 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 id="avatar" 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 id="qr" 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()-70;
        $("#content").height($(window).height()-35);
        $("#illustration_illustration_img").css({height:height,width:'auto'});
        $("#avatar").height($(window).height()/6);
        $("#avatar").width($(window).height()/6);
        $("#qr").height($(window).height()/6);
        $("#qr").width($(window).height()/6);

        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 %}