jquery - 更改 fancybox 设计 - 添加另一个不晃动窗口的 div

Question

我在 Fancybox 窗口上安装了 JW 播放器。一切正常，现在我只有一个设计问题:

当显示播放器窗口时(当它触发时)，它会“自下而上”移动，从下向上移动到窗口。这是因为我在播放器下添加了另一个div。我怎样才能解决这个问题？ 这是一个演示示例:http://teodore.ge/test/demo/

我是这样做的:

<script>

      $(".fancybox").fancybox({
        fitToView: false, // to show videos in their own size
        content: '<div></div>', // create temp content
        scrolling: 'no', // don't show scrolling bars in fancybox
        afterLoad: function () {

          // get dimensions from data attributes
          var $width = $(this.element).data('width'); 
          var $height = $(this.element).data('height');


          var link=$(this.element).context.attributes.yutubelink.nodeValue;

          this.content = ' <embed type="application/x-shockwave-flash"  src="player.swf" width="640" height="383"    style="undefined"  allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="file='+link+'&amp;skin=nacht.zip&amp;autostart=true">'; 
        },
        afterShow: function(){
          var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
           $(".fancybox-outer").append(toolbar);
          }
      });   

</script>


<div id="appendContent" style="display: none;  width: auto; height: auto;">
    <div > 1111   That div  is the problem <br><br><br>  1111111 <br> <br> </div>
    <div> 2222:  That div  is the problem  <br><br><br> 2222222 <br> <br> </div>
</div>



    <a class="fancybox"  yutubeLink="http://www.youtube.com/watch?v=p3iYnHx8P0s" > 
    <img src=" 1.jpg"  width="360" height="240"></a><br>

    <a class="fancybox"  yutubeLink="http://www.youtube.com/watch?v=USgLNBsnRGo"> 
    <img src=" 2.jpg" width="360" height="240"></a> <br>

Answer 1

我将添加新 div 的功能移动到播放器旁边。我将函数从 afterShow() 移至 afterLoad() 函数。加载后添加 div 会导致该问题(它会更改 div 的位置)。因为播放器必须在屏幕的中心，当我添加一个新的 div 时，那个位置正在改变。