Before & nach Shortcodes

Smooth Version

Just move the mouse over the image or swipe on touch devices.

  1. Before
  2. After
Hier den Code

[before_after width="719" height="404" before_src="/wp-content/uploads/2013/06/banda_before_1_v01.png" after_src="/wp-content/uploads/2013/06/banda_after_1_v01.png"]

Flip Version

Click the handler at the bottom.

  1. Before
  2. After
Hier den Code

[before_after width="719" height="404" before_src="/wp-content/uploads/2013/06/banda_before_1_v01.png" after_src="/wp-content/uploads/2013/06/banda_after_1_v01.png" type="flip"]

Hover

Hover over the image to show its alternative version.

  1. Before
  2. After
Hier den Code

[before_after width="719" height="404" before_src="/wp-content/uploads/2013/06/banda_before_1_v01.png" after_src="/wp-content/uploads/2013/06/banda_after_1_v01.png" type="hover"]

Short Dokumentation

  • Ich würde
    Das id-Attribut gibt eine ID für ein HTML-Element.
    Es muss innerhalb des HTML-Dokuments eindeutig sein.
    (Vor allem für zusätzliche Styling / scripting Zwecke)
  • Klasse
    Die Klasse Attribut gibt einen Klassennamen für ein HTML-Element.
    (Vor allem für zusätzliche Styling / scripting Zwecke)
  • type
    Verfügbare Optionen:
    • smooth - Splitted image
    • flip - Flip image on click
    • hover - Change on hover
  • before_src
  • after_src
  • width
    The width in pixels
  • height
    The height in pixels