Before/After Photo Slider

Kevin M. Cox 6 years ago in BLOX CMS updated by Aidian 6 years ago 4

Does anybody have a quick/easy solution to get something like JuxtaposeJS working on a Flex site?


EDIT: Looks like I might be able to just embed the code though... (and I admit I posted before even trying but figured if somebody already has a system like this that is TownNews friendly it will save me some time).

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>
.beforeafterwrapper {
   margin: 0 auto 2em auto;
   width: 90%;
   max-width: 600px;
.before-after-instructions {
font-size: 1.4em;
<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">
<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 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>

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() {
<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 class="before-after-caption">
Before: Penn Square in 1974.<br>
After: Penn Square in 2015. (Richard Hertzler/Staff)</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 class="before-after-caption">
Before: Maple Grove building in 1972.<br>
After: Maple Grove building in 2015. (Richard Hertzler/Staff)</div>

We always just use the embed code in an html asset. I was looking for an example of one we did, but I can't remember one off the top of my head. But we've always had pretty good luck with the Knight Lab stuff and just using their embed codes.

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.


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