@extends('layouts.web')

@section('content')
<div class="container">
    
    <div class="text-center fs-1 fw-bold">Real <span class="text-danger">Stories</span> / Real <span class="text-danger">Impact</span></div>
    <div class="text-center pb-10">
        <a href="#" class="btn btn-danger border-15px"><span> <i class="fas fa-plus    "></i></span> Create Stories</a>
    </div>
    
</div>
<div class="container">
    
    <div id="gallery"></div>
    
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {

    $('#gallery').flowGallery({
        gridType: 'columns',
        columns: {320: 1, 480: 2, 720: 3, 960: 4, 1200: 4},
        items: {style: 'card', enterAnimation: 'slideLeft'},
        card: {
            alwaysShowCaption: true,
            descriptionInCaption: false
        },
        captionShowAnimation: 'pushUp',
        enableCache: false,
        enableDeepLinking: false,           
        loadItemChunks: true,
        loadChunksOnScroll: false,
        initialChunkSize: null, // null to disable
        chunkSize: 10,
        youtubeAPIKey: 'abcd',// enter your Youtube API key here        
        configUrl: '/fetch_stories_data'
    });
});
</script>

@endpush