jquery - Fancyboxの「閉じる」ボタンの不透明度を移動または下げようとしています

Question

YouTubeのファンシーボックスの「閉じる」ボタンを移動しようとしています。次のようなコードを追加しようとするたびに:

'onComplete': function(){
   $("#fancybox-close").css({"opacity":"0.5"});
}

リンクは、モーダル ボックス内で再生するのではなく、YouTube に直接移動します。

助言がありますか？

HTML:

<a class="fancybox-media" href="http://www.youtube.com/watch?v=sqRPrGeBVL0&autoplay=1&autohide=1" >Youtube</a>

Javascript:

$(function(){
$("a.fancybox-media").click(function() {
     $.fancybox({
          'padding'             : 0,
          'autoScale'   : false,
          'transitionIn'        : 'none',
          'transitionOut'       : 'none',
          'title'               : this.title,
          'width'               : 680,
          'height'              : 495,
          'autoPlay'            :'true',
          'href'                : this.href.replace(new RegExp("watch\\?v=", "i"),
                                      'v/'),
          'type'                : 'swf',    // <--add a comma here
          'swf'                 : {'allowfullscreen':'true'} // <-- flashvars here
       });
       return false;
  });
 });

ノート -

Answer 1

他の質問で述べたように、スクリプトに追加します

'onComplete': function(){
 $("#fancybox-close").css({"opacity":"0.5"});
}

次のように、オプションをコンマで区切ってください。

$("a.fancybox-media").click(function() {
 $.fancybox({
  'padding'             : 0,
  'autoScale'   : false,
  'transitionIn'        : 'none',
  'transitionOut'       : 'none',
  'title'               : this.title,
  'width'               : 680,
  'height'              : 495,
  'autoPlay'            :'true',
  'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
  'type'                : 'swf', 
  // the swf option IS NOT the last option anymore so it needs a trialing comma !!!
  'swf'                 : {'allowfullscreen':'true'}, // <-- ADDED a comma here
  'onComplete': function(){
    $("#fancybox-close").css({"opacity":"0.5"});
  }
 });
 return false;
});

デモ：ここで動作するのを見てください

補足: 背景色を変更するなど、別のオプションを追加する場合は、常にすべてのオプションが最後の 2 番目以外overlayColorで区切られていることを確認してください。comma

更新：不透明度を変更して閉じるボタンを移動する場合は、同じonCompleteオプション内で次のように行います

'onComplete': function(){
    $("#fancybox-close").css({"opacity": 0.4,"right": -30});
  }

DEMOも更新しました

更新＃2（楽しみのため）：マウスホバー（onCompleteオプション内のすべて）の閉じるボタンの不透明度を復元するなどの興味深い効果を適用できます

  'onComplete': function(){
    $("#fancybox-close").css({"opacity": 0.4,"right": -30})
      .hover(function(){
        $(this).css({"opacity": 1});
      },function(){
        $(this).css({"opacity": 0.4});
      });
   }

(DEMOでも更新)

Answer 2

CSSを変更しないのはなぜですか？

#fancybox-close {
    opacity: 0.5 !important;
}