before after


here is the code:

 

--------------

<script src="/s/jquery-210min.js" type="text/javascript"></script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jquerytwentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />


<div id ='twentyBox' class='twentytwenty-container'>
  <img src="ImageURL" alt="before" />
  <img src="ImageURL" alt="after" />    
</div>


<script>
        $(window).load(function(){
          $("#twentyBox").twentytwenty();
        });
</script>

--------------

paste this one to inject/import, header  and also to page setting in advanced:
<script src="/s/jquery-210min.js"></script>
<script src="/s/twentytwenty.css"></script>
<script src="/s/jqueryeventmove.js"></script>
<script src="/s/jquerytwentytwenty.js"></script>

---------------

you can use public folder in drop box to do so which i do recommend  it, because you can have different folder for different images

-------------

source:

http://zurb.com/playground/twentytwenty

https://github.com/zurb/twentytwenty

 


Hello, World!