Fancybox作为弹出窗口和图像移动效果 [英] Fancybox as popup and image moving effect

问题描述

有人知道或可以给我一个想法，即如何单击网站上的图像，然后将具有移动效果的图像移动到带有FanxyBox的弹出窗口中的页面中心?

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>

推荐答案

好吧，如果有兴趣的话，我可以使它工作...

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.

这篇关于Fancybox作为弹出窗口和图像移动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！