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:
- On this site you can find various posts where before after effect is being used like this one -> Trying Photoshop Filters
- 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
sorry. I meant it scales my left image. If you visit the link you will see the issue. Thank you.
Sorry, I think you are using a different before after plugin.
Hi,
Great plugin – great job! I can’t work out how to have both images on full screen. It seems to scale my right image. Please take a look here:
http://www.pwdconstruction.co.uk/projects/preparation-for-sale/
Please help.
Thank you.
Maciek
It does work with 4.4,
check here for a demo -> https://www.instruite.com/blog/2016/02/16/before-after-works/
Hi, Dear! Update plugin, please !!! Not sworking with wordpress 4.4
It does work with 4.4,
check here for a demo -> https://www.instruite.com/blog/2016/02/16/before-after-works/
O plugin foi abandonado? Pretendem lançar atualizações?
No updates were released as it works with latest wordpress versions as it is.
Thanks
After appyling this pulgin. The page is showing just one image. And jquery is not working
I am having a hard time on doing this before after image effect on my blog
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.
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.
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
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 !
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?
Link to issue: http://homes.banakasdesigns.com/test/
Is it possible to make the images responsive?
Hi Jennifer, I had the same question…
did you figure out how to make it responsive?
If so could you let me know how?
Nope. I ended up purchasing a similar plugin from codecanyon. It is responsive and works just the same.
Do you mind telling me which one you went with? Are you happy with the way it works on your site? Thanks so much!
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!
The issue is because of the below code in your css file
.article-content img, .article-content .gallery img, .pp-img-protect { margin-top:1px; }Thank you! So simple, yet I never would have realised that!
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
Amazing plugin – unbelievable,
congrats!!
Will there be an update to view in full screen? or bigger?
Can someone look at my page and tell me what could be wrong here is the link: http://www.edinchavez.com/blog/freebies
I don’t see two images on your website?
They are on there now, not sure what happened. http://www.edinchavez.com/blog/freebies
I still see only one image?
and also your page seem to have two html and head tags???
Can you share the code you are adding in your post for before-after?
Thanks
Im not sure what I am doing, I just add the photo on HTML as wordpress does it, here is what the codes are:
[beforeafter]
[/beforeafter]
Its not posting the code for some reason this is what it looks like for each image.
<img src="http://www.edinchavez.com/blog/wp-content/uploads/2013/06/20130514-DSC_4525_6_7-1024x683.jpg" alt="" width="1024" height="683" class="aligncenter size-large wp-image-5985 [ftmt_id]"can you remove the before after tags on the post and let me see two images on your post
Ok both photos are up, they are smaller that I usually post not sure if that matters but they are both up. Thank you again for looking at this.
Both of your photos are aligned center?
you need to align before image as alignleft (check the usage instructions of plugin or in above main post)
I have tried aligning them every way and it does not work. Not sure what my options are. Thank you for all your help.
Just downloaded this thing but its not working at all, any suggestions? than you in advanced for all your help
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?
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
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?
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