Fancybox as popup and image moving effect

问题

Does someone knows or can give me an idea of how to achieve to click on an image in a website, then move the image with a moving effect to the center of the page inside a popup with FanxyBox?

I mean, when the image is clicked a popup should appear which should have two columns. On the left column it should have only text, on the right column, the image clicked, but instead just appearing the popup, the image should have a moving effect from the clicked position to the position inside the popup.

I know how to create the popup, but not how to move the image and place it correctly.

Here is a snippet of what I've done so far...

$("#thumbnailTitleLink").fancybox({
        hideOnContentClick : false,
        autoScale: false,
        transitionIn : "elastic",
        easingIn : 'easeOutCirc',
        overlayColor : "#1e72b1",
        overlayOpacity : .4,
        opacity: false,
        speedIn : 200,
        titleShow: false,
        scrolling: "no",
        orig: $( "#imgHouse" ),
        onComplete: function() {
        },
        openEffect  : 'elastic',
        closeEffect : 'elastic',

        helpers : {
            title : {
                type : 'inside'
            }
        }
    });

<td>
    <div><a id="thumbnailTitleLink"><img id="imgHouse" src="images/house_thumb.png"/></a></div>
</td>

回答1:

Ok, I made it work...if anyone interested...

$(this).fancybox({
            hideOnContentClick : false,
            autoScale: false,
            transitionIn : "elastic",
            transitionOut: 'elastic',
            easingIn : 'easeOutCirc',
            overlayColor : "#1e72b1",
            overlayOpacity : .4,
            opacity: false,
            speedIn : 950,
            titleShow: false,
            scrolling: "no",
            orig: img,
            onStart : function() {
                $(".popupText").each(function() {
                    $(this).hide();
                });
                $('#imgPopup').attr('alt',altImage);
                $('#imgPopup').attr('src',srcImage);
                $('#popup_wrapper').show();
                $('#' + name + 'PopupText').show();
                $(".popupImage").show();
            },
            afterClose : function() {
                $('#popup_wrapper').hide();
            },
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            helpers : {
                title : {
                    type : 'inside'
                }
            }
        });

Best Regards. Guillermo.

来源：https://stackoverflow.com/questions/13225604/fancybox-as-popup-and-image-moving-effect