Twenty20 Image Before-After

説明

Twenty20 is the WordPress plugin of TwentyTwenty script that developed by Zurb team.

This sparked a few new ideas on how to do something similar for our own needs. It had to swipe between two images to show “before” and “after”. Most of all, it had to be responsive.

Features

  • Responsive and functional on all devices.
  • Doesn’t require images to work.
  • Easy and clean user interface
  • Add before-after on widgets.
  • Support WP Bakery Visual Composer.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%"]

Shortcode Parameters

  • img1 – image id.
  • img1 – image id.
  • offset – 0.1 to 1.0.
  • directionhorizontal|vertical.
  • alignnone|right|left.
  • width – Support both px and %.

Video Demo

スクリーンショット

  • Add Twenty20 before-after image.
  • Select any two images fro Media libray.
  • Twenty20 Shortcode setting page.
  • Shortcod.
  • Twenty20 in action.
  • Multiple slider in different direction.
  • Twenty20 Widgest.
  • Widget in action.
  • WP Bakery Visual Composer settings.
  • Visual Composer element.

インストール

  1. Unzip the download package
  2. Upload twenty20 to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

Manual Plugin Installation

  1. Download Twenty20 Plugin to your desktop.
  2. If downloaded as a zip archive, extract the Plugin folder to your desktop.
  3. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  4. Go to Plugins screen and find Twenty20 Plugin in the list.
  5. Click Activate Plugin to activate it.

FAQ

Installation Instructions
  1. Unzip the download package
  2. Upload twenty20 to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

Manual Plugin Installation

  1. Download Twenty20 Plugin to your desktop.
  2. If downloaded as a zip archive, extract the Plugin folder to your desktop.
  3. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  4. Go to Plugins screen and find Twenty20 Plugin in the list.
  5. Click Activate Plugin to activate it.
How it works?

Twenty20 works by stacking two images on top of each other. As the slider moves across the image.

Quick Example

[twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=”60%”]

Shortcode Parameters
  • img1 - image id.
  • img1 - image id.
  • offset - 0.1 to 1.0.
  • direction - horizontal|vertical.
  • align - none|right|left.
  • width - Support both px and %.
How to add before-after slider?

Check the demo Video demo.

How to add widget

Check the demo Video demo.

Can I use more than one slider in single post or page

Yes, Twenty20 plugin allow user to add unlimited before-after slider.

評価

Plugin Simply Does NOT WORK.

I cannot use this plugin. When I add it as a widget on a page and I attempt to click “Add Image”, nothing happens.

When I try to add the shortcode and insert the image URL’s in the before and after areas, nothing appears on the page.

This plugin is nothing but pure frustration.

Ok, it works. But…

If you place multiple instances of before-after images on one page, the html gets all messed-up. On every instance of a before-after image you get a total number of handles as there are before-after images on your page. This is very noticable at the (subtle) shadow effect that is repeated over and over and thus becoming darker and darker. Also page load becomes slower and slower.
Planning to use multiple before-after images on one page?
Then skip this plugin, and get the original Zurb scripts and css.

Perfect and works well

Thank you for this simple yet great plugin. please keep update and make it compatible with new WordPress versions because it will encourage more people to use it if you take care of it regularly.

nearly perfect!

Works with WP 4.9.1 and the best is: It’s ‘visual composer’ compatible!
One star less for missing alt attribute.

20件のレビューをすべて表示

貢献者と開発者

Twenty20 Image Before-After はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Twenty20 Image Before-After” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.2

  • Fixed alignment bug

1.1

  • Fixed width issue

1.0

  • First Release