Title: Before After
Author: Hemant Nandrajog (instruite)
Published: <strong>2010 年 3 月 5 日</strong>
Last modified: 2016 年 2 月 16 日

---

搜索插件

**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

![](https://s.w.org/plugins/geopattern-icon/before-after.svg)

# Before After

 作者：[Hemant Nandrajog (instruite)](https://profiles.wordpress.org/instruite/)

[下载](https://downloads.wordpress.org/plugin/before-after.1.0.2.zip)

 * [详情](https://cn.wordpress.org/plugins/before-after/#description)
 * [评价](https://cn.wordpress.org/plugins/before-after/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/before-after/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/before-after/#developers)

 [支持](https://wordpress.org/support/plugin/before-after/)

## 描述

Before After plugin integrates modified version [jQuery Before/After Plugin](http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-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

Demosites:

[Demo with Latest version](https://www.instruite.com/blog/2016/02/16/before-after-works/)

[Operation on custom theme](http://www.instruite.com/blog/2011/05/18/photostrying-photoshop-filters/)

Author info:
 Follow me on [Twitter](http://twitter.com/instruite/) or become my
Friend on [facebook](http://www.facebook.com/instruite/) Also on [Google+](https://plus.google.com/108357740742566610994/)

#### 用法

 * 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
 * 1 photo should be left align when you insert the images on your post, the other
   one can be aligned right/center/none
 * 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.

## 安装

#### 必需条件

 * WordPress: 2.9 or newer

#### Auto Installation

 * Go to your blog’s WordPress Admin Panel -> Plugins -> Add New
 * Search for “before after instruite”
 * Click “Install now”

#### 配置

 * Go to your blog’s WordPress Admin Panel -> Options -> Before After
 * Set the parameters as per your requirements (should work with default parameters
   too)
 * See [Plugin Page](http://www.instruite.com/blog/2010/03/04/before-after-photo-effect-plugin/)
   for more details on configuration parameters

#### Manual Installation

 * Plugin folder in the WordPress plugins folder must be `before-after`
 * Upload folder `before-after` to the `/wp-content/plugins/` directory
 * 通过WordPress的的“Plugins”菜单激活插件
 * Check out ‘Other Notes’ for usage instruction.

## 常见问题

**_Before after effect is breaking on my site with Chrome or Safari Browser_**
 
This 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 Enable Automatic Detect Dimensions on Before After Options page
and reload your pages.

**_Issues with images not showing up or only one image being shown_**
 Make 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.

**_Issues with miss alignment of images/bar_**
 This 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.

## 评价

![](https://secure.gravatar.com/avatar/405e1c8549d6b8c894b3fc9b680c67f3fc18ebed0a68159ed2c5b9893acf8e4e?
s=60&d=retro&r=g)

### 󠀁[It works great!](https://wordpress.org/support/topic/it-works-great-116/)󠁿

 [wordonpress](https://profiles.wordpress.org/wordonpress/) 2018 年 10 月 30 日

Thanks for the plugin. Everything works perfectly!

![](https://secure.gravatar.com/avatar/86a71c1275b770e08d886a2f7a270f82e272839c86c65aaffffdc078157bfa11?
s=60&d=retro&r=g)

### 󠀁[loading ajax](https://wordpress.org/support/topic/loading-ajax/)󠁿

 [arnlig3550](https://profiles.wordpress.org/arnlig3550/) 2016 年 11 月 30 日

Hi Your plugin works it with a site using loading ajax ? Thanks

![](https://secure.gravatar.com/avatar/b7192ede94e0a0fda19fec20552a39409248d74bdc3b672841c54e9a82abdc98?
s=60&d=retro&r=g)

### 󠀁[Great idea. But doesn't work in WP 5, yet.](https://wordpress.org/support/topic/great-idea-but-doesnt-work-in-wp-5-yet/)󠁿

 [Clark](https://profiles.wordpress.org/cscooper/) 2016 年 9 月 3 日 3 回复

I like the simple idea of this plugin, and using it isn’t difficult, but alas, it
doesn’t work in Wordpress 5 in Chrome. In the end only two links show up on the 
final page: “Show only before” and “Show only after” links. The links do nothing
and there are no visible images.

 [ 阅读所有11条评价 ](https://wordpress.org/support/plugin/before-after/reviews/)

## 贡献者及开发者

「Before After」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ Hemant Nandrajog (instruite) ](https://profiles.wordpress.org/instruite/)

[帮助将「Before After」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/before-after)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/before-after/)，查看
[SVN仓库](https://plugins.svn.wordpress.org/before-after/)，或通过[RSS](https://plugins.trac.wordpress.org/log/before-after/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/before-after/)。

## 更新日志

#### 1.0.2

 * Bumping the version number
 * Updated readme file with new demo info and updated FAQs

#### 1.0.1

 * Minor Bug Fix

#### 1.0.0

 * 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

#### 0.1.5

 * Fixed the bug causing php error

#### 0.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

#### 0.1.3

 * Upgrade the original jquery.beforeafter to V1.2

#### 0.1.2

 * Fixed a bug causing the button to put shortcode not showing up in editor

#### 0.1.1

 * Fixed a bug caused by themes (like twentyten) which set max-width for images

#### 0.1.0

 * Changed to show effect on pages other than single post
 * Added activation and deactivation functions to add/delete options in wp-table

#### 0.0.3

 * No change in code just changing the version to push the upgrade

#### 0.0.2

 * Bug fix for Internet explorer

#### 0.0.1beta

 * Beta Release for Testing

## 额外信息

 *  版本 **1.0.2**
 *  最后更新：**10 年前**
 *  活跃安装数量 **100+**
 *  WordPress 版本 ** 2.9 或更高版本 **
 *  已测试的最高版本为 **4.4.34**
 *  语言
 * [English (US)](https://wordpress.org/plugins/before-after/)
 * 标签
 * [after](https://cn.wordpress.org/plugins/tags/after/)[before](https://cn.wordpress.org/plugins/tags/before/)
   [photo effects](https://cn.wordpress.org/plugins/tags/photo-effects/)[photoblog](https://cn.wordpress.org/plugins/tags/photoblog/)
   [photos](https://cn.wordpress.org/plugins/tags/photos/)
 *  [高级视图](https://cn.wordpress.org/plugins/before-after/advanced/)

## 评级

 4.6 星（最高 5 星）。

 *  [  10 条 5 星评价     ](https://wordpress.org/support/plugin/before-after/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/before-after/reviews/?filter=4)
 *  [  0 条 3 星评价     ](https://wordpress.org/support/plugin/before-after/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/before-after/reviews/?filter=2)
 *  [  1 条 1 星评价     ](https://wordpress.org/support/plugin/before-after/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/before-after/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/before-after/reviews/)

## 贡献者

 *   [ Hemant Nandrajog (instruite) ](https://profiles.wordpress.org/instruite/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/before-after/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](http://www.icnd.info)