Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>

share|improve this question
add comment

3 Answers

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(); });

                });

            });

        });
share|improve this answer
1  
It dynamically changes the width of the "before" image, which is styled to be on top of the "after" image. The separator line is the CSS border-right property of the "before" element. @geographika - The opacity is related to the fade out of the "Hover over the image to toggle before/after" text at the bottom-right of the image(s). –  Adam Armour Mar 14 '11 at 15:40
    
Thanks for all the responses.... Is this scrolling before/after tool strictly for use in online applications or is there some way to implement into offline ArcGIS 10 stuff too? How about using it in the free version of Google Earth? –  sirgeo Mar 14 '11 at 15:48
    
The scrolling is strictly for use in a web page (as it is JavaScript), however you could replicate the functionality in pretty well any language of choice (traditional .NET UI control, WPF, Flex, Silverlight, etc) depending on what you plan on using it for. –  Sasa Ivetic Mar 14 '11 at 16:07
1  
@Sirgeo, ArcGIS has this capability. It is called the "swipe tool" and it is located on the "effects" toolbar. webhelp.esri.com/arcgiSDEsktop/9.3/… –  RyanDalton Mar 14 '11 at 20:09
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.