@extends('front.layouts.master')
@section('css')
    <link href="/front/css/lightgallery.css" rel="stylesheet">
@endsection
@section('content')
    <section class="banner_area" style="background-image: url({{$picheader}});">

        <div class="container">
            <h1 class="text-white IRANSans_Bold">گالری تصاویر</h1>
            <div class="breadcrumb_content">
                <ul>
                    <li><a href="#">صفحه اصلی</a></li>
                    <li><a href="#">{{$title}}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="container p-md-5 p-4  po2 hot-posts">
        <div class="d-flex flex-row mb-lg-2 mb-3">
            <div class="Dottedstocol ml-3"></div>
            <div class="singletitle">
                <span>گالری تصاویر</span>
                <h1 class="text-right">{{$title}}</h1>
            </div>
        </div>
        <div class="row pt-3">

            <div class="text-right copic popup-gallery row">
                @foreach ($galleries as $item)
                    <div class="col-md-4">
                        <a href="{{ $item->pic }}" class="grid">
                            <figure class="effect-ruby radius10">
                                <img src="{{ $item->pic }}" alt="img01" class="radius10 img-fluid" />
                                <figcaption>
                                    <h2>{{ $item->name }}</h2>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                @endforeach
            </div>


        </div>
       
    </section>
@endsection
@section('js-page')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#lightgallery').lightGallery();
        });
    </script>

    <script src="/front/js/picturefill.min.js"></script>
    <script src="/front/js/lightgallery.js"></script>
    <script src="/front/js/jquery.mousewheel.min.js"></script>
@endsection