[SCRIPT] HTML Image Preview

[TheQwerty]

Use HTML to Preview Images.

Previews the selected images if there are 2 or more items selected, otherwise it will preview images listed in the active tab. You can also select images from the the preview.

The window size, colors, image types, and maximum number of images can all be modified. These values are kept for the current session or forever if you have enabled Remember permanent variables (Refresh, Icons, History - Scripting).

To preview images just run the script:

Code: Select all

Load 'HTMLImagePreview.xys', 'showPreview', 'f';

To see a menu of actions that can be taken on the images selected in the preview window run:

Code: Select all

Load 'HTMLImagePreview.xys',, 'f';

To change some options for displaying previews load the script using:

Code: Select all

Load 'HTMLImagePreview.xys', '*', 'f';

*In all cases it is assumed the script file is placed in your <xyscripts> directory - if you put it elsewhere make sure to adjust the paths.

Change Log

• v2.2 - 2015-05-18 13:14z

  • HTMLImagePreview.xys

    v2.2 - 2015-05-18 13:14z

    (27.63 KiB) Downloaded 456 times

  • Adds ability to rotate previewed images.
  • Adds ability to re-order images via drag'n'drop.
  • Increases number of images which can be returned by preview.
  • Fixes escaping of amperands within image path.
• v2.1 - 2015-03-31 17:50z
  • Adds global for specifying items which will be filtered before display.
  dls: 0 (never released)
• v2.0 - 2015-03-31 15:00z

  • HTMLImagePreview.xys

    v2.0 - 2015-03-31 15:00z

    (24.25 KiB) Downloaded 285 times

  • Adds global for overriding filter configuration.
  • Separates showing preview from the action taken on selected images.
  • Adds scripts for various actions.
  • Changes default action to showing a menu. To get the old behavior use the select script:

    Code: Select all

    Load 'HTMLImagePreview', 'select', 'f';

  • Changes menu order and access keys.
  dls: 20
• v1.3 - 2015-03-30 18:00z
  • Fixes problems with escaping quotes and ampersands.
  • Fixes titlebox being too small.
  • Adds global for calling scripts to specify images.
  • Adds option to show current configuration.
  • Adds better commenting/style.
  dls: 4
• v1.2 - 2015-03-26 17:17z
  • Fixes window size option.
  dls: 17
• v1.1 - 2015-03-26 14:50z
  • Added user options.
  dls: 4
• v1.0 - 2015-03-25 19:00z
  • First release.

----
This script was my take on an alternative solution for a request to preview animated GIFs.

Code: Select all

/*#############################################################################\
HTMLImagePreview.xys

Creates an HTML page for previewing and selecting images.

[ABOUT]
Author    = TheQwerty
Version   = 2.2
Date      = 2015-05-18 13:14z
Requires  = XYplorer v15.00.0000
Source    = https://github.com/XYplorer-Scripts/HTMLImagePreview

[]
\#############################################################################*/


