Before/After Photo Slider

Here's what we use http://lancasteronline.com/before-and-after-of-deadly-home-explosion-in-manor-township/html_867fffc2-5ff8-11e7-b357-a74cc46b8066.html

I don't know that's it any better or worse than JuxtaposeJS. It's just what we found when we first started doing this a few years ago.

Our code uses jQuery UI and copies of jQuery UI Touch Punch and the jQuery beforeafter plugin that live in our /app directory. https://lancasteronline.com/app/beforeafter also has the green slider (handle.gif) and white arrows (lt-small.png, rt-small.png).

This is the code for the HTML asset that we created for the home explosion:

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://lancasteronline.com/app/jquery-ui-touch-punch-master/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="https://lancasteronline.com/app/beforeafter/js/jquery.beforeafter-1.4.js"></script>
<style>
.beforeafterwrapper {
   margin: 0 auto 2em auto;
   width: 90%;
   max-width: 600px;
}
.before-after-instructions {
font-size: 1.4em;
}
</style>
<div class="before-after-instructions">Use the vertical green slider in the middle of the photos to see before and after photos of the home that was destroyed in Manor Township.</div>
<script type="text/javascript">
$(function(){
    $('#container').beforeAfter({imagePath:'https://lancasteronline.com/app/beforeafter/'});
});
</script>
<div class="beforeafterwrapper">
 <div id="container">
  <div><img alt="before" src="https://bloximages.newyork1.vip.townnews.com/lancasteronline.com/content/tncms/assets/v3/editorial/7/8b/78b0a6f8-5ff8-11e7-8c80-035470a76f7e/595a4ed3e8b97.image.png" width="100%"></div>
  <div><img alt="after" src="https://bloximages.newyork1.vip.townnews.com/lancasteronline.com/content/tncms/assets/v3/editorial/7/9b/79b6d8c4-5ff8-11e7-b86a-bff9b853fa5b/595a4ed5a3fd3.image.png" width="100%"></div>
</div>
<div class="before-after-caption">
Before: 206 Springdale Lane, near Millersville. (Adam Missimer photo) <br>
After: Debris is shown after a gas explosion destroyed the home. </div>
</div>

We could have multiple images in one HTML asset like at the bottom of this page http://lancasteronline.com/beforeafter/:

<script type="text/javascript">
$(window).bind("load", function() {
        $('#container1').beforeAfter({imagePath:'https://lancasteronline.com/app/beforeafter/'});
        $('#container2').beforeAfter({imagePath:'https://lancasteronline.com/app/beforeafter/'});
});
</script>
<div class="beforeafterwrapper">
 <div id="container1">
  <div><img alt="before" src="https://lancasteronline.com/app/beforeafter/pennsquarebefore.jpg" width="100%"></div>
  <div><img alt="after" src="https://lancasteronline.com/app/beforeafter/pennsquareafter.jpg" width="100%"></div>
 </div>
<div class="before-after-caption">
Before: Penn Square in 1974.<br>
After: Penn Square in 2015. (Richard Hertzler/Staff)</div>
</div>
<div class="beforeafterwrapper">
 <div id="container2">
  <div><img alt="before" src="https://lancasteronline.com/app/beforeafter/maplegrovebefore.jpg" width="100%"></div>
  <div><img alt="after" src="https://lancasteronline.com/app/beforeafter/maplegroveafter.jpg" width="100%"></div>
 </div>
<div class="before-after-caption">
Before: Maple Grove building in 1972.<br>
After: Maple Grove building in 2015. (Richard Hertzler/Staff)</div>
</div

Here is what I ended up doing. It is far from perfect, looks much better on desktop than mobile, but it got a ton of hits.

http://www.galvnews.com/blogs/in_focus/article_11be7ed0-48db-5227-bb67-c8fc57beeecb.html

Juxtapose J.S. works OK for me.  The PITA part is making it fit in column.