Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

HTML Before-After Viewer | jQuery plugin

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

HTML Before-After Viewer | jQuery plugin - CodeCanyon Item for Sale


Ad: Bluehost hosting

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

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.

Check This:

If you are interested in a template that integrates seamless the before-after function you can check this Wordpress Theme Main attributes are Mini malism and Focus. KEY FEATURES Dynamic Content Loadfng ioop Showcase System Multimedia Content Config Blog oras Single Page site Custom gallery colors for zoomed view. MED IABOOK Theme focused photography with supportfor retouching projects. movies, audio and text Jack Sparrow
First Impression – Personal website : Jack Sparrow WOROPRESS TEMPLATE responsive structure minimaltstic design theme presets simple setup

YOU MAY ALSO BE INTERESTED IN: Step Step Step Step The End BRICK SLIDE ROTATOR With textual graphical menu CLICK FOR LIVE

MINI 360 VIEWER With multiple interaction methods CLICK FOR LIVE 360

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


19 January 11

Last Update:
12 May 13

Compatible Browsers:
IE6, IE7, IE8, Safari, Opera

Software Version:

Files Included:
JavaScript JS, HTML, CSS, Layered PNG


eCommerce, All Items, after, before, image, photo, photography, responsive, slider, viewer