Fancybox as popup and image moving effect

2019-09-03 21:24发布

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条回答
啃猪蹄的小仙女
2楼-- · 2019-09-03 21:31

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.

查看更多
登录 后发表回答