News

Use the TwentyTwenty jQuery plugin to build an image comparison component

Recreate the image comparison widget found on the StudioIndoor.pl website

twentytwenty608

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.

001    <head>
002    <link href=”twentytwenty.css”     rel=”stylesheet” type=”text/css” />   …
003    </body>
<script src=”http://code.jquery.com/    jquery-1.10.1.min.js”></script>
004    <script src=”http://code.jquery.com/jquery-migrate-1.2.1.min.js”></script>
005    <script src=”jquery.event.move.    js”></script>
006    <script src=”jquery.twentytwenty.    js”></script>
007    </html>

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).

001    <body>      
<div id=’twentyBox’ class=’twentytwenty-container’>
002        <img alt=”Esprit Photo”         src=”before_shot.jpg” height=”540”     width=”720”>
003        <img alt=”Esprit Negative”     src=”after_shot.jpg” height=”540”     width=”720”>
004    </div>

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.

001    <script>
002        $(window).load(function(){
003                  $(“#twentyBox”).        twentytwenty({default_offset_pct: 0.6});
004      });
005    </script>
006    </html>
007

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.

001    CSS:
002    .myContainer    {
003    background:#999;
004    margin:10px auto;
005    width:720px;
006    height:540px;
007    padding:30px 40px;
008    HTML:
009    <div class=”myContainer”>
010    <div id=’twentyBox’             class=’twentytwenty-container’>    
011    <img alt=”Esprit Photo” src=”before_shot.jpg” height=”540” width=”720”>
012    <img alt=”Esprit Negative”         src=”after_shot.jpg” height=”540”     width=”720”>
013    </div>
014    </div>

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.

001    .twentytwenty-before-label:before,     .twentytwenty-after-label:before {
002        background: rgba(28, 23, 230,        0.3);
003    }
004    .twentytwenty-overlay:hover {  
005        background: rgba(230, 198, 23,        0.5);
006    }
007    .twentytwenty-before-label:before {
008        content: “PHOTO”;
009    }
010    .twentytwenty-after-label:before {    011        content: “NEGATIVE”;
012    }
013
×