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

230 Responses to “Before-After Photo Effect Plugin”

  1. Fred says:
    January 13, 2012 at 12:53 pm

    This plugin doesn’t seem to work for me. Can only view the before image. I thought it might be from the Thesis theme, but I get the same thing when I use TwentyTen too.

    Are there any tricks I should know? (other than left aligning the first/before image)

    Thanks,
    Fred

    Reply
  2. Richard Olpin says:
    January 10, 2012 at 1:55 am

    Spotted an odd one today, when I grabbed the handle the whole page scrolls up. The reveal works but with the whole page moved.

    Same thing happens in Chrome and in Safari

    Example: http://www.richardolpin.co.uk/digital-makeover/

    Reply
  3. Wpuser says:
    December 23, 2011 at 2:01 am

    None of the demos on your own website is working. Images are displayed beneath another or next to another. I tested in IE, chrome and firefox.

    Reply
  4. rudy says:
    December 17, 2011 at 2:18 am

    i am getting this error
    Warning: strpos() [function.strpos]: Offset not contained in string in /home/content/79/7325279/html/wp-content/plugins/before-after/before-after.php on line 339

    Warning: strpos() [function.strpos]: Offset not contained in string in /home/content/79/7325279/html/wp-content/plugins/before-after/before-after.php on line 339
    here is my code

    [beforeafter]
    http://rudyshoushany.com/wp-content/uploads/2011/12/bef.jpg
    http://rudyshoushany.com/wp-content/uploads/2011/12/aft.jpg
    [/beforeafter]

    Reply
    • instruite says:
      December 18, 2011 at 4:21 pm

      Can you point me to the page where you are getting this error?
      and the above error will occur if plugin can not find image html tag or left align tag for images in the post
      In your code you seem to be adding link to images directly which will not work you have to put them in image tags.

      Reply
      • Lewis says:
        January 4, 2012 at 1:07 pm

        I am trying to use the BeforeAfter plugin to display/demonstrate changes in the human brain with advanced Alzheimer’s Disease. My images are stacked – aligned to the left – even though the Before image is AlignLeft in the code while the After image is AlignNone.

        I obviously don’t get the split line onscreen or any functionality. Any help would be appreciated.

        Reply
  5. ovidiu says:
    December 14, 2011 at 7:45 pm

    it seems both the before and the after picture are shown in the feed, could this be changed somehow?
    i.e. with a preference to only show after maybe?

    Reply
    • instruite says:
      December 18, 2011 at 4:15 pm

      This plugin does not control the content of the post in any way, it just modifies when the pictures are display on screen on web page.
      Regarding controlling how your posts appear in feed have a look at feed customizing plugins.

      Reply
  6. ovidiu says:
    November 12, 2011 at 6:40 pm

    I just read the instructions and see I need to left-align one image. unfortunately, I really need to have them centered, is there a workaround to still be able to use your plugin?

    Reply
  7. PipoXtreme says:
    November 7, 2011 at 8:42 pm

    I`ve used your code for my blog posting .. but my images are just alignement in a row..

    Before image on top and just below the After image…

    where can be the failure ???
    here is my blog link…

    http://blog.pshots-photography.com/?p=13286&preview=true

    Reply
    • PipoXtreme says:
      November 9, 2011 at 7:25 pm

      Nobody a solution on this ?!

      Reply
    • instruite says:
      November 9, 2011 at 10:02 pm

      The page you mentioned in your link shows 404 Not Found Error.
      Looking at the source of your not found page your page seem to be loading jquery twice once in head
      ajax/libs/jquery/1/jquery.min.js?ver=3.2.1
      and then in footer
      ajax/libs/jquery/1.4.4/jquery.min.js
      which might be creatong problem.

      Thanks

      Reply
  8. Jake Laughlin says:
    October 12, 2011 at 5:12 am

    For some reason, the slider isn’t working. Clicking the “show only before” and “show only after” links works like a charm, but manually moving the slider doesn’t work at all. You can see the post I’m referring to on my homepage (URL is above). Thanks….!

    Reply
    • instruite says:
      October 12, 2011 at 9:50 pm

      On your homepage your theme modularity is loading the jquery UI again and that too an old version, which might be creating the issue.
      Can you disable loading of jquery-ui-1.7.2.custom.min.js use only ui.core.js?ver=1.8.12 which is loaded by WordPress and see if it solves your issue?

      Thanks

      Reply
      • Jake Laughlin says:
        October 12, 2011 at 10:48 pm

        Not sure how to go about doing that? Any suggestions?

        Reply
        • instruite says:
          October 13, 2011 at 10:21 pm

          Seems like you have found a way for the UI script issue.
          There seems to be some image alignment problems
          for that I will recommend you to Enable custom css in Before after Plugin options and then add below to in custom css text box
          .ba-container {margin-left:auto; margin-right:auto;}
          .ba-container + div.balinks {margin: 0 auto;}
          .ba-container div img {margin:0 !important; padding:0 !important; max-width: none;}

          Reply
          • Jake Laughlin says:
            October 13, 2011 at 10:55 pm

            I didn’t notice any image alignment issues, but I went ahead and applied the custom css code you suggested. What exactly did you see that seem to be aligned improperly? Thanks!

          • instruite says:
            October 15, 2011 at 4:38 pm

            Change this line
            .ba-container div img {margin:0 !important; padding:0 !important; max-width: none;}
            to
            .ba-container div img {max-width: none;}
            and when on the post page see the top of divider line extends above the photos.

  9. kurt says:
    October 9, 2011 at 1:53 am

    Thanks for a great plugin.
    Nevertheless, there’s a problem.
    My slider handle-image looks like this (see link) – has kind of a frame…
    Here’s the link: http://i.imgur.com/0oiTf.jpg
    Any suggestions?

    Thanks a lot.

    Reply
    • instruite says:
      October 9, 2011 at 5:12 pm

      Kurt,
      It might be some css issue, can you point me to the page where that problem is appearing?
      Also try deactivating and then reactivating the plugin once.

      Thanks

      Reply
    • instruite says:
      October 9, 2011 at 8:38 pm

      Hello Kurt,

      I had a look at your page, below is the solution for your issue

      Enabled Custom css on your Before after options page and add below css into Custom css text box

      .ba-container {margin-left:auto; margin-right:auto;}
      .ba-container + div.balinks {margin: 0 auto;}
      .ba-container img {max-width: none; background:none; border:none; padding:0;}
      .ba-container div img {max-width: none; background:none; border:none; padding:0;}

      The last line might not be required, so you can try once without it also.
      Also note this will also remove the border and padding from your before after images itself.

      Let me know how it turns out.
      Thanks

      Reply
  10. Mateusz Malinowski says:
    August 27, 2011 at 6:51 pm

    Hi
    Can I modify Yor plugin (somewhere) to have before/after effect like here http://www.jpegmini.com/main/home
    (don’t need to click on image – also like in “mouseover”)

    Reply
  11. Matt says:
    August 21, 2011 at 3:04 pm

    Hi there. A great plug-in and I’ve used it before on a static html page, but now i’m trying to use it in my test WordPress site. Here’s the page I’m testing: http://mattscreative.com/test/mc/?p=535

    I’ve tried just about every suggestion on this board (adding the custom js, adding the custom css, checking auto detect, deactivating/activating, etc), but am still unable to make it work. I’m sure it’s a simple fix. Any suggestions?

    Thanks.

    Reply
    • instruite says:
      August 22, 2011 at 9:12 pm

      Matt,
      Its not working on your site because of jquery-1.4.2.min.js file which your theme is loading after wp_header function. if you look at the source of your page you have 2 jquery files loaded
      Recommended solutions
      Use the jquery provided by WordPress just remove the version being loaded by your theme
      Thanks

      Reply
      • Matt says:
        August 23, 2011 at 1:29 am

        Thanks for your response. I removed the instance of jquery-1.4.2.min.js from my header.php and it works, but now my fancybox effect no longer works to display my images on another part of my site. Apparently the fancybox is dependent on the jquery-1.4.2.min.js. Is there anyway I can get both to work? I know it’s an off-topic question, but any advice you have would be great.

        Thank you.

        Reply
        • instruite says:
          August 26, 2011 at 1:11 pm

          The main issue was that your site was loading the jquery again after the beforeafter script and there are other plugins which are loading jquerry before my plugin.
          I will recommend to search on WordPress forum how to use a different version (other than which is supplied with default WordPress) of jquery plugin
          and I have not tested latest version of beforeafter plugin with jquery 1.4 so can’t say if it will work with it.

          Thanks

          Reply
          • Matt says:
            August 30, 2011 at 6:08 am

            Finally got it to work, while keeping the integrity of my other theme plugins. What I did was, from the Before-After Settings page, I chose Custom JS (and left it blank). I then created a custom page (i.e. mycustompage.php) and added/linked the scripts of jquery(1.6.1) & jquery-ui.custom(1.8.13) at the top of the page. Might not be protocol scripting, but it works and hopefully it helps someone with a similar situation. Thanks again for the cool plugin.

  12. wordpress plugin review and discussion. | Loadwp.com says:
    August 16, 2011 at 8:51 pm

    [...] After * Set the parameters as per your requirements (should work with default parameters too) * See Plugin Pagefor more details on configuration [...]

    Reply
  13. Iran Watson says:
    August 16, 2011 at 7:42 pm

    I just wanted to come back and thank you for all the hard work you have done on this AWESOME plug-in! I see most of the comments on this thread are about plug-in issues or user error, both of which I have experienced. Your diligence has paid off because now it works like a charm! I even got two sliders on the same post! I hope you don’t mind, but here is a link for everyone to see this in action: http://iranwatsonphoto.com/digital-magic-the-virtues-of-hiring-a-professional-retoucher/

    Thanks again and keep up the good work!

    Reply
  14. Colton says:
    August 16, 2011 at 9:18 am

    Hi, this plug-in is perfect for what I need….except it’s not working. : ( I’ve followed the instructions to the book, but the picture still shows up on my page with the line in the middle…which doesn’t animate or drag anywhere…it’s just stuck. Any ideas on a fix?

    Thanks

    Reply
  15. Mateusz Malinowski says:
    August 11, 2011 at 9:30 pm

    Hello
    I installed newest version on wordpress 3.2.1.
    Settings are default and in post editor I have not beforeafter button to add chortcode.

    Reply
  16. Sasha says:
    August 2, 2011 at 4:52 pm

    Hi! I use your cool Before After plugin.I need such plugin that can help make next and previous links (like galllery). Can you help me? – http://piccy.info/view3/1807189/c13f346c7d683282e3a0a862400fe0aa/IMGhttp://i.piccy.info/i5/89/71/1807189/Snymok_240.jpg

    Reply
  17. t0m | Thomas Reimann Photography says:
    July 23, 2011 at 9:50 pm

    I have finally updated to version 1.0.1 and now i have problems with the effekt/plugin :-/

    http://www.thomas-reimann.com/2011/07/85mm-f1-8-im-studio/

    Here you can see that the images aren’t alligned correct and the “handle” isn’t displayed correctly… i have no clue what’s the problem.

    Reply
    • instruite says:
      July 23, 2011 at 11:01 pm

      I will recommend you to once deactivate and then reactivate the plugin
      For your pictures being miss aligned problem
      Enabled Custom css on your Before after options page and add below css into Custom css text box
      .ba-container {margin-left:auto; margin-right:auto;}
      .ba-container + div.balinks {margin: 0 auto;}
      .ba-container div img {margin:0 !important max-width: none;}
      have added margin:0 !important which should take care of your images being missaligned
      For handle images check whats in “Path to images” option on your before after page, it should show url of yoursite/path to wordpress plugin/before-after/images
      if its different adjusts its value

      Thanks

      Reply
  18. Richard Olpin says:
    July 21, 2011 at 8:00 pm

    Getting an odd error here. Rather than revealing the ‘after’ image, the handle is scrolling the image to one side of the container.

    Example: http://www.richardolpin.co.uk/workflow-examples/mono-conversions/

    This is in Safari 5.1 on OSX 10.7 (Lion)

    There are a couple of warnings appearing on the page load:

    “Warning: strpos() [function.strpos]: Offset not contained in string in /homepages/43/d97354903/htdocs/www.richardolpin.co.uk/wp/wp-content/plugins/before-after/before-after.php on line 363

    Warning: strpos() [function.strpos]: Offset not contained in string in /homepages/43/d97354903/htdocs/www.richardolpin.co.uk/wp/wp-content/plugins/before-after/before-after.php on line 371″

    Any ideas?

    Reply
  19. m.leon says:
    July 19, 2011 at 1:33 am

    Hi, I found a bug (I think), when I try to change “Introduction Position” this message apper:

    “Intro Position values needs to be between 0.0 and 1.0. Submitted Value 0.7 ”

    When I type: “0,7″ only show before picture.

    Reply
  20. Phil Nealey says:
    July 18, 2011 at 11:15 pm

    The plugin works well on my site, but it is conflicting with my theme. Likely a jQuery conflict. Changing the script options does not resolve it. When the plugin is active it kills a thumbnail slider and a slideshow on my homepage. Any ideas on how to fix this conflict?

    Reply
    • instruite says:
      July 18, 2011 at 11:47 pm

      You seem to be using jquery uislider version 1.7.2
      while the core jquery ui version used by wordpress is 1.8.12 which my plugin is using.
      Does your slider function works when before after plugin is deactivated?
      If yes then in before after options page Choose “Custom” in javascripts and add the information regarding below script incustom js code box

      jquery.beforeafter-1.3.instruite.min.js?ver=3.2.1

      Note You need to add complete path and js info including script tag
      best way will be to copy it from source code of your homepage when the plugin is active

      Reply
    • instruite says:
      July 18, 2011 at 11:56 pm

      Also I noticed that the handle images on your before after pages are missing
      In before after options page make sure the “Path to images” is having the correct value

      Reply
  21. Marcelo Souza says:
    May 4, 2011 at 1:05 pm

    I have this plugin installed on my website, and it works very well, but i’ve found it behaviors strange on Chrome. ;( It’s hard to pick the slider, and many times it select one of the images making it totally blue. :( Testing on FF it works flawless. ;( This problem appears only in chrome…

    Reply
  22. Liewilyn Baynosa says:
    April 26, 2011 at 11:14 am

    great plugin I definitely gonna try this one on my site.
    feel free to visit me guys at

    Photography Hobby

    Reply
  23. t0m says:
    April 17, 2011 at 1:55 am

    Hey! I’m so glad the plugin works at my blog…!
    But I have a nother question.

    Is there any way that i can influence where the line appears?
    by default it appears exactly in the middle of the two images.
    my idea is, that i can choose a number between 1-100 within the beforeafter tag which defines where the line appears dynamically from tag to tag… that would be awesome…
    but i think that’s not that easy, maybe it’s a suggestion for the next update!?

    If this isn’t possible dynamically, is there a way to change the default position in general?

    Reply
    • instruite says:
      April 17, 2011 at 5:44 pm

      Hi,
      Can not say about dynamic positioning but am planning to provide option for static in next update (basically when I have option page made up for the plugin).

      Thanks

      Reply
  24. Alan Soerensen says:
    April 4, 2011 at 2:18 am

    It sometimes work on the site. It has nothing to do with the browser. Perhaps it’s a problem with the internet linkt to the include files.
    Anyway – I have the problem on my site http://alansoerensen.dk/?p=156

    Reply
  25. jako says:
    April 1, 2011 at 1:02 am

    Are you sure? I have Mac OsX and the effect doesn’t work in my home page when I enter in the site. I test with the ipad it’s the same thing.
    The code look like this (Can be there have an error?) :

    [beforeafter]<a href="http://.../wp-content/uploads/2011/03/nike-rouge.jpg" rel="nofollow"></a><a href="http://.../wp-content/uploads/2011/03/nike-bleu.jpg" rel="nofollow"></a>[/beforeafter].
    Reply
    • instruite says:
      April 2, 2011 at 2:43 pm

      How are you adding images to your post?
      The code which you added in your comment doesn’t has any img html tags?
      Also when I went to your site initially it showed only Links but on refresh it showed images properly (checked with firefox).
      are you using any cache plugins?

      Reply
« Older Comments
Newer Comments »

Leave a Reply

%d bloggers like this: