@extends('layout/template')

@section('content')
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h1>Galleries {{ $gallery->name }}</h1>

            <div id="mygallery" >
                    <div id="fotorama" class="fotorama" data-allowfullscreen="true" data-nav="thumbs" data-width="100%">
                        @foreach($images as $image)
                            <img src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=medium" data-full="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=big" >
                        @endforeach
                    </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
    <script>
        $(function () {
            // 1. Initialize fotorama manually.
            var $fotoramaDiv = $('#fotorama').fotorama();

            // 2. Get the API object.
            var fotorama = $fotoramaDiv.data('fotorama');

            // 3. Inspect it in console.
            console.log(fotorama);

            fotorama.requestFullScreen()
        });

    </script>

@endsection