CODEWITHSUNDEEP
javascriptjquery
temporary_user_name
temporary_user_name

Reputation: 37068

How to make a sliding thingamajig between photos?

See the effect in the photos in the article here:

http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation

Does anyone have any idea how that's done? I suppose I could make two frames with adjustable width within a fixed frame, but what about the handle? And the way the frame line and handle brighten and enlarge when you mouse over? Hover event, to be sure, but what kind of hover event?

Upvotes: 0

Views: 64

Answers (2)

Jezen Thomas
Jezen Thomas

Reputation: 13800

You could of course just write your own that isn't dependant on jQuery UI.

;(function($){
    $.fn.slidingThingamajig = function () {

        return this.each(function(){

            var $this = $(this);

            $this.find('.handle')
                 .css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
                 .on('mousedown', function(e) {
                     $this.addClass('resizable');

                     $this.parents().on('mousemove', function (e) {
                         $('.resizable').css({width:e.pageX - $('.resizable').offset().left});
                     }).on('mouseup', function(e) {
                         $('.resizable').removeClass('resizable');
                 });
                e.preventDefault();
            });
        });
    }
})(jQuery);

You would probably need to tweak this a little, but it's mostly all there.

Upvotes: 1

Robin Jonsson
Robin Jonsson

Reputation: 2851

It is very simple. You have 2 DIVs with the 2 different images (as background-image in css) overlapping eachother (In e.g absolute positioning.) (Perhaps the "Before" picture above) Then you have a slider and when dragged it decreases the overlapping DIV's width, making the underlaying DIV show! This functionallity can be found in a jQuery plugin called "Before/After"

Link: jQuery BEFORE / AFTER

Upvotes: 2

Related Questions