Sharraxaad
Von Oliver Deppe von 2FOX4.
2FOX4 Before After lets you create beautiful, interactive image comparisons with a draggable slider. Perfect for showcasing transformations, renovations, photo edits, and any kind of visual before/after comparison.
Features
- Three ways to use: Gutenberg Block, Shortcode, and Elementor Widget
- Two comparison modes: “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)
- Horizontal & Vertical mode: Choose the slider orientation that fits your layout
- Adjustable start position: Set where the divider appears on load (0–100%)
- Custom labels: Add “Before” and “After” text overlays (or any custom text)
- Divider color: Pick any color for the divider line and handle
- Hover mode: Slider follows the mouse cursor instead of requiring a drag
- Touch support: Works perfectly on mobile devices with touch gestures
- Loading animation: Smooth entrance animation when the slider appears
- Custom CSS class: Add your own class for additional styling
- Keyboard accessible: Navigate the slider with arrow keys
- Lightweight: No jQuery dependency on the frontend, pure vanilla JavaScript
Shortcode Usage
[bfas_before_after_slider before="URL" after="URL"]
Full example with all options:
[bfas_before_after_slider before="https://example.com/before.jpg" after="https://example.com/after.jpg" start="30" mode="reveal" orientation="horizontal" label_before="Before" label_after="After" divider_color="#ffffff" hover="0" animate="1" css_class="my-class"]
Shortcode Parameters
- before (required) — URL of the before image
- after (required) — URL of the after image
- start — Start position in percent (default: 50)
- mode — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.
- orientation — “horizontal” or “vertical” (default: horizontal)
- label_before — Text label for the before side
- label_after — Text label for the after side
- divider_color — Hex color for the divider (default: #ffffff)
- hover — Set to “1” to enable hover mode (default: 0)
- animate — Set to “1” for entrance animation (default: 0)
- css_class — Custom CSS class for the container
External services
This plugin includes a voluntary donation link that points to PayPal (paypal.com). The link is displayed inside an admin notice (“Buy me a coffee”) and does not transmit any data automatically. No connection to PayPal is made unless the site administrator clicks the link themselves.
- Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A.
- PayPal Terms of Service
- PayPal Privacy Policy
Xayndaabyo
Kaabahani wuxuu bixinaya 1 xayndaab.
- 2FOX4 Before After
Rakibaad
- Upload the plugin folder to the
/wp-content/plugins/directory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‘Plugins’ screen in WordPress.
- Use the Gutenberg block “2FOX4 Before After”, the Elementor widget, or the
[bfas_before_after_slider]shortcode to add image comparisons to your pages.
SBI
-
Does this plugin work with Elementor?
-
Yes! The plugin includes a native Elementor widget. After activation, you will find the “2FOX4 Before After” widget in the Elementor panel under the General category.
-
Does it work on mobile devices?
-
Yes, the slider has full touch support and works smoothly on all mobile devices and tablets.
-
Can I use multiple sliders on one page?
-
Yes, you can add as many sliders as you need. Each one works independently.
-
What image sizes should I use?
-
Both images should have the same dimensions for the best visual result. The slider will work with different sizes, but the comparison is most effective with matching images.
Dibu-eegisyo
Ma jiraan wax dibu-eegis ah oo ku saabsan kaabahan.
Ka-qaybgalayaasha & Horumariyayaasha
“2FOX4 Before After” waa softiweer il furan. Dadka soo socda ayaa wax ku biiriyay kaabahan.
Ka-qaybgalayaasha
Ku tarjun “2FOX4 Before After” luqaddaada.
Ma xiisaynaysaa horumarinta?
Baadh koodka, fiiri bakhaarka SVN, ama iska qor diiwaanka horumarinta adigoo adeegsanaya RSS.
Isbeddellada
1.1.3
- Fix: Corrected Plugin URI to point to a valid, publicly accessible URL.
- Fix: Replaced all phpcs:ignore escape comments with proper wp_kses() escaping for full WordPress.org compliance.
- Fix: Renamed shortcode from
before_after_slidertobfas_before_after_sliderto use a unique, prefixed name.
1.1.2
- Change: Renamed plugin from “Before After Slider” to “2FOX4 Before After” for WordPress.org uniqueness.
- Change: Updated slug and text domain to 2fox4-before-after.
1.1.1
- Fix: Properly escape translated output in donation notice (EscapeOutput compliance).
- Fix: Removed deprecated load_plugin_textdomain() call (unnecessary since WordPress 4.6).
- Fix: Updated “Tested up to” to WordPress 6.9.
- Fix: Prefixed data-nonce attribute to data-bfas-nonce for full prefix compliance.
1.1.0
- New: Added “Reveal” mode — both images stay fixed while the slider reveals one over the other.
- New: Mode selector available in Gutenberg Block, Elementor Widget, and Shortcode (mode=”reveal”).
1.0.0
- Initial release.