image gallery /slide with zoom

I wanted to do something similar to this.

In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the ima开发者_开发知识库ge is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.

What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.

Where I can see a tutorial, or a demo?? or how can I do the this??

Thanks

Basically, there are three parts to what you want to do.

1. Clicking on the image will show the image with respect to browser height
2. You can go to the next image while you are in this mode
3. Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at

I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.

With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create

$(window).resize(function() {

    var windowheight = $(window).height();
    $("#imgdiv").css("height", windowheight);
});

Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.

With #2, the arrows just create a new img tag. And the idea is something like

function loadnew() {

    // create the new image
    var newimg = "<img id='newimg'></img>"
    $("#imgcontainer").append(newimg);

    // make sure it has the same classes as the current img
    // so that it's in the same position with an higher z-index
    // then load the image
    $("#newimg").addClass( "class1 class2" );
    $("#newimg").css( "z-index", "+=1" );
    $("#newimg").css( "opacity", 0 );

    $("#newimg").attr("src", "url/to/img");

    // animate the thing and then replace the src of the old one with this new one
    $("#newimg").animate( {
        opacity: 1;
    }, 1000, function() {
        $(oldimg).attr("src", $("#newimg").attr("src"));
    });
}

Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a

$(window).resize(function() {

    var windowwidth= $(window).width();
    $("#imgdiv").css("width", windowwidth);
});

to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler

$("#superimgdiv").mousemove( function(e) {

    // need to tell where the mouse is with respect to the window
    var height = $(window).height();
    var mouseY = e.pageY;
    var relativepct = mouseY/height;

    // change the position relative to the mouse and the full image height
    var imgheight = $("superimg").height();
    $("superimgdiv").css("top", -1*relativepct*imgheight);
});

And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.