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: , , , , , , , ,

271 Responses to “Before-After Photo Effect Plugin”

    • instruite says:

      Its because your website loads jquery script twice on page (and that too after “before after” script

      • Mads says:

        Hey – thanks man. I have no idea to Disable one of the jquery. Is there a simple Way to do this?

        Thanks again for The Quick response!

        - Mads

        • instruite says:

          Generally only one jQuery is loaded if plugins and themes are coded as per WordPress standards, but not all developers follow that so sites end up with jQuery being loaded twice
          Which theme you are using?
          you need to remove the following code form your site you can see it when you view source of the page
          !-- Load jQuery -->
          < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> < /script>
          !-- Load the AlphaLoader -->

  1. Hi Guys.

    I really love this plugin. I have used it a lot on my blog.
    But lately the plugin somehow has stopped working.

    I have no clue, what could be the problem.

    Hope someone out there can see what the problem might be.

    Here is a page where the plugin used to work:
    http://fotomalia.dk/blog/wp-content/plugins/before-after/images/

    Thanks in advance.

    - Mads

  2. D says:

    this s**ks, does not work, go figure will all the “it works great except for…” comments

  3. [...] ist das Before-After Plugin installiert, und in Kürze werden die ersten Beispiele aufgeschaltet. Viel Vergnügen beim [...]

  4. mike says:

    Wow, serious guys, great work! Curious what your next work is.

  5. Jason says:

    Can you please help me out. I am using a custom “prophoto” wp theme for photographers.

    I cannot get this plugin to work for the life of me.

    Can you post me some sample code text to make sure I am getting this down correctly?

    Thanks very much.

  6. Hi everyone, it’s my first pay a visit at this website, and piece of writing is truly fruitful in support of me, keep up posting such content.

  7. Debasis says:

    I am still having some problem with different Browsers specially in Chrome and in Safari. The Pictures sometimes loading and after few mins. or seconds its not showing and not working completely but in Firefox its working perfectly. So What should I do to fix this problem.

    My Client like this Plugin but due to this small bug I am in a Big confusion that what to do now?

    You got lots of comments so I am afraid that whether you will read my request or not.

    I will wait for your reply.
    Take Care.
    ~Debasis.

  8. intepelia says:

    Before After WordPress Plugin – Instruite’s Blog | Instruite’s Blog http://www.vandaydiigkij.blogspot.соm

  9. [...] your life – Take a photo at 6 minutes past the hour for an entire day. I’ve installed the Before After WordPress Plugin. I’d used the Javascript before so was please to find a [...]

  10. [...] intersting, to me, is the Before After WordPress Plugin. I’d used the Javascript before so was please to find a [...]

  11. Paulius says:

    The only problem I have with this plugin is tha50% of the time wehn you try to drag you select the image. I think you should make the whole area on the image to be dragable. Take a look at this website
    http://www.guardian.co.uk/uk/interactive/2011/aug/08/tottenham-riots-before-after-pictures

    you can click and drag on any portion of the image and slider will automaticly slide to the position.

    Its very effective and you never make any mistake.

    Please fix your plugin.

  12. carl p says:

    using the before and after plugin on my site and im just getting the images stacked on top of each other. on WP 3.3.1 and BA 1.0.1 is it not compatible ?

    my code is :
    [beforeafter][/beforeafter]

  13. David says:

    Help! The plugin works just fine but then a little later the photos don’t show up (only before/after links) until I click the link to the same page again somewhere else on the site! Refreshing doesn’t seem to work!

  14. monica says:

    Do you ever answers to the questions about the plugins before and after?

  15. monica says:

    Problem loading images.
    All the static images load correctly, and ALL the before/after images DO NOT LOAD till I refresh the page 2 times in order for all the before/after images to appear. Is there a way to pre-load the before/after images so that they appear without the need for constant page refreshing? It does happen with all different browsers. IE. FIrefox, Safari and Explorer

  16. Hi,
    Where exactly is the Auto Detect Dimension checkbox (for Chrome / Safari issues)? I’ve looked all over the settings > Before/After page and I don’t see it
    Thanks!

  17. Hi,
    I’m using your plugin on my site and everything is working well with 1 exception: many of the images do not have enough time to load. IE: i’ll hit the page, all of the static images load correctly, and maybe 1/2 of the before/after images load correctly. I then have to refresh the page again, sometimes 2 or 3 times in order for all the before/after images to appear. Is there a way to pre-load the before/after images so that they appear without the need for constant page refreshing?

    • monica says:

      I have the same problem asMichael Flynn says:all of the static images load correctly, and ALL the before/after images load correctly. I then have to refresh the page, sometimes 2 or 3 times in order for all the before/after images to appear. Is there a way to pre-load the before/after images so that they appear without the need for constant page refreshing?

  18. Ovidiu says:

    I am wanting to send out a newsletter, containing the latest posts but in my tests, both images show up (as was to be expected) in the emails sent out.

    Is there any way to limit my newsletter emails to only contain the after image?

    Currently the newsletter plugin is grabbing the_content() what else could I exchange that with?

  19. Joe Acchione says:

    Hi Instruite,

    I am having trouble with your plugin – it seems to work most of the time, but every now and then I will check the page I have displayed it on and plugin isn’t functioning. The before and after pictures are stacked on top of each other and static. Then, if I refresh or come back later, they may or may not be working again. I am using WordPress 3.2.1

    The page is here:

    Any ideas on a fix? Thank you.

  20. Matt says:

    Wanted to post some more examples of the plugin in action.

    Thanks again for the cool plugin.

  21. Ovidiu says:

    I have some alignment problems, can you give me a hand please?
    The first image is left-aligned but not matter what I do to the second one, the after image, I can’t get it to properly align :-(
    It would be awesome if the second image could also be left-aligned as that would solve my problems but this plugin won’t work if both image are left-aligned :-(

    here is a sample: http://pacura.ru/portrait/the-makeup-sessions-i/

  22. Dave says:

    Awesome plugin! It does exactly what I want. Very easy to setup and use. Thanks so much!

  23. bee says:

    Just a short hello and a big thank you for this helpful Plugin!

  24. Ed says:

    Hi,
    I just tried your plugin and it’s fantastic! I’m having a little problem, when used in a post of the blog it moves the previous posts way lower on the page. Is there anything can be changed in the settings to avoid that. Once the post is open the comments box underneath is at its correct position, the problem only occurs when seeing all posts in the blog: http://www.dpretouch.com/wp/blog/
    Many thanks for this incredible plugin!

    • Ed says:

      The problem was that because one image is aligned left and the other right the width of two combined is bigger than the width of the blog space, I could see that when the page loads, the ‘after’ image is shown for a fraction of a second under the ‘before’ image before being displayed correctly. That leaves a gap with the previous post.
      I have solved by placing a thumbnail size plus a ‘more’ tag, so the post has to be opened in order to see the full size one. I just wish there was a way to hide the thumbnail when seeing the opened post.

Leave a Reply

%d bloggers like this: