fancyboxのポップアップ時の画像の白枠の削除

質問

http://fancyapps.com/fancybox/#examples
このサイトを参考にして、
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
------------追加した部分------------
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
------------------------------------
</script>
と</head>の上に書いたのですが、白枠が残っています。
フォルダはほぼそのまま入れて、fancybox自体は挙動するのでリンクも間違っていないはずです。
htmlは
<a class="fancybox" rel="group" href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/2_b.jpg"><img src="images/2_s.jpg" alt="" /></a>
です。
念のためgalleryをgroupにしたり、paddingをmarginにしてもダメでした。
何が問題なのでしょうか？ご教示お願い致します。

回答No.2

fujillin · ベストアンサー

ANo1です。

回答してから気付きました。
　backgroundをtransparentにするのが一番簡単かも。

お礼

回答ありがとうございました。
cssでカスタマイズできるものでも、はじめから自分が書いたものでないと戸惑ってしまうことが多いです。大変参考になりました。

回答No.1

fujillin

よく知りませんけれど、サンプルをちょこっと覗いてみたところ・・・

fancyboxのポップアップの表示要素は
　<div class="fancybox-skin">
　　<div class="fancybox-outer">
　　　<div class="fancybox-inner">
　　　　<img class="fancybox-image" alt="">　←　表示画像
　　　</div>
　　</div>
　</div>
といった構成になっているようです。
余白を作っているのは、このうちのfancybox-skinにpadding:15pxと指定されていることによりますので、そのあたりを調整してあげる必要があります。

クローズ用の×印がさらに外側の要素で
　<a class="fancybox-item fancybox-close">
で定義されているようですが、このレイアウトによってさらに外側の要素で右側に余白状のものが残る可能性があります。
position:absoluteなどに変えて表示するようにする必要があるかもしれませんね。