1. Home
  2. /
  3. Shop
  4. /
  5. Premium Only Products
  6. /
  7. WordPress-archived
  8. /
  9. HTML Before-After Viewer | jQuery plugin

HTML Before-After Viewer | jQuery plugin


Premium onDemand


For the WordPress plugin version you must look at this file

Main Features

  • Gallery that can show one or a list of before/after items
  • Lightbox feature that can let users open and see images full-window
  • Fixed or Responsive size
  • Gallery can be use in 3 different ways:
    – Simple page block
    – Simple page block with lightbox button
    – Lightbox only, that can be opened by a button
  • Option to add a link on item captions
  • Ability to use simple images, without the before&after tool


BIG UPDATE: 11 May 2013 – Version 2.0

New additions:
– lightbox feature
– tweaks to improve compatibility with uses in tabs
– support for links on captions
– a code generator tool, to help easy generate viewer code.

Version 1.5 – 26-dec-2012.

– tweaks for touch interface: draggable slider on touch
– removed the jQuery-Draggable plugin and replaced with a custom script to prevent compatibility issues
– updated included version of jQuery to version 1.8

<a href="https://activeden.net/user/wickedpixel/follow"><img src="http://www.wpworks.net/_box/follow_wp/follow_wickedpixel_files.png" /></a><a href="http://twitter.com/wpworks" rel="nofollow"><img src="http://www.wpworks.net/_box/follow_wp/follow_wickedpixel_twitter.png" /></a><img src="http://www.wpworks.net/_box/follow_wp/follow_wickedpixel_gmail.png" />

Before After Viewer

Javascript jQuery plugin
- It can handle one before-after project or a list.
- Every project can have a title/small info, that will displayed under the viewer.
- Designed to work in all major browsers and even on touch devices.
- Can be used even as simple image viewer, if you don't provide the alternate image for the projects.

You can post ideas for improvements in the comments area.

Other Cool Stuff:


Check This:

If you are interested in a template that integrates seamless the before-after function you can check this WordPress Theme

HTML Before-After Viewer | jQuery plugin - 1

First Impression – Personal website :

HTML Before-After Viewer | jQuery plugin - 2

HTML Before-After Viewer | jQuery plugin - 3

HTML Before-After Viewer | jQuery plugin - 4


You may also like

Uber Chat – The Ultimate Live Chat for WordPress
EventON – WordPress Event Calendar Plugin