Fancybox comme effet de mouvement de popup et d'image

Question

Est-ce que quelqu'un sait ou peut me donner une idée de la manière de cliquer sur une image dans un site Web, puis déplace l'image avec un effet de mouvement au centre de la fenêtre FanxyBox? Je veux dire, lorsque l'on clique sur l'image, une fenêtre contextuelle devrait apparaître, qui devrait avoir deux colonnes. Dans la colonne de gauche, il ne doit contenir que du texte, sur la colonne de droite, l'image doit être cliquée, mais l'image doit avoir un effet de déplacement de la position cliquée à la position dans la fenêtre contextuelle.

Je sais comment créer le popup, mais pas comment déplacer l'image et le placer correctement.

Voici un extrait de ce que je l'ai fait jusqu'à présent ...

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

Ok, je l'ai fait travailler ... si quelqu'un intéressé ...

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

Cordialement . Guillermo.