Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Sravnitel

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

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
  • Touch events: click, drag, pinch to zoom

Tips

  • 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

Working demo

Elphel's Blog: Lapped MDCT-based image conditioning with optical aberrations correction, color conversion, edge emphasis and noise reduction

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 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:
[sravnitel images='ID0,ID1,ID2' width=640 height=480 showtitles=true zoom=0.3 center_x=0 center_y=0]

Shortcode Parameters

  • id - int - 0 - wrapper's <div> element id
  • images - str - '' - (required) list of images ids (attachment_id), comma separated
  • 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%
  • 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
Author Elphel Inc.
Profile
Contributors okdzhimiev
Tags before after slider, drag, images, page, pan, pinch to zoom, plugin, posts, shortcode, slider, visual composer, zoom
  1. sravnitel screenshot 1

    Working plugin

  2. sravnitel screenshot 2

    Shortcode

  3. sravnitel screenshot 3

    Description field in the attachment details

  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.

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.

How is it implemented?

Same as Twenty20 plugin - stacks two selected images so they are displayed as if one is lying on top of another. 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 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:
[sravnitel images='ID0,ID1,ID2' width=640 height=480 showtitles=true zoom=0.3 center_x=0 center_y=0]

Shortcode Parameters

  • id - int - 0 - wrapper's <div> element id
  • images - str - '' - (required) list of images ids (attachment_id), comma separated
  • 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%
  • 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
Share  
Download
Version 1.1

Requires WordPress version: 4.5.5 or higher

Compatible up to: 4.7.2

Last Updated 30 Jan 2017

Date Added: 24 Jan 2017

Plugin Homepage

Evaluation
star1
star2
star3
star4
star5

0 stars
0 ratings
57 downloads

Compatibility

Not Enough Data

Reports:
Works: 0
Broken: 0