blue-twilight/resources/views/themes/base/gallery/album_slideshow.blade.php

@extends('themes.base.layout')
@section('title', $album->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    @include(Theme::viewName('partials.album_breadcrumb'))
@endsection

@section('content')
<div class="container album-container album-slideshow-container">
    <div class="row">
        <div class="col">
            <div class="pull-right">
                @include(\App\Facade\Theme::viewName('partials.album_view_selector'))
            </div>

            <h1 class="page-title">{{ $album->name }}</h1>
            <p>{{ $album->description }}</p>
            <div class="clearfix"><!-- --></div>
            <hr/>
        </div>
    </div>

    <div class="row">
        <div class="col text-center">
            <div class="pull-right">
                <div class="btn btn-group">
                    <button class="btn btn-default" data-bind="click: pauseSlideshow, disable: isPaused, visible: isRunning"><i class="fa fa-fw fa-pause"></i></button>
                    <button class="btn btn-default" data-bind="click: continueSlideshow, enable: isPaused, visible: isRunning"><i class="fa fa-fw fa-play"></i></button>
                </div>
            </div>

            <div id="image-preview" data-bind="with: current()">
                <a data-bind="attr: { href: info_url, title: description }">
                    <img class="img-rounded thumbnail img-responsive" data-bind="attr: { src: original_url, alt: name, title: description }"/>
                </a>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 15px;">
        <div class="col">
            <div class="thumbnails">
                @foreach ($photos as $photo)
                    <a href="{{ $photo->url() }}" data-bind="click: function() { viewModel.changeCurrentImage({{ $photo->id }}); }">
                        <img class="ss-thumbnail" src="{{ $photo->thumbnailUrl('slideshow-tiny') }}" alt="{{ $photo->name }}" title="{{ $photo->description }}" data-photo-id="{{ $photo->id }}" data-original-url="{{ $photo->thumbnailUrl('fullsize') }}" data-info-url="{{ $photo->url() }}" />
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 30px;">
        @if ($album->children()->count() > 0)
            <div class="col-6 col-md-3">
                @foreach ($album->children as $childAlbum)
                    <div class="card mb-3">
                        <img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="height: 150px;"/>
                        <div class="card-block">
                            <h4 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h4>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    // TODO make this timeout configurable
    var viewModel = new SlideShowViewModel(5000);

    $(document).ready(function() {
        $('img.ss-thumbnail').each(function(index, element)
        {
            viewModel.images.push({
                'id': $(element).data('photo-id'),
                'name': $(element).attr('alt'),
                'description': $(element).attr('title'),
                'original_url': $(element).data('original-url'),
                'info_url': $(element).data('info-url')
            });
        });

        ko.applyBindings(viewModel);
        viewModel.startSlideshow();
    });
</script>
@endpush