You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
3.4 KiB
HTML
79 lines
3.4 KiB
HTML
<!--
|
|
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 }}
|