Commit e51bd9e5 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files

prepared for publishing

parent 691dd142

assets/js/jquery.sravnitel.js

+53 −9
Original line number Original line Diff line number Diff line
@@ -27,23 +27,38 @@ 




(function ( $ ) {

(function ( $ ) {

  

  

  // http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices

  // init_touch();

  

  // https://gist.github.com/leolux/c794fc63d9c362013448

  // https://gist.github.com/leolux/c794fc63d9c362013448

  var SRAVNITEL = function(element,options){

  var SRAVNITEL = function(element,options){

    var elem = $(element);

    var elem = $(element);

    var obj = this;

    var obj = this;

    

    

    var settings = $.extend({

    var defaults = {

      // urls, comma separated

      images:[],

      images:[],

      // image titles in the same order as url

      titles:[],

      titles:[],

      // show or hide titles

      showtitles: false,

      showtitles: false,

      // view window width

      width:300,

      width:300,

      // view window height

      height:200,

      height:200,

      // init, left image - is the index of the images array, starting from 0

      index_l: 0,

      index_l: 0,

      // init, right image - is the index of the images array, starting from 0

      index_r: 1,

      index_r: 1,

      // init, zoom==0 - fit image, zoom==1.0 - 100%

      zoom: 0,

      zoom: 0,

      // init, x coordinate of the original image to be placed in the center of the view window

      center_x: 0,

      center_x: 0,

      // init, y coordinate of the original image to be placed in the center of the view window

      center_y: 0

      center_y: 0

    },options);

    };

    

    var settings = $.extend(defaults,options);

    

    

    var images = [];

    var images = [];
@@ -109,9 +124,9 @@ 
      

      

      tmp_table.append(

      tmp_table.append(

        $("<tr>").append(

        $("<tr>").append(

          $("<th>",{title:"left image"}).html("left")

          $("<th>",{title:"left image"}).html("left&nbsp;")

        ).append(

        ).append(

          $("<th>",{title:"right image"}).html("right")

          $("<th>",{title:"right image"}).html("right&nbsp;")

        ).append(

        ).append(

          $("<th>",{title:"left image"}).css({"text-align":"left","padding-left":"10px"}).html("title")

          $("<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);

        //console.log(i_top+" "+i_left+" : "+i_width);

        

        

        //disable initial zoom

        settings.zoom = 0;

        

        set_zoom(i_top,i_left,i_width);

        set_zoom(i_top,i_left,i_width);

      }

      }
@@ -358,7 +376,7 @@ 
    }

    }

    

    

    function reset_selection(){

    function reset_selection(){

      console.log("reset selection");

      //console.log("reset selection");

      $(".titles tr td").css({

      $(".titles tr td").css({

        background:"white"

        background:"white"

      });

      });
@@ -367,7 +385,7 @@ 
    function set_selection(index){

    function set_selection(index){

      reset_selection();

      reset_selection();

      var rows = $(".titles tr");

      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({

      $(rows[parseInt(index)+1]).find("td").css({

        background:"rgba(200,200,200,0.5)"

        background:"rgba(200,200,200,0.5)"

      });

      });
@@ -524,3 +542,29 @@ 
  };

  };

  

  

}(jQuery));

}(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

+16 −0
Original line number Original line Diff line number Diff line
@@ -30,6 +30,22 @@ function sravnitel_init(){ 
  

  

    // override default attributes with user attributes

    // 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(

    $defaults = Array(

      'id' => 0,

      'id' => 0,

      'images' => '',

      'images' => '',

readme.txt

0 → 100644
+115 −0
Original line number Original line Diff line number Diff line 
 

=== 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 &lt;div&gt; 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 &lt;div&gt; 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.

screenshot-1.png

0 → 100644
+235 KiB
Loading image diff...

screenshot-2.png

0 → 100644
+11.5 KiB
Loading image diff...