1

私は Fancybox 2.0 を使用していますが、タイトルボックスを画像の下ではなく、画像の上または上に表示したいと考えています。

何よりもコンテンツ。

fancybox-innerスタイルを作成しようとしましたposition:absoluteが、高さがfancybox-wrap絶対ピクセルに設定されません。

誰かがそれを達成するのを手伝ってくれますか?

4

9 に答える 9

10

ヘルパーを使用するのが最善かつ最も簡単です。

helpers : {
            title : {
                type: 'inside',
                position : 'top'
            }
        }
于 2013-04-24T21:35:11.477 に答える
6

これらの要素に次のファンシーボックスCSSを追加します...

.fancybox-title{position: absolute;top: 0;} 

.fancybox-skin{position: relative;}

それはタイトルを一番上に置くべきです。

于 2012-05-08T13:28:35.300 に答える
2

デフォルトの Fancybox 2.0.6 CSS から、以下を置き換えます。

.fancybox-title {
    position: absolute;
    top: -36px;
    left: 0;
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
    }

.fancybox-title-float-wrap {
    position: absolute;
    z-index: 8030;
    }

これにより、ヘッダーが左上に配置され、私の意見では最もよく見えます。ここにスクリーングラブがあります：

ここに画像の説明を入力

于 2012-05-10T02:02:58.983 に答える
1

beforeLoadJqueryを使用してタイトルを一番上に配置するにはafterLoad、Fancybox コールバックを使用して関連する CSS を操作できますonUpdate。

そのため、ニーズに最適なコールバックをいくつか用意しています: Link to FancyBox Docs

次のコードでファンシーボックスをロードしていると仮定しましょう。タイトルの位置を操作するには、「onUpdate」と「afterLoad」を呼び出してその変更をトリガーします。

Jクエリの例

$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    }
  });
});

上記の例では、Fancyboxのタイトルを上に配置しますが、フレームから離れた外側に配置する必要がある場合は、「上」に負の値を設定する必要がありますが、フレームが画面全体を占有できないことを考慮してください。この新しい例の幅と高さのパラメーター:

JQuery の例 2

$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "autoSize"  : false,
    "width"     : '70%',
    "height"    : '70%',
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    }
  });
});

ドキュメント、特にタブ「コールバック」については、提供されたリンクを確認してください。

編集:

これがFiddle リンクです。

新しい編集メモ:

neokioは、 Fancybox スタイル シートを簡単に微調整するだけの解決策を指摘したため、実際、単純なタイトル位置の制御には、これが最善の方法です。

この回答にあるものは、より複雑な CSS 操作に役立ちます。

編集:そして、neokio によって提示されたソリューションのフィドル!

于 2012-05-08T13:52:48.930 に答える
0

Neokio は正しい方向に進んでいますが、スタイルシートに新しいクラス スタイルを追加してそれを参照するだけで、元のコードの破壊が少し少なくなると思います。

// Put at bottom of jquery.fancybox.css, change as needed
.fancybox-title-top-wrap {
  position: absolute;
  top: -30px;
  left: 0;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  padding: 2px 20px;
  font-size: 16px;
}

次に、次を使用します。

helpers: { title: 'top' }

元のスタイルが失われることはなく、必要に応じてスタイルを追加し続けることができます。

于 2012-07-23T18:13:07.193 に答える
0

fancybox.cssをインクルードした後に以下のスニペットを追加して、fancybox のデフォルト css をオーバーライドします。

// set modal title above container (overriding default bottom)
.fancybox-title-float-wrap {
  bottom: auto;
  top: -35px;
}

または、LESS でビルド システム (ここでは GruntJS を使用) を使用する場合は、fancybox-custom.less で行うのと同じくらい簡単です。

@import "fancybox";

上記のスニペットとともに; そうすれば、パッチを 1 か所に統合​​するのではなく、アプリ全体に分散させることができます。

于 2013-08-03T12:23:37.693 に答える
0

Chris Mackie の答えが最もクリーンです。FancyBoxafterUploadの上部を押し下げるために追加できる唯一のものはマージンです。

$(document).ready(function() {

      $('.fancybox').fancybox({
                    padding      : 0,
          margin       : [60, 60, 20, 60],
          autoSize     : false, 
          autoCenter   : true,
          fitToView    : true,
          openEffect   : 'fade',
          closeEffect  : 'fade',
          openSpeed    : 100,
          closeSpeed   : 100,
          width        : 900,
          height       : 600
     });

});
于 2012-12-02T11:30:15.063 に答える
0 
afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );

    }

そのコードを fancybox 関数に入れてみてください。例えば

$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
openEffect  : 'none',
closeEffect : 'none',
afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );
    }

});

クラス"logoShow"cssの設定

于 2015-03-26T05:45:06.000 に答える