팝업 상자와 이미지 이동 효과로 팬시 박스

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

베스트 감사합니다 지금까지 한 일의 조각입니다 . 기예르모.