WordPress.org

한국어

워드프레스 다운로드
WordPress.org

Plugin Directory

Twenty20 Image Before-After

Twenty20 Image Before-After

작성자: Zayed Baloch
다운로드

설명

The Twenty20 plugin was created to allow users to swipe between two images, showcasing “before” and “after” comparisons. The plugin is designed to be fully responsive and user-friendly.

Features

  • Fully responsive across all devices.
  • No coding skills required.
  • Clean and intuitive user interface.
  • Add before-and-after comparisons to widgets.
  • Compatible with popular page builders.
  • Utilizes WP Image alt as image alt and title attributes.

Supported Page Builders

  • Flatsome UX Builder by UXThemes.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Shortcode Parameters

  • img1 – image ID.
  • img2 – image ID.
  • offset – range from 0.1 to 1.0.
  • direction – horizontal|vertical.
  • align – none|right|left.
  • width – supports both px and %.
  • before – text for the “before” label.
  • after – text for the “after” label.
  • hover – true or false.

스크린샷

  • Add a Twenty20 before-after image.
  • Select any two images from the Media Library.
  • Twenty20 shortcode settings page.
  • Shortcode.
  • Twenty20 in action.
  • Multiple sliders in different directions.
  • Twenty20 widget.
  • Widget in action.
  • WP Bakery Visual Composer settings.
  • Elementor element.
  • UX Builder 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

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%” before=”Before” after=”After” hover=”true”]

Shortcode Parameters

  • img1 – image ID.
  • img2 – image ID.
  • offset – range from 0.1 to 1.0.
  • direction – horizontal|vertical.
  • align – none|right|left.
  • width – supports both px and %.
  • before – text for the “before” label.
  • after – text for the “after” label.
  • hover – true or false.

How to add before-after slider?

Check the demo Video demo.

How do I add a widget?

Watch the video demo on YouTube.

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

Yes, the Twenty20 plugin allows users to add unlimited before-after sliders.

후기

ブロックエディター未対応

2023년 3월 24일
恐らく、このプラグインはブロックエディターに対応していないので、Gutenbergでは画像が挿入できないです。 あと、lazyload.jsや”loading=lazy”を使用すると、表示されなくなったり画像下に空白ができてしまったりするバグがあるため、画像表示が崩れます。

Suberb plugin!

2022년 3월 21일
Wonderful functionality for a photographer or photo re-toucher / editor. Easy to install and implement, may be caused by another plugin conflict it recently had stopped working. The support was very prompt, the developer was able to solve the issue right away!

Good job

2021년 9월 7일 답글 3개
Works fine under WPv5.8 and Enfoldv4.8.6 (little bit tricky with the internal builder but it’s ok)

Excellent plugin!

2021년 6월 3일
This plugin does exactly what it says on the tin and works straight out-of-the-box. Excellent stuff! Oh, and it also works perfectly on WP 5.7.2 – at least with my current selection of themes.
모든 55 평가 읽기

기여자 & 개발자

“Twenty20 Image Before-After”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

자국어로 “Twenty20 Image Before-After”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록을 RSS로 구독하세요.

변경이력

1.7.5

  • Fixed Elementor Widget

1.7.4

  • Fixed Elementor Widget

1.7.3

  • Bug fixes

1.7.2

  • Improve script

1.7.1

  • Bug fixes

1.7.0

  • Bug fixes

1.6.1

  • Bug fixes.

1.6.0

  • Security fixes, and passed in WordPress review.

1.5.9

  • Security fixes

1.5.8

  • Fix: Minor jQuery fix

1.5.7

  • Fix: WP 5.6 Uncaught TypeError (Thanks to @negru13)

1.5.6

  • Fix: Jetpack’s lazy load images issue

1.5.5

  • Fix: Widget mouse over.

1.5.4

  • Added: Integrated with WP Image alt.

1.5.3

  • Fixed cation overlay issue.

1.5.2

  • Fixed Before and After shortcode insert issue

1.5.1

  • Fixed loading issue

1.5

  • NEW: Add Elementor Page builder support.
  • NEW: Add UX Builder by UXThemes support.
  • Minor CSS fixes

1.4

  • NEW: ‘Move slider on mouse over’.

1.3

  • NEW: Image Before and After caption.
  • Fixed arrow shadow css.
  • Widget updated.

1.2

  • Fixed alignment bug

1.1

  • Fixed width issue

1.0

  • First Release

기초

  • 버전 1.7.5
  • 최근 업데이트: 2개월 전
  • 활성화된 설치 30,000+
  • 워드프레스 버전 5.5 또는 그 이상
  • 다음까지 시험됨: 6.6.2
  • PHP 버전 5.6 또는 그 이상
  • 언어
    English (US)
  • 태그:
  • 고급 보기

평점

모두 보기
평가를 제출하기 위해 로그인합니다.

지원

지난 2개월 동안 해결된 문제:

8 중 3

지원 포럼 보기

기부

이 플러그인이 발전하도록 도우시겠습니까?

이 플러그인에 기부하기