TwentyTwenty - jQuery Plugin to Compare Images

TwentyTwenty - jQuery Plugin to Compare Images

• Responsive and functional on all devices
• Doesn't require images to work
• Works with Foundation out of the box

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: zurb.com

1. INCLUDE JS AND CSS FILES

<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />

2. HTML

<div id="container1">
 <!-- The before image is first -->
 <img src="http://placehold.it/400x200&text=1" />
 <!-- The after image is last -->
 <img src="http://placehold.it/400x200&text=2" />
</div>

3. JAVASCRIPT

$(window).load(function(){
  $("#container1").twentytwenty();
});

4. OPTIONS

$(window).load(function(){
  $(".twentytwenty-container").twentytwenty({
    default_offset_pct: 0.7, // How much of the before image is visible when the page loads
    orientation: 'vertical' // Orientation of the before and after images ('horizontal' or 'vertical')
  });
});