regenerate: true
{% capture cache %}
{% comment %}
# ----------------------------------------------------------------------------- # ~/assets/themes/j1/extentions/light_gallery/js/j1_adapter_lightgallery.js # Liquid JS Template to create the J1 Adapter for LightGallery # # Product/Info: # https://jekyll.one # # Copyright (C) 2019 Juergen Adams # # J1 Template is licensed under the MIT License. # For details, see https://jekyll.one # # ----------------------------------------------------------------------------- # {{ config | debug }} # -----------------------------------------------------------------------------
{% endcomment %}
/*
# ----------------------------------------------------------------------------- # ~/assets/themes/j1/extentions/light_gallery/js/j1_adapter_lightgallery.js # JS Adapter for LightGallery # # Product/Info: # https://jekyll.one # https://sachinchoolur.github.io/lightGallery # https://github.com/sachinchoolur/lightGallery # # Copyright (C) 2019 Juergen Adams # Copyright (C) 2016 Sachin Choolur # # J1 Template is licensed under the MIT License. # For details, see https://jekyll.one # LightGallery FREE for PERSONAL use is licensed under the GNU AGPLv3 # For details, see https://sachinchoolur.github.io/lightGallery # LightGallery COMMERCIAL for BUSINESS use is licensed under LG Commercial License # For details, see: https://site.uplabs.com/posts/lightgallery-plugin # # ----------------------------------------------------------------------------- # Adapter generated: {{site.time}} # -----------------------------------------------------------------------------
*/ 'use strict';
{% comment %} Liquid procedures ————————————————————— {% endcomment %}
{% comment %} Variables ————————————————————— {% endcomment %} {% assign environment = site.environment %} {% assign config = site.data.apps.j1_bootstrap_gallery %}
{% comment %} Main ————————————————————— {% endcomment %} j1.BsGallery = (function (j1, window) {
var environment = '{{environment}}'; // Set environment var state = 'not_started'; var logger; var logText; return { // Initialize init: function ( options ) { logger = log4javascript.getLogger("j1.BSGallery.adapter"); this.settings = $.extend({}, options); {% if environment == 'development' %} logText = 'start gallery initialization'; logger.info(logText); state = 'started'; logger.info('state: ' + state); // Set|Log status {% endif %} this.lgInit(); return true; }, // END init // --------------------------------------------------------------------- // Load AJAX data and initialize the gallery // --------------------------------------------------------------------- // ToDo: lgInit: function () { logger = log4javascript.getLogger("j1.LightGallery.lgInit"); {% for item in config.galleries %} {% if item.gallery.enabled %} {% comment %} Set (<DIV>|<UL>) container id for the placement of HTML markup {% endcomment %} {% assign container_id = item.gallery.id %} {% capture gallery_id %}{{item.gallery.id}}_ul{% endcapture %} {% capture bs_gallery_class %}bsg_{{item.gallery.id}}{% endcapture %} {% comment %} Initialize J1 base gallery options {% endcomment %} {% assign css_classes = item.gallery.css_classes %} {% assign gallery_title = item.gallery.title %} {% assign gallery_type = item.gallery.type %} {% assign thumb_items = item.gallery.thumb_items %} {% assign thumb_spacing = item.gallery.thumb_spacing %} {% assign thumb_bordered = item.gallery.thumb_bordered %} {% assign thumb_animate = item.gallery.thumb_animate %} {% comment %} // Calculate BS grid size for the thumbnails {% endcomment %} {% assign column_width_md = 12 | divided_by:thumb_items %} // Create an gallery instance if {{ container_id }} exists if ( $('#{{ container_id }}').length ) { {% if environment == 'development' %} logText = 'gallery on ID #{{ container_id }} is being initialized'; logger.info(logText); state = 'running'; logger.info('state: ' + state); // Set|Log status {% endif %} // Place HTML markup for the title {% if gallery_title %} var gallery_title = '<div class="bs-gallery-title">{{gallery_title}}</div>'; $('#{{ container_id }}').before( gallery_title ); {% endif %} $('#{{ container_id }}').addClass("lightgallery "); {% if thumb_animate %} // Add animation $('#{{ container_id }}').addClass("lg-animate"); // $('#{{ container_id }}').removeClass("lg-animate"); {% endif %} // Calculate individual CSS styles for gallery thumbnails var style = ''; style += '<style> \n'; style += 'a.lg-thumbnail-{{container_id}}{margin-left: {{thumb_spacing}}px;margin-bottom: {{thumb_spacing}}px;} \n'; {% if thumb_bordered %} style += 'a.lg-thumbnail-{{container_id}}:hover,a.lg-thumbnail-{{container_id}}:focus,a.lg-thumbnail-{{container_id}}.active{border-color:#204a87} \n'; style += '.lg-thumbnail-{{container_id}}>img,.lg-thumbnail-{{container_id}} a>img{display:block;max-width:100%;height:auto} \n'; style += '.img-lg-thumbnail-{{container_id}}{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:2px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto} \n'; style += '.lg-thumbnail-{{container_id}}{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:2px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out} \n'; style += '.lg-thumbnail-{{container_id}}>img,.lg-thumbnail-{{container_id}} a>img{margin-left:auto;margin-right:auto} \n'; {% endif %} style += '</style> \n'; $('head').append( style ); {% if gallery_type == "image" %} // Collect image gallery data from data file (jsonPath) $.getJSON( '{{config.jsonPath}}', function (data) { var content = ''; //content += '<ul id="{{ gallery_id }}" class="row {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n'; content += '<ul id="{{ gallery_id }}" class="row bs-gallery {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n'; for ( var i in data["{{item.gallery.id}}"] ) { var img = data["{{item.gallery.id}}"][i].img; var caption = data["{{item.gallery.id}}"][i].caption; content += '<li class="col-xs-6 col-sm-4 col-md-{{column_width_md}}" ' + 'data-src="' +img+ '" ' + 'data-sub-html="' +caption+ '">' + {% if thumb_bordered %} '<a href="#" class="lg-thumbnail-{{container_id}}">' + {% else %} '<a href="#" class="lg-thumbnail lg-thumbnail-{{container_id}}">' + {% endif %} '<img class="img-fluid j1-lg-magnifier" src="' +img+ '">' + '</a>' + '</li>' } // end for content += '</ul> </div> </div>'; {% elsif gallery_type == "video-html5" or gallery_type == "video-online" %} var play_button = '/assets/themes/j1/extensions/light_gallery/img/icons/play-button.png'; // Collect html5 video gallery data from data file (jsonPath) $.getJSON( '{{config.jsonPath}}', function (data) { {% if gallery_type == "video-html5" %} var hidden_video_div = ''; for ( var i in data["{{item.gallery.id}}"] ) { var video = data["{{item.gallery.id}}"][i].video_path + '/' + data["{{item.gallery.id}}"][i].video; var poster = data["{{item.gallery.id}}"][i].image_path + '/' + data["{{item.gallery.id}}"][i].poster; var caption = data["{{item.gallery.id}}"][i].captions_lightbox; var video_id = data["{{item.gallery.id}}"][i].video_id; var video_type = video.substr(video.lastIndexOf('.') + 1); hidden_video_div += '<div style="display:none;" id="' +video_id+ '">' + '\n'; hidden_video_div += ' <video class="lg-video-object lg-html5 video-js vjs-default-skin"' + '\n'; hidden_video_div += ' poster="' +poster+ '" controls="" preload="none">' + '\n'; hidden_video_div += ' <source src="' +video+ '" type="video/' +video_type+ '">' + '\n'; hidden_video_div += ' Your browser does not support HTML5 video.' + '\n'; hidden_video_div += ' </video>' + '\n'; hidden_video_div += '</div>' + '\n'; } $('#{{ container_id }}').before( hidden_video_div ); {% endif %} //var content = '<ul id="{{ gallery_id }}" class="row {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n'; var content = '<ul id="{{ gallery_id }}" class="{{bs_gallery_class}} row {{ css_classes }} bs-gallery-gutter list-unstyled">' + '\n'; for ( var i in data["{{item.gallery.id}}"] ) { {% if gallery_type == "video-html5" %} var video_id = data["{{item.gallery.id}}"][i].video_id; {% endif %} {% if gallery_type == "video-online" %} var video = data["{{item.gallery.id}}"][i].video; {% endif %} var poster = data["{{item.gallery.id}}"][i].image_path + '/' + data["{{item.gallery.id}}"][i].poster; var caption = data["{{item.gallery.id}}"][i].captions_lightbox; //content += ' <li class="col-xs-6 col-sm-4 col-md-{{column_width_md}}" ' + '\n'; content += ' <li class="lightgallery"' + '\n'; content += ' data-sub-html="' +caption+ '" ' + '\n'; content += ' data-poster="' +poster+ '" ' + '\n'; {% if gallery_type == "video-html5" %} content += ' data-html="#' +video_id+ '">' + '\n'; {% endif %} {% if gallery_type == "video-online" %} content += ' data-src="' +video+ '">' + '\n'; {% endif %} {% if thumb_bordered %} content += ' <a href="#" class="lg-thumbnail-{{container_id}}">' + '\n'; {% else %} content += ' <a href="#" class="lg-thumbnail lg-thumbnail-{{container_id}}">' + '\n'; {% endif %} content += ' <img class="img-gallery" src="' +poster+ '">' + '\n'; content += ' <img class="img-overlay" src="' +play_button+ '">' + '\n'; content += ' </a>' + '\n'; content += ' </li>' + '\n'; } content += '</ul>'; {% endif %} // Place HTML markup $("#{{ container_id }}").html(content); // Initialize|Run the gallery using individual gallery options $("#{{ gallery_id }}").lightGallery({ {% for option in item.gallery.options %} {{ option[0] | json }}: {{ option[1] | json }}, {% endfor %} }); //Run bsGallery (delayed: {{ show_delay }} ms) setTimeout(function() { // Hide HTML markup while bsGallery is rendering //$("#{{ gallery_id }}").hide(); $('ul.{{bs_gallery_class}}').bsGallery({ "classes" : "col-md-{{column_width_md}}", "hasModal" : false }); //$("#{{ gallery_id }}").show(); }, {{ show_delay }}); // Initialize instance variable of lightGallery (for later access) j1["{{gallery_id}}"] = $('#{{ gallery_id }}').data('lightGallery'); {% if environment == 'development' %} logText = 'LightGallery on ID #{{ container_id }} initializing completed'; logger.info(logText); state = 'completed'; logger.info('state: ' + state); // Set|Log status {% endif %} }); } //end gallery {% endif %} {% comment %} end if enabled {% endcomment %} {% endfor %} return true; }, // END lgInit // ------------------------------------------------------------------------- // returns the current (processing) state of the module // ------------------------------------------------------------------------- state: function () { return state; } // END state }; // end return
})(j1, window);
{% endcapture %} {{ cache | strip_empty_lines }}