@extends('themes.base.layout') @section('title', $album->name) @section('breadcrumb') <div class="breadcrumb"> <div class="container"> <ol class="breadcrumb"> <li><a href="{{ route('home') }}">Gallery</a></li> <li class="active">{{ $album->name }}</li> </ol> </div> </div> @endsection @section('content') <div class="container album-container album-slideshow-container"> <div class="row"> <div class="col-xs-12"> <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> <hr/> </div> </div> <div class="row"> <div class="col-xs-12 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-xs-12"> <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> @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