@extends('layout.container')

@section('title', $album->caption.' Images')

@section('meta_tags', env('APP_NAME').' Gallery Albums ' . $album->caption)

@section('meta_description', env('APP_NAME').' Discover what we do in our Gallery albums')

@section('header_css')
<link href="{{asset('frontend/css/simplelightbox.min.css')}}" rel='stylesheet' type='text/css'>
@endsection

@section('header_js')
@endsection

@section('content')
<!-- breadcrumb wrapper Start -->
<div class="breadcrumb-banner-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="breadcrumb-text">
          <h1 class="text-center">{{$album->caption}} </h1>
          <div class="breadcrumb-bar">
            <ul class="breadcrumb text-center">
               <li><a href="{{route('home')}}">Home</a></li>
			        <li><a href="{{route('gallery.index')}}">Gallery</a> </li>
              <li>{{$album->caption}} </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- breadcrumb wrapper End --> 

<!-- Inner page wrapper start -->
<div class="inner-page-wrapper home-gallery-wrapper">
  <div class="container">
  <div class="row">
   <div class="gal-container">
        
              
        
        
        
        
        
      </div>
  </div>
</div>

</div>
<!-- Inner page wrapper end --> 


	
@endsection

@section('footer_js')

<script type="text/javascript" src="{{asset('frontend/js/simple-lightbox.js')}}"></script>

<script>
	$(function(){
		var $gallery = $('.gal-container a').simpleLightbox();
		
		$gallery.on('show.simplelightbox', function(){
			console.log('Requested for showing');
		})
		.on('shown.simplelightbox', function(){
			console.log('Shown');
		})
		.on('close.simplelightbox', function(){
			console.log('Requested for closing');
		})
		.on('closed.simplelightbox', function(){
			console.log('Closed');
		})
		.on('change.simplelightbox', function(){
			console.log('Requested for change');
		})
		.on('next.simplelightbox', function(){
			console.log('Requested for next');
		})
		.on('prev.simplelightbox', function(){
			console.log('Requested for prev');
		})
		.on('nextImageLoaded.simplelightbox', function(){
			console.log('Next image loaded');
		})
		.on('prevImageLoaded.simplelightbox', function(){
			console.log('Prev image loaded');
		})
		.on('changed.simplelightbox', function(){
			console.log('Image changed');
		})
		.on('nextDone.simplelightbox', function(){
			console.log('Image changed to next');
		})
		.on('prevDone.simplelightbox', function(){
			console.log('Image changed to prev');
		})
		.on('error.simplelightbox', function(e){
			console.log('No image found, go to the next/prev');
			console.log(e);
		});
	});
</script>
@endsection