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

153 Responses to “Before-After Photo Effect Plugin”

  1. t0m says:
    March 30, 2011 at 4:04 pm

    Hey,

    i wrote you an email yesterday with my problem and you asked me which version i use…

    my problem is, the effect doesn’t seem to work with my theme.
    it works properly with others. I use the version 0.1.2. of your plugin.
    And here you can see the problem:
    http://wordpress.thomas-reimann.com/2011/03/ipad-addicted-beforeafter/

    The plugin resizes the before pic instead of blending it over.
    is there a solution for my problem or do i have to choose another theme…?!

    Reply
    • instruite says:
      March 31, 2011 at 12:35 pm

      Hi,
      The problem on your site is due to CSS Specificity.
      and issue is being caused by this css code in you style.css
      .content img.size-auto, .content img.size-full, .content img.size-large, .content img.size-medium, .wp-caption
      The present plugin does not provide the option to put custom css, so you will have to change the code in plugin itself.
      You can go to Plugin->Editor->select before after in dropdown menu
      search for
      .ba-container div img {
      replace it with
      >.ba-container div img.size-auto,>.ba-container div img.size-full, >.ba-container div img.size-large, >.ba-container div img.size-medium, .wp-caption {

      I am planing to add a plugin setting page in future version so will add option for custom css too in same.

      And remember the above fix is in code directly so when you upgrade the plugin it will be overwritten

      Thanks

      Reply
  2. wishing says:
    March 22, 2011 at 3:06 am

    I just updated to the latest version of WP (3.1), and now the [beforeafter] button doesn’t show up on the tool bar. It was there before I updated to 3.1.

    The plugin still works, but the pening/closing tags have to be put in manually.

    Reply
  3. wishing says:
    March 22, 2011 at 3:05 am

    I just updated to the latest version of WP (3.1), and now the [beforeafter] button doesn’t show up on the tool bar. It was there before I updated to 3.1.

    The plugin still works, but the opening/closing tags have to be put in manually.

    Reply
  4. Dzynit says:
    March 15, 2011 at 1:49 am

    I found a plugin conflict that causes the images to stack and not have the slider in IE (FF and Chrome do not have the issue)

    Lightbox 2 being active causes the above.

    If I have to reactivate that plugin and I can find a solution I’ll repost. I would think adding a function to not add the .js files of lightbox on the pages the before and after is being used should solve the problem.

    Reply
  5. m.leon says:
    March 12, 2011 at 9:37 am

    What mean when you said: “Might need a reloading home/index/archive/category pages to show effect on all images”?

    Reply
    • instruite says:
      March 12, 2011 at 2:28 pm

      it means you might need to once refresh the pages where there are multiple images (its required for the plugin to know how many images there are on page and due to cache plugins in some cases)

      Reply
  6. Dzynit says:
    March 11, 2011 at 12:40 pm

    I used your plugin today and with a little trial and error – I had complete success on multiple b&a images on one page on wordpress 3.1.

    If it’s helpful to anyone, be sure your before image is alignleft and your second alignnone (this is very important).

    Second important thing is to create a new line between the 2 images (carriage return).

    Remembering those two things for each before and after between the shortcodes, works perfectly.

    For proof, you can see it here: http://www.permanentmakeupenhancements.com/before-after-photos/

    (I also didn’t have an icon in the html editor mode, but that isn’t a problem for me with the result working great just manually entering the shortcode.)

    Thanks a bunch for this plugin! It was absolutely perfect for this project.

    Heather

    Reply
    • m.leon says:
      March 15, 2011 at 3:31 am

      Hello Dzynit, I found something strange in your page using Chrome 10, if I reload the page the images doesn’t show up, but if I click on Before & After Photos Menu works fine.

      Reply
      • Dzynit says:
        March 15, 2011 at 3:44 am

        Thanks for pointing that out. I wonder if it’s some kind of cache issue. At this point, I think I’ll be safe though. Not as many Chrome users will be viewing the site and they’ll be entering from the home page. So I think I’ll just leave it be for now.

        It did do the same for me when viewing like you said in Chrome. I didn’t notice before because I started from the home page.

        Reply
  7. Joey says:
    February 10, 2011 at 5:29 am

    Hello there, I just downloaded your plugin and for some reason I can’t get it to work on wordpress version 3.0.5.

    I followed the step-by-step instruction and I’m not getting the exact result as the demo. Here’s the code I’m using.

    [beforeafter][/beforeafter]

    The above code shows one image on top and at the bottom. Is there an exact code I should be using? Please help. Thanks.

    Reply
    • instruite says:
      February 17, 2011 at 4:41 pm

      Can you point me to your website where you have problem?
      And just to let you know that the image information should be between those beforeafter shortcodes and the effect will only work when the posts is shown in single mode (that is it won^t work on home, archive, category pages where there are multiple posts)

      Reply
    • instruite says:
      March 11, 2011 at 5:38 pm

      Your problem should be solved with the new version
      Just upgrade the plugin to 0.1.0 version from your wordpress dashboard

      Reply
  8. Josh says:
    February 8, 2011 at 4:48 pm

    Yes, the ‘button’ doesn’t show anywhere, can you please update?

    Reply
    • instruite says:
      February 17, 2011 at 4:43 pm

      I just tested with the upgraded WP version (3.0.5) and buttons just shows up fine.
      Can you provide me the screen shot of your site for add new post page?

      Reply
      • wishing says:
        March 22, 2011 at 3:09 am

        button shows up fine in previous version of WP, but is not there in WP 3.1 (latest version)

        Reply
        • instruite says:
          March 22, 2011 at 8:16 pm

          Yeah, I just checked again with 3.1 and there seems to some change in core code of wordpress which is creating the issue.
          I have filed a bug report with wordpress, to get their opinion too.
          and in mean time will release a temporary fix through my plugin itself

          Reply
  9. Manu says:
    February 7, 2011 at 7:24 pm

    Hi,
    would you please give me an exakt code example of the shortcodes and the html for inserting the images.
    I am using an highly customazible theme and the advertised button for inserting the shortcode is not visible (there is my own list of shortcodes which are coming with the theme desing). Maybe there is a little conflict.
    But I want to figure it out if it will working with the manual inserting in the html editor.

    Reply
    • instruite says:
      February 17, 2011 at 4:45 pm

      Just add your pictures as you will normally do (check the instructions of the plugin usage for alignment requirements) and add the [beforeafter] shortcode at start and [/beforeafter] shortcode at end of those pictures code.

      Reply
  10. David says:
    February 4, 2011 at 9:17 pm

    I use this website to test plugins before I use them on other websites.
    The pictures come from http://www.couriermail.com.au/ – they have a similar method to your plugin to show before and after and have multiple before and after on a page,
    Somehow I just get the images above each other. (They are before and after Cyclone Yasi)

    Reply
  11. ‘Take a seat’ & Tutorial on ‘Before/After’ » Chris Kenison says:
    January 20, 2011 at 6:20 pm

    [...] So, I know I was going to write a tutorial on how this is done, but I’ve found a site where they already did… it’s the creator’s site. Weird. Anyways, install a plug-in called ‘Before After’. If you have it installed, here are the usage instructions taken from Instruite: [...]

    Reply
  12. Iran Watson says:
    January 17, 2011 at 8:11 am

    Whatever you did seemed to fix the problems I was having getting this plug-in to work, at least partially. I still can’t get it to work on “Pages” and on my “Blogroll”… You have to go directly to the post’s URL for it to display correctly. Any ideas on what is going on and how to correct this?

    It works here: http://iranwatsonphoto.com/atlanta-real-estate-photography-hdr-and-exposure-fusion/

    but not here…: http://iranwatsonphoto.com/blog/

    Either way, great work on this. It is sure to be super valuable once I get it tuned in.

    Reply
  13. The Power (and Danger) of Photoshop | Jake Garn Photography says:
    December 15, 2010 at 7:24 am

    [...] show my post-processing handiwork I downloaded a Before & After plugin from Instruite that is kind of cool.  There should be a little slider that you can move back and forth to see the [...]

    Reply
  14. Sheryl says:
    November 27, 2010 at 12:32 pm

    This plug-in has been working great until recently! Doesn’t work any more…. the photos show up one under the other. Any advice? Thanks!

    Reply
  15. Dave says:
    November 26, 2010 at 4:47 pm

    Hello :)

    I’m using your plugin for WP and I love it! Very nice transitions, works well on mobile devices.

    However, it only seems to work properly on Safari and Firefox. In Opera and IE it displays the before image stacked on top of the after image, and in Chrome it justifies both images to the left and moves the comments/other page elements underneath the images.

    I’ve noticed that your jquery (separate from WP) doesn’t function like that.

    Thanks!
    Dave

    Reply
  16. Iran Watson says:
    November 21, 2010 at 3:41 pm

    I’m not having any luck getting the plug-in to work on my site. I have followed the usage instructions to the letter but all I get is one photo that wipes to nothing. In other words, I see and can control the slider but when you wipe the alignleft image there is nothing underneath. I really like the look of this plug-in and would love to use it on my site. Any idea where I can get some help with this?

    Reply
  17. Katie says:
    August 11, 2010 at 2:02 am

    Has there been a fix for the IE issue? Also, we are having trouble getting this to appear on a page. We can only get this to work on a post.

    Reply
  18. tLa says:
    May 26, 2010 at 8:32 pm

    Great plugin. I’m using it for my photoblog site. I have a question:

    Can I use only the link “Show only After” and “Show only Before” as to link the images? I don’t want the slider on my image though.

    Thanks

    Reply
  19. Jay Crihfield says:
    May 16, 2010 at 12:37 pm

    OK so right align with the 2nd image works, but the plugin/script only seems to work if I (or a user) clicks on a specific post. Is there any way to make it work if you simply type in the root url http://www.jaysphotoblog.com and have it work if that post appears anywhere on the list of posts associated with the main url?

    Reply
    • instruite says:
      May 16, 2010 at 4:28 pm

      Hi Jay,
      Yeah that is the present limitation of this wordpress plugin that the effect will be shown only when it is displayed as single page and not on home page or archive page.
      Main reason is this plugin presently can apply the effect to one set of images only.
      In future release I will try to cover this.

      Thanks

      Reply
      • Jay Crihfield says:
        May 26, 2010 at 9:02 pm

        One other thing I’ve noticed is that the plugin works great with Safari, Firefox, and Chrome browsers, but doesn’t seem to work with IE8. I haven’t tried it on older versions of Explorer, but is there something different I need to do to get it to work with Internet Explorer 8?

        Reply
        • instruite says:
          May 28, 2010 at 11:25 am

          I just checked with IE and I see there is some problem with the right image.
          Will look into it and let you know when I find a solution.

          Thanks

          Reply
          • Herzbert says:
            July 20, 2010 at 11:15 pm

            Hello!
            Great Plugin, thank you very much!
            What about Internet Explorer, is there a way to make it work?
            Best regards
            Herzbert

  20. Jay Crihfield says:
    May 12, 2010 at 6:25 am

    I’m having a problem with the before/after images lining up. Even though both images are exactly the same size, one is always slightly taller than the other, and the HTML code says they are the same size too. Any ideas?

    Reply
  21. Katie says:
    May 2, 2010 at 4:55 am

    I am having trouble getting the before/after slider to appear. I am just getting two pictures, side-by-side.

    Reply
    • instruite says:
      May 3, 2010 at 2:59 pm

      Hi Katie,
      Can you provide me with the url of the page?

      Also As mentioned in the description/limitation of the plugin
      This effect appearsonly when the page/post is viewed as single that is it won’t show on home/archive/category pages.

      Thanks
      instruite

      Reply
  22. themaxxer says:
    April 28, 2010 at 5:54 am

    is it possible to combine before after with lightbox 2?

    thanks, themaxxer

    Reply
  23. themaxxer says:
    April 27, 2010 at 11:03 pm

    hello
    this script rocks. thanks and keep coding. :)
    best regards
    themaxxer

    Reply
  24. Jason says:
    March 26, 2010 at 5:30 am

    Hi, I’m the author of the plugin and I wanted to correct something your wrote. The plugin works on multiple image sets on a single page and isn’t limited to just one set of images. This can be seen here http://www.catchmyfame.com/jquery/demo/8/. Thanks!

    Reply
    • instruite says:
      March 26, 2010 at 11:08 am

      Hi Jason,
      The limitation mentioned in this post is not related with the jQuery plugin that you wrote but with the wordpress plugin I have written. I have gone through the link you have mentioned before and I am well aware of the functionality of the plugin to work on multiple image sets on same page and I plan to implement in future releases of the plugin.
      Thanks

      Reply
      • Oliver says:
        March 31, 2010 at 5:10 pm

        Hi,

        I tried to modify your plugin, to support up to 5 instances on one page (that worked so far). I also corrected a problem, where the last 2 characters of the img-html-string were cut of. But I still have problems with conflicting CSS styles in my template.
        I can send you the modified php via personal email.

        Regards

        Oliver

        Reply
        • instruite says:
          April 1, 2010 at 3:21 pm

          Hi Oliver,
          Sure I can have a look at your modified version and help you out with the css problem.
          send me the file to before-after-plugin [at] instruite.com
          Also send me the url of the site where you are trying to implement it so I can have a look at where exactly css is creating the issue.
          Thanks

          Reply
  25. uberVU - social comments says:
    March 12, 2010 at 4:36 pm

    Social comments and analytics for this post…

    This post was mentioned on Twitter by instruite: [Blog] Before-After Photo Effect Plugin: Before After Plugin: Display before after effects with photos. Detailed… http://ping.fm/I7eRJ...

    Reply
Newer Comments »

Leave a Reply