fancyBox2：スライドショーボタンと画像の境界

Question

スライドショーのオン/オフボタンと位置 はタイトルエリアのどこかにあることができますか？これを望む理由は です。ボタンバーで表示される画像のサイズが小さくなり、スライドショーをオンまたはオフにするオプションが に設定されているため、ナビゲーションが通常の左右の クリックで行われます。

画像の周りの境界線、特に下端を小さくすることはできますか？私はパディングとマージンの設定を試しましたが、予期せぬ結果が出ました。正確な構文のどこにでも という例がありますか？

おかげ

MCL

Answer 1

あなたがあなた自身の再生/一時停止ボタンを作成する必要があるかもしれません。私title（別売）を微調整する

a.myPlay { 
/* set the proper path to the png file */ 
background-image: url("fancybox2.0.4/helpers/fancybox_buttons.png"); 
background-color: #2a2a2a; 
background-repeat: no-repeat; 
display: block; 
line-height: 30px; 
text-indent: -9999px; 
width: 30px; 
height: 30px; 
float: left; 
margin-right: 20px; 
} 
a.myPlay { 
background-position: 0 -30px; 
} 
a.myPlayON { 
background-position: -30px -30px; 
} 

とfancybox-titleクラスに適用されるいくつかの余分な（インラインCSS）スタイル：私の場合は、このCSSでfancyboxボタン（ヘルパー/ fancybox_buttons.png）からそれらを作成しました：その後

.fancybox-title { 
min-height: 30px; 
line-height: 30px; 
} 

トリック（helpersとafterLoadを設定するための重要なオプションです）実行するスクリプト：

$(document).ready(function() { 
$(".fancybox").fancybox({ 
    nextEffect : 'fade', 
    prevEffect : 'fade', 
    openEffect : 'fade', 
    closeEffect : 'fade', 
    closeBtn : 'true', 
    arrows : 'true', 
    helpers : { 
    title : { type : 'inside' } 
    }, 
    afterLoad: function(){ 
    if($.fancybox.player.isActive){ 
    this.title = '<a href="javascript:$.fancybox.play();" title="Slideshow" class="myPlay myPlayON" onclick="$(\'.myPlay\').toggleClass(\'myPlayON\')">pause</a> Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
    } else { 
    this.title = '<a href="javascript:$.fancybox.play();" title="Slideshow" class="myPlay" onclick="$(\'.myPlay\').toggleClass(\'myPlayON\')">play</a> Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
    } // if else 
    } // afterLoad 
}); //fancybox 
}); // ready 

のhelpers>buttonsオプションを使用していないにもかかわらず、ファンシーボックスのボタンjsおよびcssファイルをロードする必要があることを覚えておいてください。

A作業DEMO HEREです。あなたの責任において使用してください;）