Instruite's Blog

Before After Plugin: Can be used to display difference in before and after photos.

Detailed Description:
        Before After plugin integrates jQuery Before/After Plugin in WordPress. It can be used to show the difference between edited and original photo, before and after photos of changes, etc. Please check ‘Other Notes’ for the Usage instructions to see how to use it on your blog.

Features:

• Can be used on multiple photos on the same page/post
• The options for Jaavascript can be customized for your blog/taste thourgh Before after options page
• Even the effects for single instance of before after effect can be customized (see FAQs for more details)

Demosites:

1. On this site you can find various posts where before after effect is being used like this one -> Trying Photoshop Filters
2. On my testing site ->Operation with Default wp theme

Limitations:

• Presently this plugin can only show before after effect on single post/page -> V0.1.5
• This plugin will show the effect only for 1 set of photos on single post/page -> V0.1.5
• Might need a reloading home/index/archive/category pages to show effect on all images -> V1.0.0
• Issues with Chrome, Safari web browsers -> V1.0.0 (enable Automatic Dimension detect option)

Requirements: WordPress version 2.9+ tested upto 3.2

Auto Installation: (Recommended)

• Go to your blog’s WordPress Admin Panel -> Options -> Before After
• Search for “before after instruite”
• Click “Install now”

Manual Installation: (If for some reason you can not use above Auto installation method)

• Download: Before-After WordPress Plugin
• Plugin folder in the WordPress plugins folder must be `before-after`
• Upload folder `before-after` to the `/wp-content/plugins/` directory
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Check out ‘Usage Instructions’ for using it on your blog.

Configuration:

• Go to your blog’s WordPress Admin Panel -> Plugins -> Add New
• Set the parameters as per your requirements (should work with default parameters too)
• See Other Notes -> Configuration for more details on configuration parameters

Upgrade Notice:

• V1.0.0:If you can not see the effects after the automatic upgrade, try deactivating and then reactivating the plugin

Usage Instructions

• Write the content of your post other than the images
• Switch to ‘HTML-editor’ mode of the post editor area
• Click ‘BeforeAfter’ button (This will start the ‘beforeafter’ shortcode)
• Add the photos to your post through the wordpress image/media uploader
• Atleast 1 photo should be left align when you insert the images on your post
• The ‘left-aligned’ photo is taken as before photo so please align your photos accordingly
• After you have inserted the two images in the post Click ‘BeforeAfter’ button again to close ‘/beforeafter’ shortcode.
• You can add more content to your post after closing the ‘/beforeafter’ shortcode
• The content other than image information withing the ‘beforeafter]…[/beforeafter’ is ignored when the shortcode is executed, in other places like home page archive page the content will be shown as is in the post.

Configuration Options
      Plugin Customization:

• Use Custom Styling
         Enable this to use custom styling (css) and provide the custom css in below Custom Styling Code text area. If you want to integrate the style information in your css file leave the below text area blank.
  CSS tags used by the plugin
  .ba-container {margin-left:auto; margin-right:auto;}
.ba-container + div.balinks {margin: 0 auto;}
.ba-container div img {max-width: none;}

• Javascripts
         Select one of the following
  • wordpress: (recommended option) Use javascripts bundled with wordpress
  • plugin: Uses javascripts from plugin folder jquery(1.6.1) jquery-ui.custom(1.8.13)
  • custom:provide your own scripts (provide complete information including the script tags in Custom JS Code text area.
• Auto Detect Dimensions
         Enable this if you are having issues on your site with Chrome or Safari Web Browsers

      Javascript Customization:

• Introduction Animation (animateintro)
        When enabled the drag bar will start on extreme right side and gradually move to the positions specified by introPosition

• Introduction Delay (introDelay)
        The time in milliseconds to wait before starting the introduction animation when enabled animateintro is enabled

• Introduction Duration (introDuration)
        The time in milliseconds, it will take drag bar to go from right side to the positions specified by introPosition during the introduction animation when enabled animateintro is enabled

• Introduction Position (introPosition)
        The initial position where the drag bar will be located, value between 0.0 (extreme left) and 1.0 (extreme right)

• Show Full Links (showFullLinks)
        whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image

• Before link Text (beforeLinkText)
        Text of link to display for showing full Before image

• After link Text (afterLinkText)
        Text of link to display for showing full After image

• Path to images (imagePath)
        Full path to images used by plugin

• Cursor (cursor)
        Type of cursor to show on drag bar

• Click Speed (clickSpeed)
        Speed specified in milliseconds for click animation

• Link Display Speed (linkDisplaySpeed)
        Speed specified in milliseconds for animation when before or after image link is clicked

• Divider Color (dividerColor)
        Hex Color code for the divider bar

• Image Width (imgWidth)
        This value is used in case the plugin code cannot find image width when auto detect dimensions is enabled

• Image Height (imgHeight)
        This value is used in case the plugin code cannot find image width when auto detect dimensions is enabled

      Javascript Customization for each instance of before after photo effect:
          You can supply custom options with each beforeafter short code. Use shorthand description provided with options above to specify custom parameters. For example below code
beforeafter dividerColor="#ff0000" beforeLinkText="Before"

Changelog

• V1.0.0 (Released: July 8, 2011)
  • Total revamped of code
  • Using modified version of Jquery Before After original script to V1.3
  • Added options page
  • Before After Javascripts options can be provided through shortcode attributes now

• V0.1.5
  • Fixed the bug causing php error

• V0.1.4
  • Changed code to use JScripts bundeled with WordPress
  • Modified the beforeafter.js for a fix for depreceated function
  • bug in image cause image height to default to 0 px

• V0.1.3
  • Upgrade the original jquery.beforeafter to V1.2

• V0.1.2
  • Fixed a bug causing the button to put shortcode not showing up in editor

• V0.1.1
  • Fixed a bug caused by themes (like twentyten) which set max-width for images

• V0.1.0
  • Changed to show effect on pages other than single post
  • Added activation and deactivation functions to add/delete options in wp-table