Question

有人知道或者可以让我知道如何点击网站中的图像，然后使用移动效果将图像移动到带有FanxyBox的弹出窗口中的页面中心？

我的意思是，当点击图像时，应该会出现一个应该有两列的弹出窗口。在左栏中，它应该只有文本，在右栏中，单击图像，但只是出现弹出窗口，图像应该具有从点击位置到弹出窗口内的位置的移动效果。

我知道如何创建弹出窗口，但不知道如何移动图像并正确放置。

以下是我迄今为止所做的事情的片段......

$("#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>

Answer 1

好的，我让它发挥作用......如果有人感兴趣的话......

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

最诚挚的问候。吉列尔莫。

Fancybox作为弹出和图像移动效果

1 个答案: