lightslider.html

<!--
lightSlider + lightGallery hugo integration

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" %}}

*/}}
-->
{{ with .Get "url" }}
    {{ $url := . }}
    {{ with $.Get "name" }}
        {{ $name := . }}
        <ul id="{{ $name }}" class="cs-hidden">
        {{ $data := getJSON $url }}
        {{ range $data.items }}
            {{ $item := . }}
            <li data-thumb='{{ $item.thumb | absURL }}' data-src='{{ $item.full | absURL }}'>
                <img src='{{ $item.full | absURL }}' />
            </li>
        {{ end }}
        </ul>

        {{ if $.Get "includejs" }}
        <script type="text/javascript" src='{{ "js/jquery.min.js" | absURL }}'></script>
        <script type="text/javascript" src='{{ "js/lightgallery-all.min.js" | absURL }}'></script>
        <script type="text/javascript" src='{{ "js/lightslider.min.js" | absURL }}'></script>
        {{ end }}
        <script type="text/javascript">
        $(document).ready(function() {
            $('#{{ $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() {
                   $("#{{ $name }}").lightGallery();
               }
               });
            });
        </script>
    {{ end }}
{{ end }}