Before-After Photo Effect Plugin

// March 4th, 2010 // Plugins, Wordpress

Before After Plugin: Display before after effects with photos.

Detailed Description:
Before After plugin integrates jQuery Before/After Plugin in the 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.

Download: Before-After WordPress Plugin.

Demosites:

  1. Operation with Default wp theme

Installation:

  • 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.

Limitations:

  • Presently this plugin can only show before after effect on single post/page
  • This plugin will show the effect only for 1 set of photos on single post/page

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.

24 Responses to “Before-After Photo Effect Plugin”

  1. 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
  2. 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
  3. 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

  4. 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
  5. 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
  6. themaxxer says:
    April 28, 2010 at 5:54 am

    is it possible to combine before after with lightbox 2?

    thanks, themaxxer

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

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

    Reply
  8. 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
  9. 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
  10. Anders says:
    March 5, 2010 at 1:55 am

    Blogs for many purposes but without the plugins is like a car without weels. Thanks

    Reply

Leave a Reply