Download TwentyTwenty

For the image comparison widget on StudioIndoor.pl, Karol uses a jQuery plug-in called TwentyTwenty by ZURB. Here we will show you the basics of setting up this neat component as well as certain CSS tweaks for overriding the default styles as desired. Begin by visiting zurb.com/playground/twentytwenty and clicking the Download TwentyTwenty button before saving the ‘twentytwenty-master.zip’ archive and unpacking.

Attach the plug-in

With the archive unzipped you will crucially have access to the ‘css’ and ‘js’ folders. From these you need to copy the ‘twentytwenty.css’ file as well as both the j’query.twentytwenty.js’ file and the bundled ‘jquery.event.move.js’ plug-in to enable the 1:1 slider movements that TwentyTwenty utilises. These must be attached to the top and end of your HTML page as follows, along with the latest jQuery CDN link.

Ready the images

For the images you’ll want a pair of identical size pictures, most likely showing the same subject but with subtle differences between them.We have two shots, both with dimensions of 720 x 540px, named ‘before_shot.jpg’ and ‘after_shot.jpg’. Place your images in the page root and embed them inside a <div> element within the <body> of your page. Set a suitable id for the <div> as we will pass this into the plug-in function. Adding the CSS class ‘twentytwenty-container’ is optional for avoiding a Flash Of Unstyled Content (FOUC).

Call the plug-in

Here we are basically attaching the main twentytwenty() function to the <div> element containing our images, upon page load. Add a new <script> tag, inserting the following small snippet of code below between them. Make sure this goes after the <script> tags added in Step 2, just before your page’s closing HTML tag. Notice we can add the default_offset_pct option parameter to set where the drag handle appears by default – this is optional.

Layout fix

Should you save and test now in your browser, it’s likely the default grey hover overlay will overflow the container. To avoid this we can simply place a containing <div> around ‘#twentyBox’ and set the size via CSS to wrap exactly the images. In our example we have it centred and with a grey padding border. Whatever subsequent page styling you choose, the component itself should be working as expected.

Override default styles

Styling of the twentytwenty component can be further customised by overriding certain CSS classes from ‘twentytwenty.css’. These can be added to your page <head> or you could edit the file itself to make more definite changes. The CSS example below basically changes the hover overlay colour to yellow and the hover labels to blue. You will notice that the label text can also be edited.