0

私の Fancybox ギャラリーでは、Fancybox CSS を変更して (ホバー時だけでなく) 常にナビゲーション矢印を表示し、ホバー時に不透明度を 0.7 から 1.0 に増加するように設定しました。ただし、前の矢印と次の矢印は、機能しないため、最初と最後の画像にはそれぞれ表示されません (「ループ」を「false」に設定しています)。これらの画像に 2 つの矢印のうちの 1 つしか表示されていないと、ナビゲーションが不均衡に見えるため、常に両方の矢印を表示したいのですが、非機能的な矢印は、非ホバー状態の機能的な矢印よりもさらに透過的である必要があります (0.3 など)。 、ユーザーがそれが操作不能であることを理解できるようにします。

このコードを変更してjsを変更しました：

if (current.loop || current.index > 0) {
$(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev);}

これに：

if (current.loop || current.index >= 0) {
$(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev);}

「次の」矢印についても同じことを行いました。

これにより、両方の矢印が表示されますが、最初と最後の画像の非機能ボタンを機能ボタンよりも暗く表示する方法がわかりません。以下はサンプルページです (ユーザーが混乱しないように元の js に戻しました): http://transweb.sjsu.edu/mntrc/events/2012/gallery1.html

これを達成するための助けをいただければ幸いです。私は js に障害があります (css には障害はありません) ので、現在のコードに統合する方法を示す完全なコード例を提供してください。ありがとう。

4

1 に答える 1

2

おそらくご存じのとおり、ナビゲーション矢印を永続的に表示するには、この css ルールを設定します

.fancybox-nav span {
  visibility: visible;
}

これは、またはもちろん、前または次の要素がある場合にのみ、前/次のナビゲーション矢印を表示します (たとえばloop、に設定されている場合、前の矢印はギャラリーの最初の要素には表示されませんfalse)

「機能しない」矢印を常に表示するbeforeShow(そして淡色表示する) ために、次のようなカスタム ファンシーボックス スクリプト内でコールバックを使用して、オンザフライで追加できます。

beforeShow: function(){
 // evaluates if this is the FIRST element of the gallery
 // if so, appends a dimmed (non-functional) PREVIOUS navigation arrow
 if(this.index == 0) {
   $(this.tpl.prev).appendTo($.fancybox.outer).css({"opacity":0.6});
 } else 
 // evaluates if this is the LAST element of the gallery
 // if so, appends a dimmed (non-functional) NEXT navigation arrow
 if( this.index < this.group.length){
   $(this.tpl.next).appendTo($.fancybox.outer).css({"opacity":0.6});
 }
}
于 2012-08-24T06:24:26.367 に答える