Sridhar Katakam

Genesis and WordPress Tutorials

Before and After Slider in WordPress using ZURB TwentyTwenty

by 2 Comments

TwentyTwenty is a jQuery plugin from ZURB that can be used to show multiple sets of before/after images with the images appearing superimposed on each other. Dragging a vertical bar horizontally left and right reveals the before and after image respectively.

In this tutorial, we shall load the files needed for ZURB TwentyTwenty draggable before-after images slider manually only where needed and go through the process of implementing it in WordPress.

Screencast:

Step 1

Upload jquery.event.move.js and jquery.twentytwenty.js to child theme's js directory.

Upload twentytwenty.css to child theme's css directory (create, if not existing).

Step 2

Edit jquery.twentytwenty.js (this step may not be needed in a future version of the script).

Below

container.css("height", offset.h);

add

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • >