galerija.html

---
layout: default
title: Galerija
active: galerija
styles:
    - /assets/css/galleryStyle.css
scripts:
    - /assets/js/anime.min.js
---
<div class = "container">
  <div class='desktop-layout d-none d-md-block'>
    <div class="row mt-1">
        <div class='col-5'>
            <div class='album'
                 onclick='onAlbumClicked(0)'
                 onmouseenter='onMouseEnter(0)'
                 onmouseleave='onMouseEnter(0)'
            >
                Sve
            </div>
            <div class='album-underline'></div>

            {% assign len = site.photos.size %}
            {% assign len = len | minus:1 %}
            {% for it in (0..len) %}
                <div class='album'
                     onclick='onAlbumClicked({{it|plus:1}})'
                     onmouseenter='onMouseEnter({{it|plus:1}})'
                     onmouseleave='onMouseEnter({{it|plus:1}})'
                >
                    {{site.photos[it].name}}
                </div>
                <div class='album-underline'></div>
            {% endfor %}

        </div>


        <div class='col' style='height: 100%;overflow-x: hidden;overflow-y: auto'>
            <div class='row justify-content-center'>
                <div class='col'>
                    <h3 id='album_title'></h3>
                </div>
            </div>
            <div class='row justify-content-end'>
               <div class='col-auto'>
                    <h5 id='album_date'></h5>
               </div>
            </div>

            <div class='row'>
                <div class='col' id='main_image'>

                </div>
            </div>

            <div class='row justify-content-between' id='other_images'>

            </div>

        </div>
    </div>

  </div>

    <div class='cover-all' style='overflow: auto' onclick='onCoverAllClicked(event)'
         >
        <div class='row justify-content-end'>
            <div class='col-auto' style='color:white;font-weight: bold; cursor: pointer'
                 onclick='onImageViewToggled(-1)'
            >
                X
            </div>
        </div>
        <div class='row'>
            <div class='offset-1 d-none d-md-block'></div>
            <div class='col-12 col-md-10'>
                <div id='imageview' class='carousel slide' data-pause='true' >
                    <div class='carousel-inner'></div>
                    <a class="carousel-control-prev" href='#imageview'
                       role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href='#imageview'
                       role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class='mobile-layout d-md-none d-sm-block'>

        <div class='list-group'>
            <div class='list-group-item list-group-item-action' style='text-align: center'
                 onclick='onAlbumClickedMobile(0);'>
                Sve
            </div>

            {% assign len = site.photos.size %}
            {% assign len = len | minus:1 %}
            {% for it in (0..len)%}
                <div class='list-group-item-action list-group-item ' style='text-align: center'
                     onclick='onAlbumClickedMobile({{it|plus:1}});'>
                    {{site.photos[it].name}}
                </div>
        {% endfor %}
        </div>

    </div>

</div>
<script type='text/javascript'>
    albums = [
        {
            name:'Sve',
            date:'',
            images:
            [
                {% for album in site.photos %}
                    {% for img in album.images %}
                        '{{img}}',
                    {% endfor %}
                {% endfor %}
            ]
        },
		{% for album in site.photos %}
        {
        	name:'{{album.name}}',
            date:'{{album.date | date: "%d.%m.%Y."}}',
            images:[
                {%for img in album.images%}
                    '{{img}}',
                {%endfor%}
            ]
        },
        {% endfor%}
    ];

</script>

<script type='text/javascript' src='/assets/js/galleryScript.js'></script>