{"id":8334,"date":"2010-03-05T17:52:02","date_gmt":"2010-03-05T17:52:02","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/before-after\/"},"modified":"2016-02-16T07:23:46","modified_gmt":"2016-02-16T07:23:46","slug":"before-after","status":"publish","type":"plugin","link":"https:\/\/azb.wordpress.org\/plugins\/before-after\/","author":532758,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.2","stable_tag":"1.0.2","tested":"4.4.34","requires":"2.9","requires_php":"","requires_plugins":"","header_name":"Before After","header_author":"Hemant Nandrajog","header_description":"","assets_banners_color":"","last_updated":"2016-02-16 07:23:46","external_support_url":"","external_repository_url":"","donate_link":"http:\/\/www.icnd.info","header_plugin_uri":"http:\/\/www.instruite.com","header_author_uri":"http:\/\/www.instruite.com","rating":4.6,"author_block_rating":0,"active_installs":100,"downloads":17862,"num_ratings":11,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.0.0":"<ul>\n<li>In case before after page breaks deactivate and reactivate the plugin once<\/li>\n<\/ul>","0.1.x":"<ul>\n<li>If you can not see the effects after the automatic upgrade, try deactivating and then reactivating the plugin<\/li>\n<\/ul>"},"ratings":{"1":"1","2":0,"3":0,"4":0,"5":"10"},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.0.1","0.0.2","0.0.3","0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5","1.0.0","1.0.1","1.0.2"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[9562,11617,11618,1430,205],"plugin_category":[50],"plugin_contributors":[83121],"plugin_business_model":[],"class_list":["post-8334","plugin","type-plugin","status-publish","hentry","plugin_tags-after","plugin_tags-before","plugin_tags-photo-effects","plugin_tags-photoblog","plugin_tags-photos","plugin_category-media","plugin_contributors-instruite","plugin_committers-instruite"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/before-after.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>Before After plugin integrates modified version <a href=\"http:\/\/www.catchmyfame.com\/2009\/06\/25\/jquery-beforeafter-plugin\/\" title=\"jQuery Before\/After Plugin\">jQuery Before\/After Plugin<\/a> in the wordpress.\nIt can be used to show the difference between edited and original photo, before and after photos of changes, etc.<\/p>\n\n<p>Please check 'Other Notes' for the Usage instructions to see how to use it on your blog<\/p>\n\n<p>Demosites:<\/p>\n\n<p><a href=\"https:\/\/www.instruite.com\/blog\/2016\/02\/16\/before-after-works\/\" title=\"Demo with Latest version\">Demo with Latest version<\/a>\n<a href=\"http:\/\/www.instruite.com\/blog\/2011\/05\/18\/photostrying-photoshop-filters\/\" title=\"Operation on custom theme\">Operation on custom theme<\/a><\/p>\n\n<p>Author info:\nFollow me on <a href=\"http:\/\/twitter.com\/instruite\/\" title=\"Follow instruite on twitter\">Twitter<\/a> or become my Friend on <a href=\"http:\/\/www.facebook.com\/instruite\/\" title=\"Instruite's Facebook page\">facebook<\/a>\nAlso on <a href=\"https:\/\/plus.google.com\/108357740742566610994\/\" title=\"Follow instruite on Google+\">Google+<\/a><\/p>\n\n<h4>Usage<\/h4>\n\n<ul>\n<li>Write the content of your post other than the images<\/li>\n<li>Switch to 'HTML-editor' mode of the post editor area<\/li>\n<li>Click 'BeforeAfter' button (This will start the '[beforeafter]' shortcode)<\/li>\n<li>Add the photos to your post through the wordpress image\/media uploader<\/li>\n<li>1 photo should be left align when you insert the images on your post, the other one can be aligned right\/center\/none<\/li>\n<li>The 'left-aligned' photo is taken as before photo so please align your photos accordingly<\/li>\n<li>After you have inserted the two images in the post Click 'BeforeAfter' button again to close '[\/beforeafter]' shortcode.<\/li>\n<li>You can add more content to your post after closing the '[\/beforeafter]' shortcode<\/li>\n<li>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.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<h4>Requirements<\/h4>\n\n<ul>\n<li>WordPress: 2.9 or newer<\/li>\n<\/ul>\n\n<h4>Auto Installation<\/h4>\n\n<ul>\n<li>Go to your blog's WordPress Admin Panel -&gt; Plugins -&gt; Add New<\/li>\n<li>Search for \"before after instruite\"<\/li>\n<li>Click \"Install now\"<\/li>\n<\/ul>\n\n<h4>Configuration<\/h4>\n\n<ul>\n<li>Go to your blog's WordPress Admin Panel -&gt; Options -&gt; Before After<\/li>\n<li>Set the parameters as per your requirements (should work with default parameters too)<\/li>\n<li>See <a href=\"http:\/\/www.instruite.com\/blog\/2010\/03\/04\/before-after-photo-effect-plugin\/\" title=\"Before After Plugin Page\">Plugin Page<\/a>for more details on configuration parameters<\/li>\n<\/ul>\n\n<h4>Manual Installation<\/h4>\n\n<ul>\n<li>Plugin folder in the WordPress plugins folder must be <code>before-after<\/code><\/li>\n<li>Upload folder <code>before-after<\/code> to the <code>\/wp-content\/plugins\/<\/code> directory<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress<\/li>\n<li>Check out 'Other Notes' for usage instruction.<\/li>\n<\/ul>\n\n<!--section=faq-->\n<p><strong><em>Before after effect is breaking on my site with Chrome or Safari Browser<\/em><\/strong><br \/>\nThis effect requires image height and width to be specified with images, if your img tags conatins those parameters and stil you are having issues with Chrome or Safari web browsers\nEnable Automatic Detect Dimensions on Before After Options page and reload your pages.<\/p>\n\n<p><strong><em>Issues with images not showing up or only one image being shown<\/em><\/strong><br \/>\nMake sure code for both images \"img\" tag are with in the beforeafter shortcode and one image (image supposed to be before image) has \"alignleft\" text in \"class\" attribute of the \"img\" tag.<\/p>\n\n<p><strong><em>Issues with miss alignment of images\/bar<\/em><\/strong><br \/>\nThis are mostly due to css issues of the theme. Check the post with default wordpress theme and if it works then you will need to customize css of your theme.<\/p>\n\n<!--section=changelog-->\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Bumping the version number<\/li>\n<li>Updated readme file with new demo info and updated FAQs<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Minor Bug Fix<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Total revamped of code<\/li>\n<li>Using modified version of Jquery Before After original script to V1.3<\/li>\n<li>Added options page<\/li>\n<li>Before After Javascripts options can be provided through shortcode attributes now<\/li>\n<\/ul>\n\n<h4>0.1.5<\/h4>\n\n<ul>\n<li>Fixed the bug causing php error<\/li>\n<\/ul>\n\n<h4>0.1.4<\/h4>\n\n<ul>\n<li>Changed code to use JScripts bundeled with Wordpress<\/li>\n<li>Modified the beforeafter.js for a fix for depreceated function<\/li>\n<li>bug in image cause image height to default to 0<\/li>\n<\/ul>\n\n<h4>0.1.3<\/h4>\n\n<ul>\n<li>Upgrade the original jquery.beforeafter to V1.2<\/li>\n<\/ul>\n\n<h4>0.1.2<\/h4>\n\n<ul>\n<li>Fixed a bug causing the button to put shortcode not showing up in editor<\/li>\n<\/ul>\n\n<h4>0.1.1<\/h4>\n\n<ul>\n<li>Fixed a bug caused by themes (like twentyten) which set max-width for images<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Changed to show effect on pages other than single post<\/li>\n<li>Added activation and deactivation functions to add\/delete options in wp-table<\/li>\n<\/ul>\n\n<h4>0.0.3<\/h4>\n\n<ul>\n<li>No change in code just changing the version to push the upgrade<\/li>\n<\/ul>\n\n<h4>0.0.2<\/h4>\n\n<ul>\n<li>Bug fix for Internet explorer<\/li>\n<\/ul>\n\n<h4>0.0.1beta<\/h4>\n\n<ul>\n<li>Beta Release for Testing<\/li>\n<\/ul>","raw_excerpt":"Before After plugin integrates modified version [jQuery Before\/After Plugin](http:\/\/www.catchmyfame.com\/2009\/06\/25\/jquery-beforeafter-plugin\/ &quot;jQ &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/8334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=8334"}],"author":[{"embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/instruite"}],"wp:attachment":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=8334"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=8334"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=8334"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=8334"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=8334"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=8334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}