誰かがウェブサイトの画像をクリックして、FanxyBoxを使用してポップアップ内のページの中央に移動効果のある画像を移動する方法を知っているか、私に教えてくれますか?
つまり、画像をクリックすると、2つの列を持つポップアップが表示されます。左側の列にはテキストのみが表示され、右側の列には画像がクリックされますが、ポップアップが表示されるだけでなく、画像はクリックされた位置からポップアップ内の位置に移動する効果があります。
ポップアップを作成する方法は知っていますが、画像を移動して正しく配置する方法はわかりません。
これは私がこれまでに行ったことの抜粋です...
$("#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>