/*******************************************************************************
** Preview Images
**   Displays a preview for the specified, selected, or listed images.
*******************************************************************************/
"&Preview Images||1 : showPreview"
  // ----- PARAMETERS ----------------------------------------------------------
  // IN: G_ITEMS [optional]
  //   A CRLF-separated list of items to filter and preview.
  //   If omitted and more than 2 items are selected, the selection is used.
  //   Otherwise the list contents will be shown.
  Global $G_ITEMS;

  // IN: G_IMAGES [optional]
  //   A CRLF-separated list of images to preview.
  //   If omitted and more than 2 items are selected, the selection is used.
  //   Otherwise the list contents will be shown.
  //   Note that setting this variable bypasses any filtering including those
  //   specified by G_FILTERS_OVERRIDE and this takes precedence over G_ITEMS.
  Global $G_IMAGES;

  // IN: G_FILTERS_OVERRIDE [optional]
  //   A CRLF, semicolon (;), or pipe (|) separated list of filters to use
  //   instead of the configured ones.
  //   If omitted the configured filters or generic {:Image} file type are used.
  Global $G_FILTERS_OVERRIDE;

  // OUT: G_RESULTS
  //   A |-separated list of  images the user selected in the preview.
  Global $G_RESULTS = '';
  // ----- END PARAMETERS ------------------------------------------------------

  // Get options.
  Sub '_getOptions';
  Global $G_FILTERS, $G_PREVIEW_SIZE, $G_COLORS, $G_IMAGE_LIMIT;

  $sep = <crlf>;

  $source = '';

  // Get images.
  if ($G_IMAGES != '') {
    // Use global image list.
    $source = ' specified';
    $images = ReplaceList($G_IMAGES, "| <crlf>", $sep, ' ');
    $images = FormatList($images, 'det', $sep);
  } else {
    if ($G_ITEMS != '') {
      // Use specified items.
      $source = ' specified';
      $items = ReplaceList($G_ITEMS, "| <crlf>", $sep, ' ');
      $items = FormatList($items, 'det', $sep);
    } elseif (Get('CountSelected') > 1) {
      // Use current selection.
      $source = ' selected';
      $items = Get('SelectedItemsPathNames', $sep);
    } else {
      // Use list contents.
      $source = ' listed';
      $items = ListPane('a', '*', 1, $sep);
    }

    // Determine which filters to use.
    if ($G_FILTERS_OVERRIDE == '') {
      $filters = $G_FILTERS;
    } else {
      $filters = ReplaceList($G_FILTERS_OVERRIDE, '; |', <crlf>, ' ');
    }

    // Stored filters are CRLF-separated, convert to local $sep.
    if ($sep != <crlf>) {
      $filters = Replace($filters, <crlf>, $sep);
    }

    // Filter the list of items to just the images.
    $images = FormatList($items, 'deft', $sep, $filters);
  }

  // End if there's nothing to see...
  $imageCnt = GetToken($images, 'Count', $sep);
  End $imageCnt < 1, 'No images to display.';

  // Cap the number of images - otherwise building the HTML freezes XY.
  if ($imageCnt > $G_IMAGE_LIMIT) {
    $images = GetToken($images, $G_IMAGE_LIMIT, $sep,, 1);
    $limitDiv = <<<LIMITMSG
<div id='warning'>Sorry, display has been limited to the first $G_IMAGE_LIMIT$source images (of $imageCnt).</div>
LIMITMSG;
  } else {
    $s = $imageCnt == 1 ? '' : 's';
    $limitDiv = <<<LIMITMSG
<div>$imageCnt$source image$s.</div>
LIMITMSG;
  }

  // Build up the div blocks for each image.
  $imageDivs = '';
  $idx = 0;
  foreach ($image, $images, $sep) {
    $idx++;

    if ($image == '') { continue; }
    // Get & escape file name.
    $title = ReplaceList(GetPathComponent($image, 'file'), '&', '&', '|');

    $imageDivs = <<<IMAGEDIV
$imageDivs
        <div class='box'>
          <span class='handle'>&nbsp;</span>
          <input class='cb' type='checkbox' name="$idx" id="$idx">
            <label class='boxInner' for="$idx">
              <img src="$image" />
              <div class='titleBox'>$title</div>
            </label>
          </input>
        </div>
IMAGEDIV;
  }

  // Split up the color options.
  $bodyBGColor  = GetToken($G_COLORS, 1, '|', 't');
  $thumbBGColor = GetToken($G_COLORS, 2, '|', 't');
  $selColor     = GetToken($G_COLORS, 3, '|', 't');

  // Build up the HTML document.
  $html = <<<HTMLDOCUMENT
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='x-ua-compatible' content='IE=edge'></meta>

    <!-- Enable responsive view on mobile devices -->
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />

    <link href='https://cdn.rawgit.com/bevacqua/dragula/master/dist/dragula.min.css' rel='stylesheet' type='text/css' />


    <style type='text/css'>
      body {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 250px;
        background: $bodyBGColor;
      }
      .wrap {
        padding-top:5px;
        overflow: hidden;
        margin: 10px;
      }
      input.cb {
        position:relative;
        z-index:1;
      }
      input.cb:checked ~ label {
        background: $selColor;
      }
      input.cb:checked ~ label img {
        opacity: 0.50;
      }
      .handle {
        cursor:move;
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);
        background-repeat: no-repeat;
        width:10px;
        height:30px;
        padding-top:5px;
        padding-right:3px;
      }
      #warning {
        padding:10px;
        background: #FAA;
        font-color: #A00;
      }
      form {
        position:relative;
      }
      .buttons {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        height:32px;
        padding: 8px;
        background: $bodyBGColor;
        z-index:2;
      }
      .buttons .left {
        float:left;
      }
      .buttons .right {
        float:right;
      }
      #submit {
        margin-left:20px;
      }
      .box {
        float: left;
        position: relative;
        width: 20%;
        padding-bottom: 200%;
      }
      .boxInner {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        overflow: hidden;
        <!-- new -->
        vertical-align:middle;
        text-align:center;
        background: $thumbBGColor;
      }
      .boxInner img {
        max-width: 100%;
        max-height: 100%;
      }
      .rotateCW {
        -ms-transform: rotate(90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        transform: rotate(90deg);
      }
      .rotateCCW {
        -ms-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        transform: rotate(-90deg);
      }
      .rotateFlip {
        -ms-transform: rotate(180deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
        transform: rotate(180deg);
      }
      .boxInner .titleBox {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-bottom: -100px;
        background: #000;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        padding: 2px;
        text-align: center;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
      }
      body.no-touch .boxInner:hover .titleBox,
      body.touch .boxInner.touchFocus .titleBox {
        margin-bottom: 0;
      }
      @media only screen and (max-width : 480px) {
        /* Smartphone view: 1 tile */
        .box {
          width: 100%;
          padding-bottom: 60%;
        }
      }
      @media only screen and (max-width : 650px) and (min-width : 481px) {
        /* Tablet view: 2 tiles */
        .box {
          width: 50%;
          padding-bottom: 30%;
        }
      }
      @media only screen and (max-width : 1050px) and (min-width : 651px) {
        /* Small desktop / ipad view: 3 tiles */
        .box {
          width: 33.3%;
          padding-bottom: 20%;
        }
      }
      @media only screen and (max-width : 1290px) and (min-width : 1051px) {
        /* Medium desktop: 4 tiles */
        .box {
          width: 25%;
          padding-bottom: 15%;
        }
      }
      @media only screen and (min-width : 1291px) {
        .box {
          width: 20%;
          padding-bottom: 12%;
        }
      }
    </style>
  </head>
  <script>
    function check(v) {
      var a = document.getElementsByTagName('input');
      for(var i=0,j=a.length;i<j;i++){
        if (a[i].type == 'checkbox' && a[i].className == 'cb'){
          a[i].checked = v;
        }
      }
    }

    function invert() {
      var a = document.getElementsByTagName('input');
      for(var i=0,j=a.length;i<j;i++){
        if (a[i].type == 'checkbox' && a[i].className == 'cb'){
          a[i].checked = !a[i].checked;
        }
      }
    }

    function checkAll() { check(true); }
    function checkNone() { check(false); }

    function rotate(newClass) {
      var cb = document.getElementById('rotateSelection');
      if (cb.checked) {
        var a = document.getElementsByTagName('input');
        for(var i=0,j=a.length;i<j;i++){
          if (a[i].type == 'checkbox' && a[i].className == 'cb' && a[i].checked){
            var ai = a[i].parentElement.getElementsByTagName('img');
            if (ai.length > 0) {
              ai[0].className = newClass;
            }
          }
        }
      } else {
        var imgs = document.getElementsByTagName('img');
        for(var i=0,j=imgs.length;i<j;i++){
          imgs[i].className = newClass;
        }
      }
    }
  </script>
  <body class='no-touch'>
    $limitDiv
    <form action='xys:' method='get'>
      <div class='wrap container' id='container'>
        $imageDivs
      </div>
      <div class='buttons'>
        <span class="left">
          <input type='button' value='Normal' onclick='rotate("");' />
          <input type='button' value='90&deg;' onclick='rotate("rotateCW");' />
          <input type='button' value='180&deg;' onclick='rotate("rotateFlip");' />
          <input type='button' value='270&deg;' onclick='rotate("rotateCCW");' />
          <input type='checkbox' id='rotateSelection' /><label for='rotateSelection'>Selection Only</label>
        </span>
        <span class="right">
          <input type='button' value='All' onclick='checkAll();' />
          <input type='button' value='None' onclick='checkNone();' />
          <input type='button' value='Invert' onclick='invert();' />
          <input type='submit' value='OK' id='submit' />
        </span>
      </div>
    </form>
    <script src='https://cdn.rawgit.com/bevacqua/dragula/master/dist/dragula.min.js'></script>
    <script>
      if (dragula) {
        dragula([container], {
          moves: function (el, container, handle) {
            return handle.className === 'handle';
          }
        });
      }

      // Focus submit button.
      document.getElementById('submit').focus();

      // Make clicking images toggle their checkbox.
      var a = document.getElementsByTagName('label');
      for(var i=0,j=a.length;i<j;i++){
        var b = a[i].getElementsByTagName('img');
        for(var k=0,l=b.length;k<l;k++){
          b[k].forid = a[i].htmlFor;
          b[k].onclick = function(){
            var e = document.getElementById(this.forid);
            e.checked = !e.checked;
          }
        }
      }
    </script>
  </body>
</html>
HTMLDOCUMENT;

  // Determine window size.
  $width  = GetToken($G_PREVIEW_SIZE, 1, 'x', 't');
  $height = GetToken($G_PREVIEW_SIZE, 2, 'x', 't');
  $caption = 'Select Images';

  // The crap we do to get some decent rendering from WebBrowser :rolls:
  // To get it to obey the x-ua-compatible the content must be saved to a file.
  $htmlFile = "%tmp%\XYImages-<date yyyymmddhhnnss>.html";
  if (WriteFile($htmlFile, $html, 'o') % 2 == 1) {
    $result = html($htmlFile, $width, $height, $caption);
    delete 1, 0, $htmlFile;
  } else {
    $result = html($html, $width, $height, $caption);
  }

  // Select selected images.
  $result = UrlDecode($result);
  $result = RegexReplace($result, '\?|=on&?', '|');
  $result = FormatList($result, 'det', '|');

  // Convert selected indexes into paths.
  $results = '';
  foreach ($idx, $result, '|') {
    $item = GetToken($images, $idx, $sep);
    if ($item != '') {
      $results = $results . $item . '|';
    }
  }
  $G_RESULTS = FormatList($results, 'det', '|');
/************************************************************ END showPreview */


"-" //--------------------------------------------------------------------------


/*******************************************************************************
** Preview & Filter Images
**   Shows the preview then filters the selected images.
*******************************************************************************/
"Preview && &Filter Images : filter"
  Sub 'showPreview';
  Global $G_RESULTS;

  if ($G_RESULTS != '') {
    $vf = '';
    foreach ($item, $G_RESULTS, '|') {
      if ($item == '') { continue; }

      $vf = $vf . '|' . Quote(GetPathComponent($item, 'File'));
      Filter SubStr($vf, 1), 1;
    }
  }
/***************************************************************** END filter */


/*******************************************************************************
** Preview & Paper Folder Images
**   Shows the preview then creates a paper folder for the selected images.
*******************************************************************************/
"Preview && P&aper Folder Images : paperFolder"
  Sub 'showPreview';
  Global $G_RESULTS;

  if ($G_RESULTS != '') {
    if (0 == Exists(<xypaper>)) {
      New(<xypaper>, 'dir',, 'u');
    }
    $pf = InputFile(<xypaper>, 'txt', 'Save to Paper Folder');
    PaperFolder($pf, $G_RESULTS, '|', 'nl');
  }
/************************************************************ END paperFolder */


/*******************************************************************************
** Preivew & Preview & Preview Images
**   Shows the preview then shows the preview again for the selected images.
**   All the way down.
*******************************************************************************/
"Preview && Pr&eview && Preview Images : narrow"
  Sub 'showPreview';
  Global $G_RESULTS;

  while ($G_RESULTS != '') {
    Global $G_IMAGES = $G_RESULTS;
    Sub 'showPreview';
  }
/***************************************************************** END narrow */


/*******************************************************************************
** Preview & Select Images
**   Shows the preview then selects the selected images.
*******************************************************************************/
"Preview && &Select Images : select"
  Sub 'showPreview';
  Global $G_RESULTS;

  if ($G_RESULTS != '') {
    SelectItems $G_RESULTS, 2, 1, 'n', 'a';
    $cnt = Get('CountSelected');
    Status 'Selected ' . $cnt . ' item' . (($cnt == 1) ? '' : 's') . '.',, 'ready';
  }
/***************************************************************** END select */


/*******************************************************************************
** Preview & Spot Images
**   Shows the preview then spots the selected images.
*******************************************************************************/
"Preview && Sp&ot Images : spot"
  Sub 'showPreview';
  Global $G_RESULTS;

  if ($G_RESULTS != '') {
    $vf = '';
    foreach ($item, $G_RESULTS, '|') {
      if ($item == '') { continue; }

      $vf = $vf . '|' . GetPathComponent($item, 'File');
      goto '>>' . $vf;
    }
  }
/***************************************************************** END filter */

/*******************************************************************************
** Preview & Zip Images
**   Shows the preview then creates a Zip archive of the selected images.
*******************************************************************************/
"Preview && &Zip Images : archive"
  Sub 'showPreview';
  Global $G_RESULTS;

  if ($G_RESULTS != '') {
    $zip = InputFile(<curpath>, 'zip', 'Save to Zip Archive');
    $zip = Zip_Add($zip, $G_RESULTS, '|');
    goto $zip;
  }
/**************************************************************** END archive */


"- : _-" //---------------------------------------------------------------------
"- : _-" //---------------------------------------------------------------------


/*******************************************************************************
** Display Current Settings
**   Shows the current script configuration settings.
*******************************************************************************/
"&Display Current Settings : _showOptions"
  // Get Defaults
  Sub '_getDefaults';
  Global $G_FILTERS, $G_PREVIEW_SIZE, $G_COLORS, $G_COLOR_TITLES, $G_IMAGE_LIMIT;
  $dFilters = $G_FILTERS;
  $dWidth = GetToken($G_PREVIEW_SIZE, 1, 'x', 't');
  $dHeight = GetToken($G_PREVIEW_SIZE, 2, 'x', 't');
  $dColors = $G_COLORS;
  $dLimit = $G_IMAGE_LIMIT;

  // Get Current
  Sub '_getOptions';

  $defaultMarker = "<tab>[DEFAULT]";

  // Split window size.
  $width = GetToken($G_PREVIEW_SIZE, 1, 'x', 't');
  $dWidth = $width == $dWidth ? $defaultMarker : '';

  $height = GetToken($G_PREVIEW_SIZE, 2, 'x', 't');
  $dHeight = $height == $dHeight ? $defaultMarker : '';

  // Split colors.
  $colors = '';
  $i = 1;
  $c = GetToken($G_COLORS, 'Count', '|');
  while ($i <= $c) {
    $title = GetToken($G_COLOR_TITLES, $i, '|', 't');
    $color = GetToken($G_COLORS, $i, '|', 't');

    // Add color
    if ($colors != '') {
      $colors = $colors . <crlf>;
    }
    $colors = $colors . $title . ' Color: ' . $color;

    // Add default marker.
    $dColor = GetToken($dColors, $i, '|', 't');
    if ($color == $dColor) {
      $colors = $colors . $defaultMarker;
    }

    $i++;
  }

  // Limit
  $dLimit = $G_IMAGE_LIMIT == $dLimit ? $defaultMarker : '';

  // Filters
  $dFilters = $G_FILTERS == $dFilters ? $defaultMarker : '';

  Text <<<TEXT
Current HTML Image Preview Settings

Window Width: $width$dWidth
Window Height: $height$dHeight

$colors

Image Limit: $G_IMAGE_LIMIT$dLimit

Filters: $dFilters
$G_FILTERS
TEXT;
/*********************************************************** END _showOptions */


"- : _-" //---------------------------------------------------------------------


/*******************************************************************************
** Adjust Colors
**   Allows user to configure the colors used in the preview.
*******************************************************************************/
"Adjust &Colors : _adjustColors"
  // Get default value.
  Sub '_getDefaults';
  Global $G_COLORS;
  Global $G_COLOR_TITLES;

  // Get current value.
  if  (   IsSet($P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS)
        && '' != $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS
      )
  {
    $colors = $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS;
  } else {
    $colors = $G_COLORS;
  }

  $sep = '|';

  $newColors = '';

  // For each color...
  $i = 1;
  $c = GetToken($G_COLORS, 'Count', $sep);
  while ($i <= $c) {
    // Get this color's info.
    $title   = GetToken($G_COLOR_TITLES, $i, $sep, 't');
    $default = GetToken($G_COLORS      , $i, $sep, 't');
    $current = GetToken($colors        , $i, $sep, 't');

    // Prompt user.
    $res = Input($i . ': ' . $title . ' Color', "Default value is $default.", $current, 's');

    // Validate
    $res = Trim($res, " <tab>");
    if ($res == '') {
      $res = $default;
    }

    // Build up option string.
    if ($newColors != '') {
      $newColors = $newColors . $sep;
    }
    $newColors = $newColors . $res;

    $i++;
  }

  // Clean up value.
  $newColors = Recase($newColors, 'Upper');

  // Update stored value.
  if ($newColors == '' || $newColors == $G_COLORS) {
    unset $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS;
    Status 'Set colors to default: ' . $G_COLORS,, 'ready';
  } else {
    perm $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS = $newColors;
    Status 'Set colors to: ' . $newColors,, 'ready';
  }
/********************************************************** END _adjustColors */


/*******************************************************************************
** Adjust Filters
**   Allows user to configure the list of filters used for determining what
**   files are images and should be displayed.
**
**   Generally, this should be set to all images that the system can display
**   within Internet Explorer.
*******************************************************************************/
"Adjust F&ilters : _adjustFilters"
  // Get default value.
  Sub '_getDefaults';
  Global $G_FILTERS;

  // Get curent value.
  if  (   IsSet($P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS)
        && '' != $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS
      )
  {
    $filters = $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS;
  } else {
    $filters = $G_FILTERS;
  }

  // Prompt user.
  $filters = Input('Images Filters', 'One filter per line. Delete all to use defaults.', $filters, 'm');

  // Clean up filters.
  $filters = FormatList($filters, 'dents', <crlf>);
  $default = FormatList($G_FILTERS, 'dents', <crlf>);

  // Update stored value.
  if ($filters == '' || $filters == $default) {
    unset $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS;
    Status 'Set image filters to defaults.',, 'ready';
  } else {
    perm $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS = $filters;
    Status 'Set image filters.',, 'ready';
  }
/********************************************************* END _adjustFilters */


/*******************************************************************************
** Adjust Maximum Image Count
**   Allows user to configure the cap on the maximum number of images which
**   will be shown.
*******************************************************************************/
"Adjust &Maximum Image Count : _adjustCap"
  // Get default value.
  Sub '_getDefaults';
  Global $G_IMAGE_LIMIT;

  // Get current value.
  if  (   IsSet($P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT)
        && '' != $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT
      )
  {
    $limit = $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT;
  } else {
    $limit = $G_IMAGE_LIMIT;
  }

  // Prompt user.
  $limit = Input('Maximum Number of Images to Preview', "Default value is $G_IMAGE_LIMIT.", $limit, 's');

  // Validate
  $limit = RegexReplace($limit, '[^0-9]');

  // Update stored value.
  if ($limit == '' || $limit == $G_IMAGE_LIMIT || $limit < 1) {
    unset $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT;
    Status 'Set image limit to default: ' . $G_IMAGE_LIMIT,, 'ready';
  } else {
    perm $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT = $limit;
    Status 'Set image limit to: ' . $limit,, 'ready';
  }
/************************************************************* END _adjustCap */


/*******************************************************************************
** Adjust Window Size
**   Allows user to configure the size of the preview window.
*******************************************************************************/
"Adjust &Window Size : _adjustSize"
  // Get default value.
  Sub '_getDefaults';
  Global $G_PREVIEW_SIZE;

  // Get current value.
  if  (   IsSet($P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE)
        && '' != $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE
      )
  {
    $size = $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE;
  } else {
    $size = $G_PREVIEW_SIZE;
  }

  // Prompt user.
  $size = Input('Preview Window Size', <<<MSG
Width x Height of Preview Window in pixels.
Percentages of screen are also supported.
Default value is $G_PREVIEW_SIZE.
MSG
  , $size, 's');

  // Validate.
  $size = RegexReplace($size, '[^0-9x%]');

  // Update stored value.
  if ($size == '' || $size == $G_PREVIEW_SIZE || $size UnLikeI '*x*') {
    unset $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE;
    Status 'Set preview window size to default: ' . $G_PREVIEW_SIZE,, 'ready';
  } else {
    perm $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE = $size;
    Status 'Set preview window size to: ' . $size,, 'ready';
  }
/************************************************************ END _adjustSize */


"- : _-" //---------------------------------------------------------------------


/*******************************************************************************
** Reset All to Defaults
**   Resets all configuration options to their defaults.
*******************************************************************************/
"&Reset All to Defaults : _resetToDefaults"
  unset $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS;
  unset $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS;
  unset $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE;
  unset $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT;
  Status 'Set all options to their defaults.',, 'ready';
/******************************************************* END _resetToDefaults */


"_-" //-------------------------------------------------------------------------
"_-" //-------------------------------------------------------------------------


/*******************************************************************************
** _getDefaults
**   Retrieves the default configuration options.
*******************************************************************************/
"_getDefaults"
  Global $G_FILTERS = Get('GenericFileType', '{:Image}', <crlf>);
  Global $G_PREVIEW_SIZE = '50%x50%';
  Global $G_COLORS = '#EEE|#DDD|#AAF';
  Global $G_COLOR_TITLES = 'Window Background|Thumb Background|Selected Image(s)';
  Global $G_IMAGE_LIMIT = 512;
/*********************************************************** END _getDefaults */


/*******************************************************************************
** _getOptions
**   Retrieves the current configuration options.
*******************************************************************************/
"_getOptions"
  // Get defaults.
  Sub '_getDefaults';

  // Image Filters
  if  (   IsSet($P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS)
        && '' != $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS
      )
  {
    Global $G_FILTERS = $P_THEQWERTY_HTML_IMAGE_PREVIEW__FILTERS;
  }

  // Preview Window Size
  if  (   IsSet($P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE)
        && '' != $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE
      )
  {
    Global $G_PREVIEW_SIZE = $P_THQWERTY_HTML_IMAGE_PREVIEW__PREVIEW_SIZE;
  }

  // Colors
  if  (   IsSet($P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS)
        && '' != $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS
      )
  {
    Global $G_COLORS = $P_THEQWERTY_HTML_IMAGE_PREVIEW__COLORS;
  }

  // Image Limit
  if  (   IsSet($P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT)
        && '' != $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT
      )
  {
    Global $G_IMAGE_LIMIT = $P_THEQWERTY_HTML_IMAGE_PREVIEW__IMAGE_LIMIT;
  }
/************************************************************ END _getOptions */

[/size]

[klownboy]

Hi TheQwerty, when running the script (version 1.1) to make adjustments, the perm variable for image file types is being saved properly (perm), but the window size is not. Tried it a couple of times and stepped through it once. I don't have much time now, but it appears after the input box the values are changed back to 50% x 50%. It looks like you are using "$size = $width . 'x' . $height;". Should it be, "$size = $newWidth . 'x' . $newHeight;" ...just a quick guess.
Thanks,
Ken

[TheQwerty]

I actually uploaded the wrong copy on that one.

Should it be, "$size = $newWidth . 'x' . $newHeight;" ...just a quick guess.

No, I changed it when I got lazy and made those dialogs tell you to input the default size to get the default size (rather than input -1 for the default size).

I forgot to change the variables that received the user's inputs (removing the new) and then I stupidly tested it by entering values into those dialogs which I already had in my PV - not realizing I wasn't actually changing the values from what it was showing me.

v1.2 should be better - I hope.

[klownboy]

V1.2 works great! Very nice, thanks TheQwerty. I was wondering though, could you have used an inputselect check box for the filter selections? It might have made it easier to select or unselect those you want or don't want.

Another thought, I can't help but think this script would be even better if the user could quickly select the image type in a drop down box or something similar directly from the main preview screen, but I don't know whether that would be even possible. For example, the OP wanted this strickly for GIFs. On another occasion you might want it for JPGs only, but you'd want to be able to make the selection quickly from the main preview screen and not from the separate subsidiary menu.
Thanks again,
Ken

[TheQwerty]

I was wondering though, could you have used an inputselect check box for the filter selections? It might have made it easier to select or unselect those you want or don't want.

Sure but...
1) Something would have to be done to make it possible to add to the list.
2) It requires more thought on how to store the filters and populate the dialog. Do you store the input to the inputselect with in-use filters checked? Do you store two lists (in-use, not)? Do you only store those in-use then have get the others before showing inputselect (and handle pre-selection)?

