@extends('layouts.app')

@section('meta')
    <meta name="description" content="show pictures eastern manuscripts in national library Holy holy Cyril and Methodius - Bulgaria">
@endsection

@section('title', '')

@section('link')
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- ViewrJS -->
    <link rel="stylesheet" href="viewer.min.css">
    {{--<link rel="stylesheet" href="/libs/viewerjs/dist/viewer.min.css">--}}
    {{--<link rel="stylesheet" href="libs/viewerjs/dist/viewer.min.css">--}}

    <style>
        /** {*/
            /*box-sizing: border-box;*/
        /*}*/

        .pictures {
            list-style: none;
            margin: 0;
            max-width: 40rem;
            padding: 0;
        }

        .pictures > li {
            border: 1px solid transparent;
            float: left;
            height: calc(100vh / 5);
            margin: 0 -1px -1px 0;
            overflow: hidden;
            width: calc(100% / 5);
        }

        .pictures > li > img {
            cursor: zoom-in;
            width: 100%;
        }
    </style>
@endsection

@section('content')

    <div class="container">
        <h1>Преглед на дигитално съдържание<br>View digital content</h1>
        <div id="galley">

            <ul class="pictures">

                @foreach($kngDigis as $item)
                    <li><img data-original="{{$ir_path}}{{$item->JPG_NAME}}" src="{{$ir_path}}{{$item->JPG_NAME}}" alt="{{$item->JPG_NAME}} slide"></li>
                @endforeach

            </ul>
        </div>
    </div>

    @section('javascript')
                <!-- ViewrJS -->
        <script src="viewer.min.js"></script>
        {{--<script src="/libs/viewerjs/dist/viewer.min.js"></script>--}}
        {{--<script src="libs/viewerjs/dist/viewer.min.js"></script>--}}
    <script>
            window.addEventListener('DOMContentLoaded', function () {
                var galley = document.getElementById('galley');
                var viewer = new Viewer(galley, {
                    url: 'data-original',
                    title: function (image) {
                        return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';
                    },
                });
            });
        </script>

    @endsection

@endsection