@extends('layouts.master')

@section('content')

@if($images->count() == 0)
  <div class="alert alert-info">No hay imágenes que mostrar</div>
@else
  <div id="gallery">

    @foreach($images as $image)
      {{HTML::image($image->image->url('thumb'), null, ['class' => 'img-thumbnail'])}}
    @endforeach
    
  </div>
@endif

@endsection

@section('script')

{{ HTML::script('js/imagesloaded.pkgd.min.js') }}
{{ HTML::script('js/freewall.js') }}
<script type="text/javascript">
  
  $(function(){
    $('#gallery').imagesLoaded(function(){
      var wall = new freewall('#gallery');
      wall.reset({
        selector: '.img-thumbnail',
        animate: true,
        onResize: function() {
          wall.fitWidth();
        }
      });
      wall.fitWidth();
      // for scroll bar appear;
      $(window).trigger("resize");
    });
    
  });

  
</script>
@endsection