
<?php 
if($data && count($data)): 
shuffle($data);
$img = $data[0];
?>
<h4 class="page_margin_top box_header"><span class="fa fa-camera"></span> &nbsp; Beelden uit 't Gooi</h4>
 
 <div class='featured' style='display: none;'>
  <p>
   <a href="{{ route('beelden') }}"><img src="images/logo.png" alt="{{$img->images[0]->title}}" title="{{$img->images[0]->title}}" /></a>
   <b>{{ $img->title }}</b>
   {{ $img->images[0]->title }}
  </p>
 </div>
 <p><a class="read_more" href="{{ route('beelden') }}" title="Bekijk meer beelden uit het Gooi"><span class="arrow"></span><span>Meer beelden</span></a></p>
<div class="clearfix"></div>
 <p class='bouwmee'><a href="mailto:beelden@nhgooi.nl">Jouw foto hier? Mail naar beelden@nhgooi.nl!</a></p>

  <style>
    .featured {
      padding-top: 10px;
      padding-left: 0;
      padding-right: 0;
    }
    .featured img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;
    }
    .featured p, .featured a {
      font-size: 90%;
      padding-top: 0;
      padding-bottom: 0;
      color: #3A3A3A;
      text-align: center;
    }
    a.bouwmee {
      color: #3333CC;
    }
  </style>

  @push('scripts')
   <script>
    $(function() { 
      $('.featured').hide().attr('display', '');
      $('.featured img')
        .load(function() {
          $('.featured').slideDown();
        })
        .attr('src', '{{$imgBase . $img->images[0]->url}}');
    });
   </script>
  @endpush
<?php
endif;
?>
