layout: raw
title: GALLERY Previewer tagline: Manage Justified Gallery your Way description: Justified Gallery Previewer
tags: [ Customizer, Justified Gallery ] index: [] categories: [ pages, manuals ]
permalink: /pages/protected/previewer/justified_gallery/ regenerate: false
toc: false resources: [ light_gallery, justified_gallery ] resource_options:
- masthead: opacity: 0.5 slides: - url: /assets/images/gallery/justified_gallery/16961685188_f130144d60_b.jpg alt: justified_gallery
{% comment %} Main ——————————————————————————– {% endcomment %}
<!– [INFO ] [j1.gallery_customizer ] [Placement of BMD Drawer] –> <div class=“row”>
<!-- div class="bmd-layout-container bmd-drawer-f-l app-drawer" --> <div class="nav bmd-layout-container bmd-drawer-f-l"> <header class="bmd-layout-header"> <div class="navbar navbar-dark bg-primary raised-z2 mb-2"> <button class="bmd-drawer drawer-toggler animated fadeIn" type="button" data-toggle="drawer" data-target="#drw_customizer"> <span class="sr-only">Toggle drawer</span> <!-- i class="material-icons">menu</i --> <span class="mdi mdi-menu mdi-48px"></span> </button> <ul class="nav navbar-nav"> <!-- li class="nav-item">Customize Your Gallery</li --> <li class="nav-item"> <a class="nav-link" href="#">Preview Your Gallery</a> </li> </ul> </div> </header> <div id="drw_customizer" class="bmd-layout-drawer bg-faded"> <header> <a class="navbar-brand">Gallery Customizer</a> </header> <form id="jg-customizer-form" class="form-horizontal"> <div class="mdc-list-group"> <div class="col-md-12"> <div class="form-group"> <label class="bmd-label-floating" for="rowHeight">Row Height [px]</label> <input id="rowHeight" name="rowHeight" class="form-control" type="text" value="120"> <!-- div class="input-group-addon">[px]</div --> <span class="bmd-help">Preferred row height (min: 40px)</span> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="bmd-label-floating" for="rowHeightMax">Row Height Max [px]</label> <input id="rowHeightMax" name="rowHeightMax" class="form-control" type="text" value="-1"> <span class="bmd-help">Maximum row height</span> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="bmd-label-floating" for="margins">Thumb Spacing [px]</label> <input id="margins" name="margins" class="form-control" type="text" value="1"> <span class="bmd-help">Space between the images</span> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="bmd-label-floating" for="border">Gallery Padding [px]</label> <input id="border" name="border" class="form-control" type="text" value="0"> <span class="bmd-help">Border size around the gallery</span> </div> </div> <!-- div class="col-md-12"> <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">group</i> </span> <input type="text" class="form-control" placeholder="With Material Icons"> </div> </div --> <div class="ml-3 mt-4 mb-5"> <div class="switch"> <label> <input id="captions" name="captions" type="checkbox" checked> Enable Captions </label> </div> <div class="switch"> <label> <input id="random" name="random" type="checkbox"> Random Order </label> </div> <div class="switch"> <label> <input id="justify_last_row" name="justify_last_row" type="checkbox"> Justify Last Row </label> </div> <div class="switch"> <label> <input id="hide_last_row" name="hide_last_row" type="checkbox"> Hide Last Row </label> </div> </div> </div> <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12"> <!--button type="button" name="jgs-create-yaml" class="btn btn btn-success btn-raised btn-round">Create YAML data</button --> <button type="button" name="reset-defaults" class="btn btn btn-danger btn-raised btn-round">Gallery Reset</button> </div> </form> </div> <div class="bmd-layout-content"> <div class="container" style="padding-right: 0px; padding-left: 0px;"> <!-- main content --> <div id="jg_customizer" class="bla"></div> </div> </div> </div>
</div>
<!– [INFO ] [j1.gallery_customizer ] [Placement of JS Components )] –> <script>
$(function() { var environment = "{{site.environment}}"; var formId = '#jg-customizer-form'; var galleryId = '#jg_customizer'; var galleryContainerId = '#jg_customizer_div'; var $instance; var logger = log4javascript.getLogger("gallery_customizer"); var logText = ''; var kbdDelay = 750; var imageHeightMin = 40; if ( $( formId ).length ) { var timerid; $("input[name='rowHeight']").on('input', function (e) { e.stopPropagation(); var value = $(this).val(); $instance = j1.jg_customizer_div.$el; if (value < imageHeightMin) { return false; } if($(this).data("lastval") != value){ $(this).data("lastval", value); clearTimeout(timerid); //change action timerid = setTimeout(function() { $instance.justifiedGallery({rowHeight: value}); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed rowHeight to: " +value; logger.info( logText ); } }, kbdDelay); }; return false; }); $("input[name='rowHeightMax']").on('input', function (e) { //e.preventDefault(); var value = $(this).val(); $instance = j1.jg_customizer_div.$el; if($(this).data("lastval") != value){ $(this).data("lastval", value); clearTimeout(timerid); //change action timerid = setTimeout(function() { $instance.justifiedGallery({maxRowHeight: value}); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed maxRowHeight to: " +value; logger.info( logText ); } }, kbdDelay); }; //return false; }); $("input[name='margins']").on('input', function (e) { //e.preventDefault(); var value = $(this).val(); $instance = j1.jg_customizer_div.$el; if($(this).data("lastval") != value){ $(this).data("lastval", value); clearTimeout(timerid); //change action timerid = setTimeout(function() { $instance.justifiedGallery({margins: value}); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed margins to: " +value; logger.info( logText ); } }, kbdDelay); }; //return false; }); $("input[name='border']").on('input', function (e) { //e.preventDefault(); var value = $(this).val(); $instance = j1.jg_customizer_div.$el; if($(this).data("lastval") != value){ $(this).data("lastval", value); clearTimeout(timerid); //change action timerid = setTimeout(function() { $instance.justifiedGallery({border: value}); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed padding to: " +value; logger.info( logText ); } }, kbdDelay); }; //return false; }); $('input:checkbox[name="captions"]').on('click', function (e) { $instance = j1.jg_customizer_div.$el; value = $('input:checkbox[name="captions"]').is(":checked"); $instance.justifiedGallery({captions: value}); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed captions to: " +value; logger.info( logText ); } }); $('input:checkbox[name="random"]').on('click', function (e) { $instance = j1.jg_customizer_div.$el; value = $('input:checkbox[name="random"]').is(":checked"); $instance.justifiedGallery({randomize: value}); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed randomize to: " +value; logger.info( logText ); } }); $('input:checkbox[name="justify_last_row"]').on('click', function (e) { $instance = j1.jg_customizer_div.$el; value = $('input:checkbox[name="justify_last_row"]').is(":checked"); if ( value == true ) { value = 'justify'; $instance.justifiedGallery({lastRow: value}); } else { value = 'nojustify'; $instance.justifiedGallery({lastRow: value}); } if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed lastRow to: " +value; logger.info( logText ); } }); $('input:checkbox[name="hide_last_row"]').on('click', function (e) { $instance = j1.jg_customizer_div.$el; value = $('input:checkbox[name="hide_last_row"]').is(":checked"); if ( value == true ) { value = 'hide'; $instance.justifiedGallery({lastRow: value}); } else { value = 'nojustify'; $instance.justifiedGallery({lastRow: value}); } if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " changed lastRow to: " +value; logger.info( logText ); } }); $('#jg-customizer-form button[name="reset-defaults"]').on('click', function (e) { $instance = j1.jg_customizer_div.$el; $('#rowHeight').val("120"); $('#rowHeightMax').val("-1"); $('#margins').val("1"); $('#border').val("0"); $('input:checkbox[name="captions"]').val("on").filter('[value="on"]').prop('checked', true); $('input:checkbox[name="random"]').val("off").filter('[value="off"]').prop('checked', false); $('input:checkbox[name="animate"]').val("on").filter('[value="on"]').prop('checked', true); $('input:checkbox[name="justify_last_row"]').val("on").filter('[value="on"]').prop('checked', false); $('input:checkbox[name="hide_last_row"]').val("off").filter('[value="off"]').prop('checked', false); $instance.justifiedGallery({ rowHeight: 120, maxRowHeight: false, thumbnailPath: "", lastRow: "nojustify", margins: 1, border: 0, waitThumbnailsLoad: true, randomize: false, filter: false, sort: false, selector: "a, div:not(.spinner)", extension: "/\.[^.\\/]+$/", refreshTime: 200, refreshSensitivity: 0, rel: "", target: "", justifyThreshold: 0.90, cssAnimation: true, imagesAnimationDuration: 500, captions: true, captionSettings: { animationDuration: 500, visibleOpacity: 0.7, nonVisibleOpacity: 0.0 } }); if( environment == "development" ) { logText = "Gallery on ID " +galleryId+ " reset to default values"; logger.info( logText ); } }); } }); // See: https://jsfiddle.net/prathviraj080/vbbbw46a/1/ $('button.drawer-toggler').click(function(){ $('button.drawer-toggler span.mdi').toggleClass('mdi-menu mdi-close'); }); $('button.drawer-toggler').click(function(){ $('button.drawer-toggler').toggleClass('fadeIn rotateIn'); });
</script>