HTML Before-After Viewer | jQuery plugin

Here is an example of a complete settings configuration for the HTML Before-After Viewer jQuery plugin:

width You can set the width of the viewer using the width option. By default, it is set to 400px.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    width: '600px'
  });
});

height You can set the height of the viewer using the height option. By default, it is set to 400px.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    height: '300px'
  });
});

mode You can set the mode of the viewer using the mode option. It can be either hover or click. By default, it is set to hover.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    mode: 'click'
  });
});

buttons You can show or hide the before-after buttons using the buttons option. It can be either true or false. By default, it is set to true.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    buttons: false
  });
});

fade You can set the fade effect for the viewer using the fade option. It can be either true or false. By default, it is set to true.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    fade: false
  });
});

animation You can set the animation effect for the viewer using the animation option. You can set it to fade, slide, or scale.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    animation: 'slide'
  });
});

animateSpeed You can set the speed of the animation using the animateSpeed option. It can be a number or a string like fast, slow, or normal.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    animateSpeed: 500
  });
});

beforeContent You can set the content that will be displayed before the image using the beforeContent option.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    beforeContent: '<p>This is the before image.</p>'
  });
});

afterContent You can set the content that will be displayed after the image using the afterContent option.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    afterContent: '<p>This is the after image.</p>'
  });
});

before You can set the image that will be displayed before the before-after image using the before option.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    before: '<img src="before.jpg" />'
  });
});

after You can set the image that will be displayed after the before-after image using the after option.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    after: '<img src="after.jpg" />'
  });
});

defaultImage You can set the default image that will be displayed if the before or after images are not set using the defaultImage option.

$(document).ready(function() {
  $('#before-after').beforeAfter({
    defaultImage: '<img src="default.jpg" />'
  });
});

You can combine these options to create the desired configuration for your HTML Before-After Viewer.

Here are the features of the HTML Before-After Viewer | jQuery plugin extracted from the content:

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

Additionally, the plugin has the following updates:

1. BIG UPDATE: 11 May 2013 - Version 2.0
   • New lightbox feature
   • Tweaks to improve compatibility with uses in tabs
   • Support for links on captions
   • Code generator tool
2. 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