Any idea what software abc.net.au is using on the scrolling before/after earthquake aerials?

Question

Japan Earthquake: before and after the copyright says: © Google, Digital Globe, GeoEye Guessing it's something of Google's since Digital Globe and GeoEye are probably only the aerial image's photographers?

Specifically would like to know what software is used for the scrolling over the photos giving before and after perspective which is incredible.

Some of the code from Firefox's View Selection Source: <div id="beforeafter" class="subcolumns"> <div class="section"> <h2>Sendai Airport</h2> <p class="source">© Google, Digital Globe, GeoEye</p> <div style="width: 940px; height: 529px;" class="beforeafter"> <div style="background: url(&quot;images/beforeafter/sendai-airport-2.jpg&quot;) repeat scroll 0% 0% transparent; width: 940px; height: 529px;" class="after"></div><div style="background: url(&quot;images/beforeafter/sendai-airport-1.jpg&quot;) repeat scroll 0% 0% transparent; width: 109.5px; height: 529px;" class="before"></div><div style="opacity: 0;" class="help">Hover over the image to toggle before/after</div></div> </div> <div class="section"> <h2>Arahama in Sendai</h2>

Answer 1

Looks like a custom function (do view-source on it). You'll need jQuery to use it:

$(function(){

            // Loop through all the sets of before and after pics
            $(".beforeafter").each(function(){

                // Set the container's size to the size of the image
                $(this).width($(this).find("img[rel=before]").attr("width")).height($(this).find("img[rel=before]").attr("height"));

                // Convert the images into background images on layered divs
                $(this).append("<div class='after'></div>").find(".after").css({"background": "url(" + $(this).find("img[rel=after]").attr("src") + ")", "width": $(this).find("img[rel=after]").attr("width") + "px", "height": $(this).find("img[rel=after]").attr("height") + "px"});
                $(this).append("<div class='before'></div>").find(".before").css({"background": "url(" + $(this).find("img[rel=before]").attr("src") + ")", "width": $(this).find("img[rel=before]").attr("width") - 40 + "px", "height": $(this).find("img[rel=before]").attr("height") + "px"});

                // Add a helpful message
                $(this).append("<div class='help'>Hover over the image to toggle before/after</div>");

                // Remove the original images
                $(this).find("img").remove();

                // Event handler for the mouse moving over the image
                $(this).mousemove(function(event){

                    // Need to know the X position of the parent as people may have their browsers set to any width
                    var offset = $(this).offset().left;

                    // Don't let the reveal go any further than 50 pixels less than the width of the image
                    // or 50 pixels on the left hand side
                    if ((event.clientX - offset) < ($(this).find(".after").width() -50) && (event.clientX - offset) > 50) {
                        // Adjust the width of the top image to match the cursor position
                        $(this).find(".before").width(event.clientX - offset);
                    }

                });

                // Fade out the help message after the first hover
                $(this).hover(function(){

                    $(this).find(".help").animate({"opacity": 0}, 400, function(){ $(this).find(".help").remove(); });

                });

            });

        });

Answer 2

Here is a before/after (light) jQuery plugin you are precisely looking for : http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

Answer 3

Nivo have made this even easier to implement (with jquery) http://nivo.dev7studios.com/