2012-04-12 5 views
1

ファンシーボックスの画像をフルサイズで表示するには、ボタンヘルパーを呼び出すしかありませんが、残りのボタン(再生、次、前など) 。私はフル/オートサイズを切り替えるFancyboxコンテナの隅に単一のボタンを追加したいと思います。追加の要求を避けるために、通常のjsおよびcssファイルに変更を追加することをお勧めします。何か案は?ファンシーボックスv2でフルサイズにボタンを追加

答えて

0

JavaScriptを変更する時間を無駄にしないで、このCSSのトリックでクローズとフルサイズのボタンのみを表示できます。一例として

#fancybox-buttons a.btnPrev, #fancybox-buttons a.btnNext, #fancybox-buttons a.btnPlay { 
    display:none; 
} 

#fancybox-buttons ul { 
    width:80px; 
} 
+0

、CSSで良いアイデアを他の人を隠します!ありがとう。 –

1

つ以上の変異体(fancybox 2.1.5):

$('.fancybox').fancybox({ 
    afterShow: function() { 
    $('<div class="fancybox-fullsize"></div>').appendTo(this.skin).click(function() { 
     $.fancybox.toggle(); 
     $(this).toggleClass('fancybox-fullsize fancybox-fullsize-r'); 
    }); 
    } 
}); 

とCSS:

.fancybox-fullsize, .fancybox-fullsize-r { 
    position: absolute; 
    width: 36px; 
    height: 36px; 
    top: -18px; 
    left: -18px; 
    z-index: 99999; 
    cursor: pointer; 
} 

.fancybox-fullsize { 
    background-image: url(img/fancybox_fullsize.png); 
} 

.fancybox-fullsize-r { 
    background-image: url(img/fancybox_fullsize-r.png); 
} 
関連する問題