Commit 023a56f2 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files

1. divider position 2. titles bottom margin 3. drag-event lag 4. images scaled differently

parent 4e045e69

assets/js/jquery.sravnitel.js

+81 −56
Original line number Diff line number Diff line 
/** 

 * @file jquery.sravnitel.js

 * @version 1.1

 * @version 1.3

 * @brief jquery plugin for comparing multiple images

 * @copyright Copyright (C) 2017 Elphel Inc.

 * @author Oleg Dzhimiev <oleg@elphel.com>
@@ -34,6 +34,8 @@ 
  // https://gist.github.com/leolux/c794fc63d9c362013448

  var SRAVNITEL = function(element,options){

    var elem = $(element);

    var elemID = elem.attr("id");

    

    var obj = this;

    

    var defaults = {
@@ -63,6 +65,14 @@ 
    

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

    

    var tmp = settings.showtitles;

    

    if (typeof tmp == 'string' || tmp instanceof String){

      if ((tmp.toLowerCase()=="false")||(settings.showtitles=="0")){

        settings.showtitles = false;

      }

    }

    

    var images = [];

    

    var tmpimg;
@@ -112,24 +122,18 @@ 
          

    elem.append(tmp_display_titles);

    

    if (settings.showtitles==false){

      //console.log("titles hidden");

      $(".titles").css({

        display:"none"

      });

    }

    

    var tmp_title;

    

    if (settings.images.length>0){

      

      var tmp_table = $("<table>").css({

      var tmp_table = $("<table>",{class:"titles"}).css({

        width: "100%",

        border: "1px solid rgba(200,200,200,0.5)",

        margin: "0px 0px 0px 0px",

        "text-align": "center"

      });

      

      $("#display_titles").append(tmp_table);

      elem.find("#display_titles").append(tmp_table);

      

      tmp_table.append(

        $("<tr>").append(
@@ -174,9 +178,9 @@ 
            var tmp_index = $(this).attr("index");

            var tmp_side = $(this).attr("side");

            //console.log(settings.images[tmp_index]);

            $(".selector_"+tmp_side).find("div").hide();

            elem.find(".selector_"+tmp_side).find("div").hide();

            $(this).find("div").show();

            $("#display_window_"+tmp_side+" .zoomable").attr("src",settings.images[tmp_index]).attr("index",tmp_index);

            elem.find("#display_window_"+tmp_side+" .zoomable").attr("src",settings.images[tmp_index]).attr("index",tmp_index);

            reset_selection();

          });
@@ -191,9 +195,14 @@ 
      

    }

    

    if (settings.showtitles==false){

      //console.log("titles hidden");

      elem.find(".titles").hide();

    }

    

    elem.css({

      width: settings.width+"px",

      height: (settings.height+$("#display_titles").height())+"px"

      height: (settings.height+elem.find("#display_titles").height())+"px"

    });

    

    for(var i=0;i<settings.images.length;i++){
@@ -219,22 +228,24 @@ 
      

      image_l = images[0];

      image_r = images[0].clone();

      $(".selector_0")[0].click();

      

      $(".selector_1")[0].click();

      //image_l.draggable();

      image_r.draggable();

      

      elem.find(".selector_0")[0].click();

      elem.find(".selector_1")[0].click();

      

    }else if(images.length>=2){

      image_l = images[settings.index_l];

      image_r = images[settings.index_r];

      $(".selector_0")[settings.index_l].click();

      $(".selector_1")[settings.index_r].click();

      elem.find(".selector_0")[settings.index_l].click();

      elem.find(".selector_1")[settings.index_r].click();

      image_r.css({

        left: -settings.width/2+"px"

      });

    }

        

    $(".display_window").each(function(){

    elem.find(".display_window").each(function(){

      

      var index = $(this).attr("index");
@@ -263,11 +274,13 @@ 
          place_divider(divider_line_width/2);

          tmp_index = 1;

        }else{

          place_divider(settings.width-divider_line_width-1);

          //shot left

          //place_divider(settings.width-divider_line_width-1);

          place_divider(settings.width-divider_line_width+1);

          tmp_index = 0;

        }

        

        var sindex = $("#display_window_"+tmp_index+" .zoomable").attr("index");

        var sindex = elem.find("#display_window_"+tmp_index+" .zoomable").attr("index");

        set_selection(sindex);

      });

    });
@@ -280,8 +293,8 @@ 
    

    zoom_info.on("click",function(){

      

      var z = settings.width/$("#display_window_0 .zoomable")[0].naturalWidth;

      var height = z*$("#display_window_0 .zoomable")[0].naturalHeight;

      var z = settings.width/elem.find("#display_window_0 .zoomable")[0].naturalWidth;

      var height = z*elem.find("#display_window_0 .zoomable")[0].naturalHeight;

      

      set_zoom(0,0,settings.width,height);

    });
@@ -295,8 +308,8 @@ 
      //set zoom here:

      if (settings.zoom!=0){

        

        i_width = settings.zoom*$("#display_window_0 .zoomable")[0].naturalWidth;

        i_height = settings.zoom*$("#display_window_0 .zoomable")[0].naturalHeight;

        i_width = settings.zoom*elem.find("#display_window_0 .zoomable")[0].naturalWidth;

        i_height = settings.zoom*elem.find("#display_window_0 .zoomable")[0].naturalHeight;

        i_left = -settings.zoom*settings.center_x+settings.width/2;

        i_top = -settings.zoom*settings.center_y+settings.height/2;
@@ -304,6 +317,9 @@ 
        settings.zoom = 0;

        

        set_zoom(i_top,i_left,i_width,i_height);

      }else{

        //initial images sync height syncing

        zoom_info.click();

      }

      

      update_zoom_info();
@@ -312,7 +328,7 @@ 
    init_divider();

    init_zoom();

        

    $(".display_window").each(function(){

    elem.find(".display_window").each(function(){

      

      this.addEventListener('touchstart',function(e){

        if (e.targetTouches.length>1){
@@ -334,7 +350,7 @@ 
            var x = touch_center[0]-$(this).offset().left+i*($(this).position().left);

            var y = touch_center[1]-$(this).offset().top;

            

            $("#display_window_0 .zoomable").each(function(){

            elem.find("#display_window_0 .zoomable").each(function(){

              zoom(this,x,y,dy);

            });
@@ -352,18 +368,18 @@ 
    });

        

    $(window).resize(function(){

      $("#sravnitel_divider").draggable({

      elem.find("#sravnitel_divider").draggable({

        containment:update_divider_containment()

      });

    });

    

    // moved from css

    // taken from http://jsfiddle.net/josedvq/Jyjjx/45/

    $(".round-button").css({

    elem.find(".round-button").css({

      width: "25%"

    });

    

    $(".round-button-circle").css({

    elem.find(".round-button-circle").css({

      "border-radius":"2px",

      border: "1px solid rgba(0,0,0,0.5)",

      overflow: "hidden",
@@ -371,7 +387,7 @@ 
      "box-shadow": "0 0 3px rgba(0,0,0,0.5)"

    });

    

    $(".round-button-circle").hover(function(){

    elem.find(".round-button-circle").hover(function(){

      $(this).css({

        background:"rgba(50,50,50,1)"

      });
@@ -384,7 +400,7 @@ 
    //end-of-program

        

    function place_divider(x){

      $("#sravnitel_divider").css({

      elem.find("#sravnitel_divider").css({

        left: (x-divider_line_width/2)+"px"

      });

      update_display_windows();
@@ -404,7 +420,8 @@ 
          background:"rgba(0,0,0,0.5)",

          border: "1px solid gray",

          width:divider_line_width+"px",

          height:(settings.height-2)+"px",

          height:(settings.height)+"px",

//           height:(settings.height-2)+"px",

          cursor:"ew-resize"

      });

      divider.append(tmp_divider_line);
@@ -438,7 +455,7 @@ 
            

      var tmp_containment = update_divider_containment();

      

      $("#sravnitel_divider").draggable({

      elem.find("#sravnitel_divider").draggable({

        axis:"x",

        //containment:"parent",

        containment:tmp_containment,
@@ -447,11 +464,16 @@ 
        },

        drag:function(){

          $(this).off("mouseout");

          //immediate call

          update_display_windows();

          //delayed call

          setTimeout(function(){

            update_display_windows();

          },10);

        },

        stop:function(){

          $(this).on("mouseout",function(){

            $(".divider").css({

            elem.find(".divider").css({

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

            });

          });
@@ -461,7 +483,7 @@ 
    }

    

    function reset_selection(){

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

      elem.find(".titles tr td").css({

        background:"white"

      });

    }
@@ -469,22 +491,23 @@ 
    function set_selection(index){

      reset_selection();

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

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

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

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

      });

    }

    

    function update_divider_containment(){

      x1 = $("#sravnitel_divider").parent().position().left;

      y1 = $("#sravnitel_divider").parent().position().top;

      x2 = x1+$("#sravnitel_divider").parent().width()-divider_line_width-2;

      x1 = elem.find("#sravnitel_divider").parent().offset().left;

      y1 = elem.find("#sravnitel_divider").parent().offset().top;

      //x2 = x1+elem.find("#sravnitel_divider").parent().width()-divider_line_width-2;

      x2 = x1+elem.find("#sravnitel_divider").parent().width()-divider_line_width;

      y2 = y1+settings.height;

      return [x1,y1,x2,y2];

    }

    

    function init_zoom(){

      

      $(".display_window").on("mousewheel wheel",function(e){

      elem.find(".display_window").on("mousewheel wheel",function(e){



        // dm = e.originalEvent.deltaMode;
@@ -496,7 +519,7 @@ 
        var y = e.originalEvent.pageY-$(this).offset().top;

        

        // need only left to set initial zoom

        $("#display_window_0 .zoomable").each(function(){

        elem.find("#display_window_0 .zoomable").each(function(){

          zoom(this,x,y,dy);

        });
@@ -544,7 +567,7 @@ 
  

    function set_zoom(top,left,width,height){

       

      $(".display_window").each(function(){

      elem.find(".display_window").each(function(){

        var tmp_elem = $(this).find(".zoomable");

        tmp_elem.css({

          top: Math.round(top)+"px",
@@ -554,7 +577,6 @@ 
        });

      });

      update_zoom_info();

      

    }

  

    function update_zoom_info(){
@@ -569,32 +591,35 @@ 
        cursor: "pointer",

      }).html(z);

      

      $("#zoom_info").html(el);

      elem.find("#zoom_info").html(el);

      

    }



    function get_zoom(){

      return $("#display_window_0 .zoomable").width()/$("#display_window_0 .zoomable")[0].naturalWidth;

      return elem.find("#display_window_0 .zoomable").width()/elem.find("#display_window_0 .zoomable")[0].naturalWidth;

    }

  

    function update_display_windows(){

      $("#display_window_0").css({

        width: $("#sravnitel_divider").position().left+"px"

      

      var tmp_left = elem.find("#sravnitel_divider").position().left;

      

      elem.find("#display_window_0").css({

        width: tmp_left+"px"

      });

      

      oldleft = $("#display_window_1").position().left;

      newleft = $("#sravnitel_divider").position().left;

      oldleft = elem.find("#display_window_1").position().left;

      newleft = tmp_left;

      

      deltaleft = newleft - oldleft;

      

      $("#display_window_1").css("left", "+="+deltaleft);

      $("#display_window_1").css("width","-="+deltaleft);

      $("#display_window_1 .zoomable").css("left", "-="+deltaleft);

      elem.find("#display_window_1").css("left", "+="+deltaleft);

      elem.find("#display_window_1").css("width","-="+deltaleft);

      elem.find("#display_window_1 .zoomable").css("left", "-="+deltaleft);

    }

  

    function sync_images(dx,dy){

      //dx,dy;      

      $(".display_window").each(function(){

      elem.find(".display_window").each(function(){

        var tmp_elem = $(this).find(".zoomable");

        tmp_elem.css("left","+="+dx);

        tmp_elem.css("top","+="+dy);
@@ -621,7 +646,7 @@ 
      elem.append(tgl_btn);

      

      tgl_btn_content.on("click",function(){

        $("#display_window_"+toggle_state+" .zoomable").click();

        elem.find("#display_window_"+toggle_state+" .zoomable").click();

        toggle_state = (toggle_state+1)&0x1;

      });

    }

inc/shortcode.php

+3 −4
Original line number Diff line number Diff line
@@ -94,20 +94,19 @@ function sravnitel_init(){ 
    if (!$sravnitel_atts['showtitles']){

      $showtitles_str = "false";

    }else{

      $showtitles_str = "true";

      $showtitles_str = strtolower($sravnitel_atts['showtitles']);

    }

    

    if (!$sravnitel_atts['showtoggle']){

      $showtoggle_str = "false";

    }else{

      $showtoggle_str = "true";

      $showtoggle_str = strtolower($sravnitel_atts['showtoggle']);

    }    

    

    $content = "<b>$titles_str</b>";

    

    $content = <<<TXT

<!-- https://wordpress.org/plugins/sravnitel/ -->

<div id="$id_str" style="position:relative;" class="sravnitel"></div>

<div><div id="$id_str" style="position:relative;" class="sravnitel"></div></div>

<script>

  jQuery(window).load(function(){

    jQuery("#$id_str").sravnitel({

readme.txt

+22 −4
Original line number Diff line number Diff line 
 

=== Plugin Name ===

Contributors: okdzhimiev

Tags: images, posts, plugin, page, before after slider, visual composer, slider, shortcode, zoom, pan, drag, pinch to zoom

Tags: images, posts, plugin, page, before after slider, visual composer, slider, shortcode, zoom, pan, drag, pinch to zoom, compare images

Requires at least: 4.5.5

Tested up to: 4.7.1

Stable tag: 1.1

Tested up to: 4.7.2

Stable tag: 1.3

License: GPLv2 or later

License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -25,6 +25,7 @@ Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin *jquery. 


* Click on the view area to quickly switch between left and right image

* Click on the zoom info in the top right to zoom-to-fit the view area

* To place several instances of the plugin assign unique ids: [sravnitel id='test1' ...], [sravnitel id='test2' ...]



**Working demo**
@@ -75,7 +76,7 @@ It's an integer number. Insert an image into a post and look for "wp-image-NN". 
= Examples =



* Fit image into the view window, w/o titles:

`[sravnitel images="ID0,ID1,ID2" width=640 height=480]`

`[sravnitel id="test" images="ID0,ID1,ID2" width=640 height=480]`

* Fit image into the view window,  with titles and toggle button:

`[sravnitel images="ID0,ID1,ID2" width=640 height=480 showtitles=true showtoggle=true]`

* Also fit image, with titles:
@@ -105,6 +106,16 @@ It's an integer number. Insert an image into a post and look for "wp-image-NN". 


== Changelog ==



= 1.3 =

* Allow more than one instance on the page

* Set title table margin to 0px

* Fixed [... showtitles=false ...] showing titles

* Added delayed images place updating due to drag event lagging.



= 1.2 = 

* Fixed view size when titles are disabled (showtitles=false)

* Fixed divider containment area - offset() instead of position()



= 1.1 = 

* Fixed coordinates not rounding while dragging

* Added single touch events by enabling 'jquery-touch-punch' in enqueue.php
@@ -117,6 +128,13 @@ It's an integer number. Insert an image into a post and look for "wp-image-NN". 


== Upgrade Notice ==



= 1.3 =

* Allow more than one instance on a page, improved divider dragging



= 1.2 = 

* Fixed view size when titles are disabled (showtitles=false)

* Fixed divider containment area



= 1.1 =

* This version adds single (dragging) and multi (pinch to zoom) touch mobile support.

sravnitel.php

+2 −2
Original line number Diff line number Diff line 
<?php

/**

 * @package Sravnitel

 * @version 1.1

 * @version 1.3

 * @file sravnitel.php

 * @brief shortcodes

 * @copyright Copyright (C) 2017 Elphel Inc.
@@ -26,7 +26,7 @@ Plugin Name: Sravnitel 
Plugin URI: http://wordpress.org/plugins/sravnitel/

Description: Before-After overlayed image comparison plugin with: slider, zoom, 2+ images.

Author: Elphel Inc.

Version: 1.1

Version: 1.3

Author URI: http://www3.elphel.com

*/