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>