prepared for publishing

assets/js/jquery.sravnitel.js

@@ -27,23 +27,38 @@
 
 (function ( $ ) {
   
-  //https://gist.github.com/leolux/c794fc63d9c362013448
+  // http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices
+  // init_touch();
+  
+  // https://gist.github.com/leolux/c794fc63d9c362013448
   var SRAVNITEL = function(element,options){
     var elem = $(element);
     var obj = this;
     
-    var settings = $.extend({
+    var defaults = {
+      // urls, comma separated
       images:[],
+      // image titles in the same order as url
       titles:[],
+      // show or hide titles
       showtitles: false,
+      // view window width
       width:300,
+      // view window height
       height:200,
+      // init, left image - is the index of the images array, starting from 0
       index_l: 0,
+      // init, right image - is the index of the images array, starting from 0
       index_r: 1,
+      // init, zoom==0 - fit image, zoom==1.0 - 100%
       zoom: 0,
+      // init, x coordinate of the original image to be placed in the center of the view window
       center_x: 0,
+      // init, y coordinate of the original image to be placed in the center of the view window
       center_y: 0
-    },options);
+    };
+    
+    var settings = $.extend(defaults,options);
     
     var images = [];
     
@@ -109,9 +124,9 @@
       
       tmp_table.append(
         $("<tr>").append(
-          $("<th>",{title:"left image"}).html("left")
+          $("<th>",{title:"left image"}).html("left&nbsp;")
         ).append(
-          $("<th>",{title:"right image"}).html("right")
+          $("<th>",{title:"right image"}).html("right&nbsp;")
         ).append(
           $("<th>",{title:"left image"}).css({"text-align":"left","padding-left":"10px"}).html("title")
         )
@@ -274,6 +289,9 @@
         
         //console.log(i_top+" "+i_left+" : "+i_width);
         
+        //disable initial zoom
+        settings.zoom = 0;
+        
         set_zoom(i_top,i_left,i_width);
       }
       
@@ -358,7 +376,7 @@
     }
     
     function reset_selection(){
-      console.log("reset selection");
+      //console.log("reset selection");
       $(".titles tr td").css({
         background:"white"
       });
@@ -367,7 +385,7 @@
     function set_selection(index){
       reset_selection();
       var rows = $(".titles tr");
-      console.log("index is "+index+" length is "+rows.length);
+      //console.log("index is "+index+" length is "+rows.length);
       $(rows[parseInt(index)+1]).find("td").css({
         background:"rgba(200,200,200,0.5)"
       });
@@ -413,7 +431,7 @@
     }
         
     function zoom(elem,x,y,dy){
-      
+            
       old_pos = $(elem).position();
       old_x = x-old_pos.left;
       old_y = y-old_pos.top;
@@ -448,7 +466,7 @@
     }
   
     function set_zoom(top,left,width){
-      
+            
       $(".display_window").each(function(){
         var tmp_elem = $(this).find(".zoomable");
         tmp_elem.css({
@@ -524,3 +542,29 @@
   };
   
 }(jQuery));
+
+function touchHandler(event) {
+  var touch = event.changedTouches[0];
+
+  var simulatedEvent = document.createEvent("MouseEvent");
+    simulatedEvent.initMouseEvent({
+    touchstart: "mousedown",
+    touchmove: "mousemove",
+    touchend: "mouseup"
+  }[event.type], true, true, window, 1,
+    touch.screenX, touch.screenY,
+    touch.clientX, touch.clientY, false,
+    false, false, false, 0, null
+  );
+
+  touch.target.dispatchEvent(simulatedEvent);
+  event.preventDefault();
+  
+}
+
+function init_touch(element) {
+  document.addEventListener("touchstart", touchHandler, true);
+  document.addEventListener("touchmove", touchHandler, true);
+  document.addEventListener("touchend", touchHandler, true);
+  document.addEventListener("touchcancel", touchHandler, true);
+}

inc/shortcode.php

@@ -30,6 +30,22 @@ function sravnitel_init(){
   
     // override default attributes with user attributes
     
+    /**
+     * @param array $defaults
+     *   field        type   default required description
+     *   ---------------------------------------------------------------------------------------------------------------------------
+     *   'id'         int    0       no       wrapper <div> element id 
+     *   'images'     str    ''      yes      list of images ids (attachment_id), comma separated
+     *   'showtitles' bool   false   no       show/hide titles
+     *   'width'      int    530     no       view window width px
+     *   'height'     int    300     no       view window height px
+     *   'index_l'    int    0       no       init, left image - is the index of the images array, starting from 0
+     *   'index_r'    int    1       no       init, right image - is the index of the images array, starting from 0
+     *   'zoom'       float  0       no       init, zoom, 0 - fit to view window, 1.0 - 100%
+     *   'center_x'   int    0       no       init, x coordinate of the original image to be placed in the center of the view window 
+     *   'center_y'   int    0       no       init, y coordinate of the original image to be placed in the center of the view window
+     */
+     
     $defaults = Array(
       'id' => 0,
       'images' => '',

readme.txt

+ 
+=== Plugin Name ===
+Contributors: okdzhimiev
+Donate link: -
+Tags: images, posts, plugin, page, before after slider, visual composer, slider, shortcode, zoom, pan, drag
+Requires at least: 4.5.5
+Tested up to: 4.7.1
+Stable tag: 1.0
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+Before-After overlayed image comparison plugin with: slider, zoom, 2+ images.
+
+== Description ==
+
+Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin *jquery.sravnitel.js*.
+
+**Features**
+
+* Compare 2+ images 
+* Zoom and pan
+* Initial zoom and offset
+
+**Notes**
+
+* No mobile support - touch/pinch
+
+**Quick examples**
+
+* Fit image into the view window, w/o titles:
+  `[sravnitel images="ID0,ID1,ID2" width=640 height=480]`
+* Fit image into the view window,  with titles:
+  `[sravnitel images="ID0,ID1,ID2" width=640 height=480 showtitles=true]`
+* Also fit image, with titles: 
+  `[sravnitel images="ID0,ID1,ID2" width=640 height=480 showtitles=true zoom=0]`
+* Zoom 30%, with titles, x=0 and y=0 in the center of the view window: 
+  `[sravnitel images='ID0,ID1,ID2' width=640 height=480 showtitles=true zoom=0.3 center_x=0 center_y=0]`
+
+**Shortcode Parameters**
+
+| Parameter    | Type  | Default | Required? | Description
+| :----------- | :---: | :-----: | :-------: | :----
+| `id`         | int   |  0      | -         | wrapper's <div> element id 
+| `images`     | str   |         | yes       | list of images ids (attachment_id), comma separated
+| `showtitles` | bool  |  false  | -         | show/hide titles
+| `width`      | int   |  530    | -         | view window width px
+| `height`     | int   |  300    | -         | view window height px
+| `index_l`    | int   |  0      | -         | init, left image - is the index of the images array, starting from 0
+| `index_r`    | int   |  1      | -         | init, right image - is the index of the images array, starting from 0
+| `zoom`       | float |  0      | -         | init, zoom, 0 - fit to view window, 1.0 - 100%
+| `center_x`   | int   |  0      | -         | init, x coordinate of the original image to be placed in the center of the view window 
+| `center_y`   | int   |  0      | -         | init, y coordinate of the original image to be placed in the center of the view window
+
+== Installation ==
+
+1. Upload the plugin files to the `/wp-content/plugins/sravnitel` directory, or install the plugin through the WordPress plugins screen directly.
+2. Activate the plugin through the 'Plugins' screen in WordPress.
+
+== Frequently Asked Questions ==
+
+= A question that someone might have =
+
+An answer to that question.
+
+= How is it implemented? =
+
+Same as Twenty20 plugin - stacks two selected images on top of each other. As the slider moves the compared images are displayed on the opposite sides of the divider.
+
+Image titles are taken from description or title (if description is empty) of the attached image.
+
+= How to find the ID of the attached image? =
+
+It's an integer number. Insert an image into a post and look for "wp-image-NN". Or find the permalink of the attachment. Type in NNs into the plugin's shortcode.
+
+= Examples =
+
+* Fit image into the view window, w/o titles:
+  `[sravnitel images="ID0,ID1,ID2" width=640 height=480]`
+* Fit image into the view window,  with titles:
+  `[sravnitel images="ID0,ID1,ID2" width=640 height=480 showtitles=true]`
+* Also fit image, with titles: 
+  `[sravnitel images="ID0,ID1,ID2" width=640 height=480 showtitles=true zoom=0]`
+* Zoom 30%, with titles, x=0 and y=0 in the center of the view window: 
+  `[sravnitel images='ID0,ID1,ID2' width=640 height=480 showtitles=true zoom=0.3 center_x=0 center_y=0]`
+
+= Shortcode Parameters =
+
+| Parameter    | Type  | Default | Required? | Description
+| :----------- | :---: | :-----: | :-------: | :----
+| `id`         | int   |  0      | -         | wrapper's <div> element id 
+| `images`     | str   |         | yes       | list of images ids (attachment_id), comma separated
+| `showtitles` | bool  |  false  | -         | show/hide titles
+| `width`      | int   |  530    | -         | view window width px
+| `height`     | int   |  300    | -         | view window height px
+| `index_l`    | int   |  0      | -         | init, left image - is the index of the images array, starting from 0
+| `index_r`    | int   |  1      | -         | init, right image - is the index of the images array, starting from 0
+| `zoom`       | float |  0      | -         | init, zoom, 0 - fit to view window, 1.0 - 100%
+| `center_x`   | int   |  0      | -         | init, x coordinate of the original image to be placed in the center of the view window 
+| `center_y`   | int   |  0      | -         | init, y coordinate of the original image to be placed in the center of the view window
+  
+== Screenshots ==
+
+1. Working plugin
+1. Shortcode
+1. Description field in the attachment details
+
+== Changelog ==
+
+= 1.0 =
+* Initial release.
+
+== Upgrade Notice ==
+
+= 1.0 =
+* Initial release.