kuvia/resources/views/themes/gallery/kuvia-gallery/list.blade.php

51 lines
2 KiB
PHP
Raw Normal View History

2021-01-17 04:12:42 +00:00
@extends('layout/template')
@section('content')
2021-01-20 18:51:12 +00:00
<div class="row" style="background-color: #607c89;min-height: calc(100vh - 400px);max-height: calc(100vh - 200px);padding-top:20px;">
2021-01-17 04:12:42 +00:00
<div class="col-md-12" style="text-align: center;">
<div>
2021-01-17 04:17:16 +00:00
<div class="fotorama" data-nav="thumbs" data-keyboard="true" data-ratio="800/600" data-width="1200" data-maxheight="80%" data-allowfullscreen="true">
2021-01-17 04:12:42 +00:00
@foreach($images as $image)
2021-01-20 00:16:04 +00:00
<a href="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=big" data-taken="{{ $image->DateTimeOriginal }}" data-description="{{ $image->description }}" data-name="{{ $image->name }}"><img src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=pixel"></a>
2021-01-17 04:12:42 +00:00
@endforeach
</div>
</div>
</div>
</div>
2021-01-20 00:01:05 +00:00
<div class="row">
2021-01-20 00:16:04 +00:00
<div class="col-md-2"></div>
2021-01-20 00:23:47 +00:00
<div class="col-md-4 order-sm-12">
2021-01-20 00:01:05 +00:00
<h1 id="filename"></h1>
2021-01-20 00:16:04 +00:00
<i>Picture take <span id="taken"></span></i>
2021-01-20 00:01:05 +00:00
<p id="description"></p>
</div>
2021-01-20 00:23:47 +00:00
<div class="col-md-4 order-sm-1">
<h1>Gallery: <?php echo $gallery->name; ?></h1>
<p><?php echo $gallery->html; ?></p>
</div>
2021-01-20 00:01:05 +00:00
</div>
2021-01-17 04:12:42 +00:00
@endsection
@section('js')
2021-01-20 00:01:05 +00:00
<script>
$('.fotorama').on('fotorama:show', function (e, fotorama) {
console.log(e.type, fotorama.activeFrame);
$("#filename").html(fotorama.activeFrame.name);
$("#description").html(fotorama.activeFrame.description);
2021-01-20 00:16:04 +00:00
$("#taken").html(fotorama.activeFrame.taken);
2021-01-20 00:01:05 +00:00
});
</script>
2021-01-17 04:12:42 +00:00
<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>
<style type="text/css">
.fotorama__wrap {
margin: 0 auto;
}
</style>
@endsection