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:
- 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
Posted under: Plugins, Wordpress
Tagged with: after, before, before-after, jquery, open source, photo effects, plugins, software, Wordpress
232 Responses to “Before-After Photo Effect Plugin”
Leave a Reply
- Bob said: How do I left align the image? Also, I have a gall...
- Bob said: Having trouble with the before after plugin....
- Chris R said: hi again, can you please help me with this prob...
- Lisek said: Hi, thanks for this plugin, I really enjoy it! I ...
- gabe said: is it possible to have thumbnails with this?...
- Chris R said: great! thanks a million :) i deleted the max-with ...
2009
android
apple
bandwidth
birthday
budget
cartoon
Celebrations
dedicated server
docomo
entertainment
Flickr
Gadgets
Hanabi
hello world
Hiroshima
human art
India
introduction
iphone
iweb
Japan
memory
mobile
motorolla
Networking
nita
ntt
open source
photo effects
photography
photos
plugins
politics
processor
ram
server
Social
softbank
software
Technology
unmetered
video
Webmaster
Wordpress
How do I left align the image? Also, I have a gallery – can I use the before after plugin in a gallery?
Hi,
thanks for this plugin, I really enjoy it! I use it to show changeover in Warsaw (Poland).
My problem is with cursor. On Chrome is correct, but on Firefox there is a little error.
Please help
http://zawinklem.pl/zabkowska-w-oparach-absurdu/
is it possible to have thumbnails with this?
hi! i really like your plugin and i need to make it work properly on my wp website.
i have problmes with the before photo and with the cursor… can you help me out please?
http://crdesign.ro/graphics/artworks/
Hello Chris,
The problem is due to
max-width: 100%setting for#page imgin yourwp-content/themes/invictus_2.6.6/css/responsive.css?ver=3.5.1fileThanks
great! thanks a million
i deleted the max-with row, hope this does not effect on mobile devices? or it does? 
hi again,
can you please help me with this problem?
Fatal error: Call to a member function attributes() on a non-object in /home/crdesign/public_html/wp-content/plugins/youtube-channel-gallery/youtube-channel-gallery.php on line 636
it;s on http://crdesign.ro/motion-graphics/event-promos/ page.
thank you
I’ve only managed to get it sort of working in wordpress.. but it’s zooming in on the after photo.. what am I doing wrong?
http://paulpichugin.com/test/
Its because in your style.css
.text img.size-auto, .text img.size-large, .text img.size-medium, .text attachment imghasmax-width:100%setting which is automatically adjusting the before imageHi!
Excellent plugin!
Version 1.4 works fine for me with TwentyEleven theme.
Tried to upgrade to 1.5.1 but this causes trouble.
I’m also using Highslide plugin (image viewer) and it starts to behave strange. Window opens and sticks to mouse pointer. Only on version 1.5.1 as i said.
Is there something worth upgrade in version 1.5.1 or nothing significant and i can stay on 1.4?
Especially title to be indexed by search engines or smth..
You can use which ever version work for you.
On this site I am using the latest version and its working fine
Many thanks for a fantastic plugin!
Glad it was useful for you.
To all the plugin users, Plugin is working with latest wordpress version 3.5.1
Check this page http://www.instruite.com/blog/2011/05/18/photostrying-photoshop-filters/
In case if it does not work on your site first check if it works with default wp theme.
Thanks
Hi
The plugin seems really great, but for me it seems to work only on Firefox. On Chrome and Safari I only see the “see only before/after” text. On Explorer a small box wit nothing inteligible inside.
Any clue?
[beforeafter][/beforeafter]
https://nomadfoto.com/the-photo-lab-retouch-digital-darkroom/
I could not see plugin been enabled on your page?
Hi, it seems people mostly leave a comment when they have a problem, so I thought it was important to take the time to say the plugin is brilliant and works flawlessly on my custom WP design. Thanks so much for making such an impressive image feature available to all of us!
Glad to know you liked it.
I’m using the plugin but I have two issues. 1. There the divider bar sticks out on the top. 2. the before after picture does not look good on mobile browsers. is there an easy way to fix ths while formating my posts?
Can you point to the page where you are trying the plugin?
hallo i create a sit and i really like your plug in but for me doesnt look ok and i cannot fix it.
i will start from the beggining.If my theme it is twenty eleven the plug in work great the site i make i want to have theme of elegantthemes.com and i have the theme aggregate and with that them the plug in is not ok.
any suggestion how i can fix it? thanks!!!!
Excellent plug-in. I”ve never had any problems until now. The “after” will no longer load. I have only updated to the most recent version of WordPress. I have not changes anything with my images. I’m using the same images I have from the beginning. Today, while browsing my site, I notice the after images are not loading at all. Please help.
Thanks in advance!
Hello I would like to first congratulate Pello excellent plugin. But can you tell me why the slider is not working in this link: http://www.portalveneza.com.br/nova_veneza/linha-do-tempo-igreja-matriz-sao-marcos/
A great idea for a plugin, and I’m very excited about using it. Alas, I cannot get it to work. The handle does not move. The page I’m testing on is this one: http://www.phrasikleia.com/temporary9/
Any idea why it’s not working for me? Thanks so much for creating this plugin. I have high hopes for it!
The handles seems to be working fine?
[...] Before/After WordPress Plugin can be used to show the difference for example between edited and original photo. I think [...]
First off, thank you for creating this plugin. As you can probably guess, I am writing in because I am having some difficulty and wondering if you could help me out. I followed the instructions on its use, both images are showing, however when you drag the slider, it actually scales the image instead of just wiping on top of the old one. I am running the latest version of WP (3.4.2) with a theme called Weaver II Pro. Although I am getting inconsistent results between Chrome, IE, and Firefox, none appear to work correctly. Any thoughts are appreciated. Here is a link to the test page:
http://landidentity.com/test-4/
Thanks in advance
Hey Gregg I’m having the same trouble. Were you able to find a solution?
I am having issues with the images loading. Everything seems to be working fine, however it will take a few refreshes until the 2 images will actually be visible and load up on the slider. Any idea how to problem solve this? Seems to work best on Firefox, but Chrome and Safari are causing issues. Sounds like I’m not the only one here with this issue either?
hi i love this slider and figured out how to use it on my wordpress site- but can i somehow use these in a gallery? Something like on this site- curveditigal.eu then to ‘our images revealed’ then to ‘auto’ and see the thumbnails that open into this slider- is this possible?
Hi,
But, I have a small problem with it. Take a look here:
First of all, thanks a lot for the plugin. It is very easy to use and saved me some trouble
http://www.dawnotemuwkrakowie.pl/dawnotemu/ul-sw-krzyza-1/
The slider works, but small part of the image is cut off at the bottom (15-20px) and there is a gap of the same size at the top. It does not depend on the image size I set.
By trial and error I figured out that this happens if I align one picture to the left and the other one to the right or center. If I align one to the left and the other one I set to none, the latter will display correctly, but since the first image is too low it looks bad.
I added example on the website for you to look at.
Could you please take a look at this and help me troubleshoot?
Regards
Jakub
You will need to adjust the css of the images so that both images have no or same padding and margins
Look at the configuration options and instructions for the plugin.
Thx a lot, margins were the issue. If anyone else runs into this problem, here is my solution. I pasted this into custom css code box in plugins configuration:
.ba-container div img {max-width: none; margin:0px;}
I’m using the before after plugin on my site, justwalkedby.com.
but it dosen’t seam to work.
can yo uplease help me out here.
here is the post I used the plugin on.
http://www.justwalkedby.com/2012/09/sumba-view/
Thanks
Bo
Hello Bo,
You need to provide proper image directory location for handle and arrow images since you seem to have moved them
Also you need to add two images within before after short code looking at your site one image seems to be missing
Thanks for your quick reply.
I moved back the image folder to default, and added my two before after photos in that same folder.
which I them link to between the beforeafter tags.
But it still dosen’t seem to work out for me.
What else am I doing wrong.
B.
I don’t know how but now it seams to be working fin.
thank you for a great plugin
B.
Hello, im currently using your plugin in that WordPress page http://www.digitalking.it/fxmypics/fx-library/ but it doesn’t show inside the lightbox popup (im using Easy FancyBox plugin), it works nice outside the popup.
How i can handle it?
Thanks
Hello Simone,
It will not work inside the lightbox and have no plan to add that feature.
Thanks
On my site I had a couple of plugin problems, so I disabled and enabled all plugins – But unfortunately I forgot to note the custom CSS added to my before after.
There is a strange offset on all my before/after, and I thought there was a soulution on the WordPress Plugin page, but I cant find it.
Please tell me how to avoid the offsetting:
http://www.photofolio.dk/aldo-stiletter/
regards,
Michael
I figured it out, found the following custom CSS for the plugin:
.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; margin: 0;}
The margin: 0 for .ba-container div img was also added to remove the offset.
You’re a cool guy Michael! It also worked for me.
Woo Hoo! I don’t know what this is and how you did it but this test worked!! Thanks!
Rad Plugin eh!!!
Glad to know it worked out for you
got the before and afters but the slider isnt moving … http://www.carlpardue.com/?p=1093
please help..
thanks.
In you case I think it is because of jQuery UI script being loaded twice
You need to get rid of this second script being loaded
script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js?ver=3.4.2'>< /script>