Skip to content

S
sravnitel
Commit 52580603 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

1. single touch and pinch 2. handle 3. toggle button

parent 7b67c4b7
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 69 deletions
README.md
View file @ 52580603
......@@ -7,12 +7,12 @@ Before-After overlayed image comparison plugin for jQuery and WordPress.
* Compare 2+ images
* Zoom and pan
* Initial zoom and offset
* Touch events: click, drag, pinch to zoom
**Notes**
* 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
* No mobile support - touch/pinch
![sravnitel ui](https://github.com/Elphel/sravnitel/blob/master/screenshot-1.png)
......@@ -79,7 +79,7 @@ see **readme.txt**
"image 2",
"image 3",
"image 4"
],showtitles:true,width:800,height:600});
],showtitles:true,showtoggle:true,width:800,height:600});
}
### Parameters
......@@ -88,9 +88,10 @@ see **readme.txt**
| :----------- | :---: | :-----: | :-------: | :----
| `images` | array(str) | | yes | list of images urls
| `titles` | array(str) | | - | list of images titles
| `showtitles` | bool | false | - | show/hide titles
| `width` | int | 300 | - | view window width px
| `height` | int | 200 | - | view window height px
| `showtitles` | bool | false | - | show/hide titles
| `showtoggle` | bool | false | - | show/hide button - switch between left and right image
| `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%
......
assets/css/sravnitel.css
View file @ 52580603
......@@ -22,9 +22,9 @@
}
.sravnitel .divider_handle {
background-image: url('../images/handle_gray.png');
/* background-image: url('../images/handle_gray.png');*/
}
.sravnitel {
background:white;
}
}
\ No newline at end of file
assets/js/jquery.sravnitel.js
View file @ 52580603
/**
* @file jquery.sravnitel.js
* @version 1.1
* @brief jquery plugin for comparing multiple images
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
......@@ -46,6 +47,8 @@
width:300,
// view window height
height:200,
// shoe or hide toggle button
showtoggle: false,
// 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
......@@ -67,7 +70,13 @@
var divider_line_width = 2;
var divider_handle_size = 30;
var x0,y0;
var drag_sense_min_px = 10;
var pinch_sense_min_px = 10;
var x0=0;
var y0=0;
var toggle_state = 0;
var tmp_display_window;
//index: 0 - left, 1 - right
......@@ -224,7 +233,6 @@
left: -settings.width/2+"px"
});
}
$(".display_window").each(function(){
......@@ -240,8 +248,8 @@
y0 = e.pageY;
},
drag:function(e){
xc = e.pageX;
yc = e.pageY;
var xc = e.pageX;
var yc = e.pageY;
sync_images(xc-x0,yc-y0);
x0 = xc;
y0 = yc;
......@@ -280,7 +288,8 @@
elem.append(zoom_info);
if (settings.showtoggle) init_toggle_button();
$(images[0]).on("load",function(){
//place_names($(this).height());
//set zoom here:
......@@ -291,8 +300,6 @@
i_left = -settings.zoom*settings.center_x+settings.width/2;
i_top = -settings.zoom*settings.center_y+settings.height/2;
//console.log(i_top+" "+i_left+" : "+i_width);
//disable initial zoom
settings.zoom = 0;
......@@ -304,13 +311,76 @@
init_divider();
init_zoom();
$(".display_window").each(function(){
this.addEventListener('touchstart',function(e){
if (e.targetTouches.length>1){
touch_distance_0 = get_pinch_distance(e);
}
});
this.addEventListener('touchmove',function(e){
if (e.targetTouches.length>1){
touch_distance_c = get_pinch_distance(e);
var dy = touch_distance_0 - touch_distance_c;
if (Math.abs(dy)>pinch_sense_min_px){
var i = parseInt($(this).attr("index"));
var touch_center = get_pinch_center(e);
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(){
zoom(this,x,y,dy);
});
touch_distance_0 = touch_distance_c;
}
e.preventDefault();
e.stopPropagation();
return false;
}
});
});
$(window).resize(function(){
$("#sravnitel_divider").draggable({
containment:update_divider_containment()
});
});
// moved from css
// taken from http://jsfiddle.net/josedvq/Jyjjx/45/
$(".round-button").css({
width: "25%"
});
$(".round-button-circle").css({
"border-radius":"2px",
border: "1px solid rgba(0,0,0,0.5)",
overflow: "hidden",
background: "rgba(100,200,100,1)",
"box-shadow": "0 0 3px rgba(0,0,0,0.5)"
});
$(".round-button-circle").hover(function(){
$(this).css({
background:"rgba(50,50,50,1)"
});
},function(){
$(this).css({
background:"rgba(100,200,100,1)"
});
});
//end-of-program
function place_divider(x){
......@@ -345,11 +415,21 @@
"background-size": divider_handle_size+"px",
width: divider_handle_size+"px",
height: divider_handle_size+"px",
left: -(divider_handle_size/2-divider_line_width)+"px",
left: -(divider_handle_size/2-divider_line_width/2)+"px",
cursor:"ew-resize",
"text-align":"center"
});
display_divider_handle.addClass("round-button");
display_divider_handle.append($("<div>",{class:"round-button-circle"}).css({
width: (divider_handle_size+divider_line_width/2)+"px",
height: divider_handle_size+"px",
"line-height": divider_handle_size+"px",
}));
//html("<span style='color:white'>&#9666;&nbsp;&#9656;</span>")
divider.append(display_divider_handle);
elem.append(divider);
......@@ -377,10 +457,10 @@
});
}
});
}
function reset_selection(){
//console.log("reset selection");
$(".titles tr td").css({
background:"white"
});
......@@ -389,7 +469,6 @@
function set_selection(index){
reset_selection();
var rows = $(".titles tr");
//console.log("index is "+index+" length is "+rows.length);
$(rows[parseInt(index)+1]).find("td").css({
background:"rgba(200,200,200,0.5)"
});
......@@ -398,7 +477,6 @@
function update_divider_containment(){
x1 = $("#sravnitel_divider").parent().position().left;
y1 = $("#sravnitel_divider").parent().position().top;
//console.log($("#sravnitel_divider").parent());
x2 = x1+$("#sravnitel_divider").parent().width()-divider_line_width-2;
y2 = y1+settings.height;
return [x1,y1,x2,y2];
......@@ -406,20 +484,16 @@
function init_zoom(){
//console.log("init zoom");
$(".display_window").on("mousewheel wheel",function(e){
// dm = e.originalEvent.deltaMode;
var i = parseInt($(this).attr("index"));
dx = e.originalEvent.deltaX;
dy = e.originalEvent.deltaY;
x = e.originalEvent.pageX-$(this).offset().left+i*($(this).position().left);
y = e.originalEvent.pageY-$(this).offset().top;
// console.log("["+x+":"+y+"]: "+dx+" "+dy);
var dx = e.originalEvent.deltaX;
var dy = e.originalEvent.deltaY;
var x = e.originalEvent.pageX-$(this).offset().left+i*($(this).position().left);
var y = e.originalEvent.pageY-$(this).offset().top;
// need only left to set initial zoom
$("#display_window_0 .zoomable").each(function(){
......@@ -440,8 +514,6 @@
old_x = x-old_pos.left;
old_y = y-old_pos.top;
//console.log(x+" "+y+" "+old_x+" "+old_y);
old_width = $(elem).width();
old_height = $(elem).height();
......@@ -475,10 +547,10 @@
$(".display_window").each(function(){
var tmp_elem = $(this).find(".zoomable");
tmp_elem.css({
top: top+"px",
left: left-$(this).position().left+"px",
width: width+"px",
height: height+"px"
top: Math.round(top)+"px",
left: Math.round(left)-$(this).position().left+"px",
width: Math.round(width)+"px",
height: Math.round(height)+"px"
});
});
update_zoom_info();
......@@ -527,6 +599,31 @@
tmp_elem.css("left","+="+dx);
tmp_elem.css("top","+="+dy);
});
}
function init_toggle_button(){
var tgl_btn = $("<div>",{id:"toggle_button"}).css({
position: "absolute",
bottom: (2+$("#display_titles").height())+"px",
right: "2px"
});
var tgl_btn_content = $("<div>",{class:"round-button-circle",title:"Quickly switch between left and right image"}).css({
color:"white",
padding: "0px 3px",
"user-select": "none",
cursor: "pointer"
}).html("toggle");
tgl_btn.append(tgl_btn_content);
elem.append(tgl_btn);
tgl_btn_content.on("click",function(){
$("#display_window_"+toggle_state+" .zoomable").click();
toggle_state = (toggle_state+1)&0x1;
});
}
};
......@@ -549,28 +646,16 @@
}(jQuery));
function touchHandler_not_used(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 get_pinch_distance(e){
var touches = e.targetTouches;
var dx = touches[0].pageX-touches[1].pageX;
var dy = touches[0].pageY-touches[1].pageY;
return Math.sqrt(dx*dx+dy*dy);
}
function init_touch_not_used(element) {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
function get_pinch_center(e){
var touches = e.targetTouches;
var xc = (touches[0].pageX+touches[1].pageX)/2;
var yc = (touches[0].pageY+touches[1].pageY)/2;
return [xc,yc];
}
inc/enqueue.php
View file @ 52580603
......@@ -23,7 +23,7 @@
function sravnitel_enqueue_script($hook){
wp_enqueue_style( 'sravnitel-style', SRAVNITEL_URL.'/assets/css/sravnitel.css');
wp_enqueue_script( 'sravnitel', SRAVNITEL_URL.'/assets/js/jquery.sravnitel.js', array('jquery-ui-draggable'));
wp_enqueue_script( 'sravnitel', SRAVNITEL_URL.'/assets/js/jquery.sravnitel.js', array('jquery-ui-draggable','jquery-touch-punch'));
}
......
inc/shortcode.php
View file @ 52580603
......@@ -36,9 +36,10 @@ function sravnitel_init(){
* ---------------------------------------------------------------------------------------------------------------------------
* '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
* 'showtitles' bool false no show/hide titles
* 'showtoggle' bool false no show/hide button - switch between left and right image
* '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%
......@@ -49,9 +50,10 @@ function sravnitel_init(){
$defaults = Array(
'id' => 0,
'images' => '',
'showtitles' => false,
'width' => 530,
'height' => 300,
'showtitles' => false,
'showtoggle' => false,
'index_l' => 0,
'index_r' => 1,
'zoom' => 0,
......@@ -95,6 +97,12 @@ function sravnitel_init(){
$showtitles_str = "true";
}
if (!$sravnitel_atts['showtoggle']){
$showtoggle_str = "false";
}else{
$showtoggle_str = "true";
}
$content = "<b>$titles_str</b>";
$content = <<<TXT
......@@ -104,9 +112,10 @@ function sravnitel_init(){
jQuery("#$id_str").sravnitel({
images: $images_str,
titles: $titles_str,
showtitles: $showtitles_str,
width: {$sravnitel_atts['width']},
height: {$sravnitel_atts['height']},
showtitles: $showtitles_str,
showtoggle: $showtoggle_str,
index_l: {$sravnitel_atts['index_l']},
index_r: {$sravnitel_atts['index_r']},
zoom: {$sravnitel_atts['zoom']},
......
readme.txt
View file @ 52580603
......@@ -2,10 +2,10 @@
=== Plugin Name ===
Contributors: okdzhimiev
Donate link: -
Tags: images, posts, plugin, page, before after slider, visual composer, slider, shortcode, zoom, pan, drag
Tags: images, posts, plugin, page, before after slider, visual composer, slider, shortcode, zoom, pan, drag, pinch to zoom
Requires at least: 4.5.5
Tested up to: 4.7.1
Stable tag: 1.0
Stable tag: 1.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
......@@ -20,17 +20,19 @@ Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin *jquery.
* Compare 2+ images
* Zoom and pan
* Initial zoom and offset
* Touch events: click, drag, pinch to zoom
**Notes**
**Tips**
* No mobile support - touch/pinch
* 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
**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]`
* 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:
`[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:
......@@ -42,9 +44,10 @@ Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin *jquery.
| :----------- | :---: | :-----: | :-------: | :----
| `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
| `showtitles` | bool | false | - | show/hide titles
| `showtoggle` | bool | false | - | show/hide button - switch between left and right image
| `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%
......@@ -76,8 +79,8 @@ It's an integer number. Insert an image into a post and look for "wp-image-NN".
* 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]`
* 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:
`[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:
......@@ -89,9 +92,10 @@ It's an integer number. Insert an image into a post and look for "wp-image-NN".
| :----------- | :---: | :-----: | :-------: | :----
| `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
| `showtitles` | bool | false | - | show/hide titles
| `showtoggle` | bool | false | - | show/hide button - switch between left and right image
| `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%
......@@ -106,10 +110,20 @@ It's an integer number. Insert an image into a post and look for "wp-image-NN".
== Changelog ==
= 1.1 =
* Fixed coordinates not rounding while dragging
* Added single touch events by enabling 'jquery-touch-punch' in enqueue.php
* Added multi touch - zoom by pinching (tested on Android)
* Added a toggle button - to switch between images (hidden by default)
* Changed handle look
= 1.0 =
* Initial release.
== Upgrade Notice ==
= 1.1 =
* This version adds single (dragging) and multi (pinch to zoom) touch mobile support.
= 1.0 =
* Initial release.
screenshot-1.png
View replaced file @ 7b67c4b7 View file @ 52580603
screenshot-1.png

235 KB | W: | H:

screenshot-1.png

268 KB | W: | H:

screenshot-1.png
screenshot-1.png
screenshot-1.png
screenshot-1.png
  • 2-up
  • Swipe
  • Onion skin
sravnitel.php
View file @ 52580603
<?php
/**
* @package Sravnitel
* @version 1.0
* @version 1.1
* @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: Oleg Dzhimiev
Version: 1.0
Version: 1.1
Author URI: http://www3.elphel.com
*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment