@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/newsImages.css')->withFullUrl() !!}
@stop

@section('title')
    {{Lang::get('news.images.actualidad en imagenes')}}

@stop
@section('description')
    {{Lang::get('news.images.un repaso a la actualidad')}}
@stop

@section('content')
{!! Breadcrumbs::render('news-images') !!}
<div class="container">
    <div class="titulo_categoria">
        <span>{{Lang::get('news.images.actualidad en imagenes')}}</span>
    </div>
</div>

<div class="container">
    <div class="grid">
        @foreach ($photoArray as $photo)
        <div class="grid-item col-md-3 col-xs-6">
            {!! $photo !!}
        </div>
        @endforeach
    </div>
</div>
<div class="spacer"></div>
<div class="image-viewer hide">
   <img id="load-image" class="img-responsive">
</div>
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl()  !!}
<script>
   $(".image-item").click(function (event) {
      event.preventDefault();
      var href = $(this).attr("href");
      $(".image-viewer").removeClass("hide");
      $("#load-image").attr("src", href);
   });
   $(".image-viewer").click(function () {
      $(this).addClass("hide");
   });

   $(".grid .grid-item a").hover(function(event){
      $(this).children("span").stop(true,true).fadeToggle( "fast", "linear" );
   });
</script>
@stop