Image Comparison Component

How it works

TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left.

Download TwentyTwenty

Visit zurb.com and click the Download TwentyTwenty button before saving the 'twentytwenty-master.zip' archive and unpacking.

Attach the plug-in

You will have access to the 'css' and 'js' folders. These must be attached to the top and end of your HTML page as follows, along with the latest jQuery CDN link.

012  <header>
014  <!-- Add this in the <header> -->
013  <link href="styles/twentytwenty.css" rel="stylesheet" type="text/css" />
014  </header>

     <!-- Add this before the end of </body> -->
478  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
479  <script src="scripts/jquery.event.move.js"></script>
480  <script src="scripts/jquery.twentytwenty.js"></script>
481  </body>

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. Embed them inside a <div> element within the of your page.

365  <div class="twentytwenty-container" data-orientation="vertical">
366     <img src="media/1_1.jpg" />
367     <img src="media/1_2.jpg" />
368  </div>

Call the plug-in

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.

504  <script>
505  $(window).load(function(){
504  $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
     $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});});
504  </script>

Responsive

This is a jQuery plugin that allows you to create an high quality justified gallery of images. Fill all the spaces! It works perfectly on mobile and tablets devices.

How it works

Justified Gallery accepts a standard format for a gallery. Simply add your images as shown in the code below.

159  <div id="mygallery">
160  <div>
161  <img alt="Title 1" src="path/to/myimage1_t.jpg"/>
162  </div>
163  <div>
163  <img alt="Title 2" src="path/to/myimage2_t.jpg"/>
164  </div>
165  </div>

Files to include

The plugin only needs jQuery. Then you have only to include the Justified Gallery's files as the following:

015  <link rel="stylesheet" href="styles/justifiedGallery.css" />
016  <script src="scripts/jquery.justifiedGallery.js"></script>

Just a Call

Now, you only need to call the plugin that will justify all the images, with the default options.

207  $('#mygallery').justifiedGallery({
208		rowHeight : 300,
209 	lastRow : 'nojustify',
210		margins : 0
211  });

Text transition

Textualizer builds a creative transition from one paragraph to another.

Files to include

Download the jQuery CDN as well as the textualizer.js and include the files as the following:

311  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
312  <script src="scripts/textualizer.min.js"></script>
312  <script src="scripts/textualizer.js"></script>

Call the function

Add the following function in the header and replace the text items from "var list". You can make also change the duration or the effects if the text transition.

021  $(function() {
022  var list = ['Textualizer is a', 'jQuery plug-in', 'that allows you', 'to transition through', ' 021  023  blurbs of text.'];  // list of blurbs
024  
025  var txt = $('#output');  // The container in which to render the list
026  
027  var options = {
028    duration: 400,          // Time (ms) each blurb will remain on screen
029    rearrangeDuration: 200, // Time (ms) a character takes to reach its position
030    effect: 'random',        // Animation effect the characters use to appear
031    centered: true           // Centers the text relative to its container
032  }

Add a style

Create a style sheet and embed the equivalent id or class in your html code. Note that the name of the id or class must match the one that is listed in the function above.

001  #output {
002  color: cyan;
003  font-size: 160px;
004  line-height: 1;
005  font-weight: 700;
006  text-align: center;
007  text-transform: uppercase;
008  height: 200px;
009  }