TwentyTwenty
HTML
<script src="http://zurb.com/playground/uploads/upload/upload/92/jquery.twentytwenty.js"></script>
<script src="http://zurb.com/playground/uploads/upload/upload/91/jquery.event.move.js"></script>
<a href="#" class="openthis">Show This</a>
<div id="content">
<div id="container1">
<img src="https://placeholdit.imgix.net/~text?txtsize=84&txt=BEFORE&w=900&h=650">
<img src="https://placeholdit.imgix.net/~text?txtsize=84&txt=AFTER&w=900&h=650">
<img src="https://placeholdit.imgix.net/~text?txtsize=84&txt=CCCCCCCCC&w=900&h=650">
</div>
</div>
CSS
@import url("http://zurb.com/playground/uploads/upload/upload/93/twentytwenty.css");
JavaScript
$(document).ready(function() {
$("#container1").twentytwenty();
// hide here after twentytwenty load in this div.
$("#content").hide("fast");
$(".openthis").click(function() {
$("#content").show("slow");
});
});
//http://stackoverflow.com/questions/30912559/initiate-twentytwenty-js-after-a-div-is-shown-thru-a-click