<!--
lightSlider + lightGallery hugo integration

This requires the SourceJSON extension from Cyrill Schumacher.

https://github.com/SchumacherFM/hugo/tree/dynamicPagesWithJsonCsv

Params:
    name:       css #id of your slider
    url:        path or url of your slider.json
    includejs:  add a jquery.min.js, lightGallery.min.js and jquery.lightSlider.min.js include.

Creates a lightSlider on your page, call it with: {{/*

    {{% lightslider name="<your-slider-name>" url="<url_or_path-to-your-slider.json" [includejs="true"] %}}

*/}}

Example: {{/*

    {{% lightslider name="post_pcengines_apu1d4_slider1" url="data/post/pcengines_apu1d4.json" includejs="true" %}}

*/}}
-->
{{ if $.Get "includejs" }}
        <script src="{{ $.Page.Site.BaseURL }}/static/js/jquery.min.js"></script>
        <script src="{{ $.Page.Site.BaseURL }}/static/js/lightGallery.min.js"></script>
        <script src="{{ $.Page.Site.BaseURL }}/static/js/jquery.lightSlider.min.js"></script>
{{ end }}

{{ with .Get "url" }}
    {{ $url := . }}
    {{ with $.Get "name" }}
        {{ $name := . }}
        <ul id="{{ $name }}" class="cs-hidden" style="list-style: none; margin: 0;">
        {{ $data := getJSON $url }}
        {{ range $data.items }}
            {{ $item := . }}
            <li data-thumb="{{ $item.thumb }}" data-src="{{ $item.full }}">
                <img src="{{ $item.full }}" alt="{{ $item.alt }}" />
            </li>
        {{ end }}
        </ul>

        <script>
        jQuery('document').ready(function(){
            jQuery('#{{ $name }}').lightSlider({
               gallery: true,
               {{ if isset $data.settings "item" }}item: {{ index $data.settings "item" }},{{ end }}
               {{ if isset $data.settings "thumbItem" }}thumbItem: {{ index $data.settings "thumbItem" }},{{ end }}
               {{ if isset $data.settings "slideMargin" }}slideMargin: {{ index $data.settings "slideMargin" }},{{ end }}
               {{ if isset $data.settings "currentPagerPosition" }}currentPagerPosition: {{ index $data.settings "currentPagerPosition" }},{{ end }}
               {{ if isset $data.settings "slideMove" }}slideMove: {{ index $data.settings "slideMove" }},{{ end }}
               {{ if isset $data.settings "easing" }}easing: {{ index $data.settings "easing" }},{{ end }}
               {{ if isset $data.settings "speed" }}speed: {{ index $data.settings "speed" }},{{ end }}
               responsive : [
               {{ range $data.settings.responsive }}
                    {{ $responsive := . }}
                    {
                        {{ if isset $responsive "breakpoint" }}breakpoint: {{ index $responsive "breakpoint" }},{{ end }}
                        {{ if isset $responsive "settings" }}
                        settings: {
                            {{ if isset $responsive.settings "item" }}item: {{ index $responsive.settings "item" }},{{ end }}
                            {{ if isset $responsive.settings "slideMove" }}slideMove: {{ index $responsive.settings "slideMove" }},{{ end }}
                            {{ if isset $responsive.settings "slideMargin" }}slideMargin: {{ index $responsive.settings "slideMargin" }},{{ end }}
                        }
                        {{ end }}
                    },
               {{ end }}
               ],
               onSliderLoad: function() {
                   jQuery("#{{ $name }}").lightGallery();
               }
               });
           });
        </script>
    {{ end }}
{{ end }}