Frankly, all of the configuration options would be much better handled in HTML (like I did with CodePreview), but I don't think it is worth the effort nor does it hold my interest.

I can't help but think this script would be even better if the user could quickly select the image type in a drop down box or something similar directly from the main preview screen, but I don't know whether that would be even possible. For example, the OP wanted this strickly for GIFs. On another occasion you might want it for JPGs only, but you'd want to be able to make the selection quickly from the main preview screen and not from the separate subsidiary menu.

It could be done, but it complicates things. There's so many tools which focus solely on previewing images, while doing a good job at it, and I have no desire to re-invent the wheel. Also, let's be realistic here, XY already does a fantastic job of previewing images so what does this script really bring to the table that is worthwhile? Hint, not much.


It doesn't make sense to change the filter frequently in my opinion.
Make the filter as broad as you can - I suggest all image types which can be displayed in Internet Explorer.
Then you use the fact that the script prefers selections to the list contents (and Type Stats & Filters! ) to easily change what you're previewing if you want GIFs today and JPGs tomorrow.

[klownboy]

Do you only store those in-use then have get the others before showing inputselect (and handle pre-selection)?

You are storing what the user had previously selected already in the perm variable so I suppose you'd have to compare that with the full image list {:Image} to arrive at the pre-selects or pre-checks. I can't see storing both lists in a perm. I did something similar in that vertical toolbar script (i.e., look at the all the CTBs and XY built-ins and compare it to ones the user had selected, or in this case the ones being used on the toolbar, to arrive at the pre-checks. Maybe it's not worth doing in this case since it's not something the user would be doing frequently.

I agree on not reinventing the wheel. Your script is very cool though for dynamic viewing all the GIFs in a folder at once which can't be done via XY. It was for that reason I was thinking of a quick selectable list of filters (e.g to change from GIF to JPG quickly) though I suppose one could do some hacking and have/use 2 different variables.
Thanks again.

[Stef123]

I like it. Useful to pre-scan and compare a selected subset - based on telltale names and size (nav gifs in web-projects) - from different folders, that's the catch, and it works nicely on branch view and paper folders , also keeps the sort order

The color setting is a bit weird, it keeps suggesting different default values - all of which I confirm until at some point it no longer comes up.

OT, does anyone know of a PORTABLE solution to compare 2 pics side by side, at adjustable zoom levels? FastStone has a nice compare feature but you cannot feed your files into it directly, no command line option, you always have to take the detour via their browser.

[admin]

It's wonderful! I'm tempted to add it as a feature...

A little issue: This filename is not processed correctly (probably the apostrophe -- no time to check):

Code: Select all

Ponti,_Carlo_(ca._1823-1893)_-_Porteuse_d'eau_-_n._151_-_Venice.jpg

[klownboy]

Don mentioned an issue with filenames displayed. I also noted that for any filename with a space in it, the space is replaced with %26nbsp;.

I know this goes beyond what the OP 's requested in that he wanted only to be able to preview and select, but would it be possible to incorporate and use the "open link" from the context menu possibly as the default action when the image is double clicked. It's currently grayed out so I'm not sure if that's even possible. On a normal web html page when an image is double clicked the image opens full size in the page.

Very impressive work, thanks again,
Ken

[TheQwerty]

A little issue: This filename is not processed correctly (probably the apostrophe -- no time to check):

Code: Select all

Ponti,_Carlo_(ca._1823-1893)_-_Porteuse_d'eau_-_n._151_-_Venice.jpg

You mean it doesn't get selected properly or it doesn't get displayed in the preview correctly?

If it's the latter then it's probably because I got carried away urlencoding the title.
Either way I'll look into it on Monday.

[Stef123]

If you don't mind, would you also check into the color setting? It does accept entries like #222 in the end, but only after asking me repeatedly, each time with different suggestions what I have to enter as default.
Thanks.

[bdeshi]

A little issue: This filename is not processed correctly (probably the apostrophe -- no time to check):

Code: Select all

Ponti,_Carlo_(ca._1823-1893)_-_Porteuse_d'eau_-_n._151_-_Venice.jpg

You mean it doesn't get selected properly or it doesn't get displayed in the preview correctly?

If it's the latter then it's probably because I got carried away urlencoding the title.
Either way I'll look into it on Monday.

The second, and it's because $image is in single-quotes within $imageDivs' img src.
There's another problem though: the slideup title is always in urlencoded form. Fixing this makes the title forget wrapping into multiple lines.

edit: well, the title never wraps (just tested using a long filename). Wrapping was a sideeffect of urlencoded titles.

here's a possible fix:

Code: Select all

  // Build up the div blocks for each image.
  $imageDivs = '';
  foreach ($image, $images, $sep) {
    if ($image == '') { continue; }
    $title = Replace(GetPathComponent($image, 'file'), ' ', ' ');
    $name = $image;

    $imageDivs = <<<IMAGEDIV
$imageDivs
      <div class='box'>
        <input class='cb' type="checkbox" name="$name" id="$name">
          <label class='boxInner' for="$name">
            <img src="$image" />
            <div class='titleBox'>$title</div>
          </label>
      </input>
      </div>
IMAGEDIV;
  }

[klownboy]

Thanks Sammay, your fix on the filename display also corrected the spaces in filename that I mentioned above. By the way, Irfanview wouldn't even open "Ponti,_Carlo_(ca._1823-1893)_-_Porteuse_d'eau_-_n._151_-_Venice.jpg" image until I removed the apostrophe and comma, but your fix worked on it.

[TheQwerty]

New release in the first post...
Change Log

• v1.3 - 2015-03-30 18:00z
  • Fixes problems with escaping quotes and ampersands.
  • Fixes titlebox being too small.
  • Adds global for calling scripts to specify images.
  • Adds option to show current configuration.
  • Adds better commenting/style.

------------------

Sammay was right about the single quotes, but it also needed to better handle ampersand. (Thanks!)

would it be possible to incorporate and use the "open link" from the context menu possibly as the default action when the image is double clicked.

Not possible.

would you also check into the color setting?

It's asking for three different colors - body background, thumb background, and selection color. The text of the dialog changes to reflect which one it is asking for, and each one has a different default.

[Stef123]

Now the color input suddenly makes sense, and I feel stupid inside out. I don't know why I keep stumbling over dialog hurdles so often. Guess they're just too different from the usual Windows stuff where captions sit right next to their checkboxes, not above and especially not in the title even further above. I am just not used to eyeball those areas, they never carry important info other than static peripherals.

Anyway, now that I know about it, no problem.
Thanks.