Before-After Photo Effect Plugin

March 4th, 2010

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

Posted under: Plugins, Wordpress
Tagged with: , , , , , , , ,

274 Responses to “Before-After Photo Effect Plugin”

  1. I am having a hard time on doing this before after image effect on my blog

  2. Stefan says:

    Hi, thank you for the plugin.

    My problem is, that when I first visit the site, the handle of the bar is off-center, like this:
    http://bit.ly/T5T0Tt

    When refreshing the page it then acts like it should, so the problem always happens on first visit after a fresh connection to the internet.
    How can I fix that?

    WordPress 3.9.1 and Firefox 29.0.1 is used.

    Thanks in advance.

  3. Alice says:

    The flock, really great plugin. I proceeded according to your instructions, but I get a picture before … only instead of a picture after it is empty, even though the image is loaded. link: http://www.tvorba-www-stranek.biz/test/, password: wordpress
    Can you help me where I’m wrong? Thank you.

  4. Love the plug in but having a little technical trouble:

    http://faith-michele.com/before-after-test/

    The problem is, I’m guessing self evident:

    1. Why doesn’t the slide bar work?
    2. Why is the second set of photos not working?

    PS — When I just used the “before/after” button to insert the code, I got no results at all. When I added a backslash to the second one to close out the shortcode, I was able to get the result on the top image (but not the second one).

    Thanks for your help!

    Warmest,
    Faith

  5. Céline says:

    Hello !

    Thanks for your marvellous plugin !

    I just test it but I only see that one image on two (I only see the “after”).
    The page : http://maliciarosenoire.fr/blog/a-propos/avant-apres/

    How can I fix this ?

    Thank you in advance !

  6. Alex Banakas says:

    Using your plug-in and I have a small problem. The first image set to alignleft becomes small in the left side of the overall image box. Exposing 3/4ths of the “after” image. Can you help me correct this problem?

  7. Jennifer says:

    Is it possible to make the images responsive?

  8. Matt says:

    My before image seems to be a pixel higher than my after image. But the images are exactly aligned viewing them elsewhere.

    http://www.itsworthashot.com/2013/08/29/my-10-landscape-editing-tips/

    How can I fix this?

    Awesome plugin by the way, perfect for showing photo editing techniques!

  9. irena says:

    Hi,

    I don’t understand how to configure this plugin correctly. What should I enter in Before Link Text and After Link Text? Do I have to upload those images somewhere else and then add links in settings?

    I wanted to test the plugin and followed all the steps, but instead of images I get Show Only Before and Show Only After texts overlapping each other.

    Thanks,

    Irena

  10. it@vincihairclinic.com says:

    Amazing plugin – unbelievable,
    congrats!!
    Will there be an update to view in full screen? or bigger?

  11. edinchavez says:

    Can someone look at my page and tell me what could be wrong here is the link: http://www.edinchavez.com/blog/freebies

  12. edinchavez says:

    Just downloaded this thing but its not working at all, any suggestions? than you in advanced for all your help

  13. Nina says:

    Why it isnt possible to add more before after images than 1? I would like to show people at least 5 sets per page, that isnt possible right.

    Also I have to be very careful with the code, I insert first images, align it left set the size to 680 width and then insert second image, size 680 px, sometimes it aint working, can you tell me why?

    • ruprect says:

      I have no problems inserting several images, see here:
      http://www.photofolio.dk/street-photography-indre-kobenhavn-del-1/

      My process of adding before after images is as follows:

      1. Switch away from Visual to HTML view (i prefer that view when adding Before/After images.
      2. Add the images – I add the processed and then the original one in one step.
      3. I make then change the HTML of the images, first is the processed and i set that to alignnone and then the original to alignleft
      4. Then I select full HTML for both images and press the Before After button

    • instruite says:

      Nina,
      Multiple before after will work on same page but each set has to be in different before after tag. and ruprect reply shows the way to make it work and even a demo page.

      What kind of error you get when you say sometime it works and sometime it does not?

      • Nina says:

        I use same process as Ruprect
        but the images did not show up. I also have to resize images
        if I insert images through media button, I get a lot of code …..
        I think that editor strips out some of the code sometimes, who knows

Leave a Reply

%d bloggers like this: