2012-05-08 13 views
1

私はFancybox 2.0と一緒に作業しています。タイトルボックスをイメージの上に表示するか、イメージの上に表示します。fancyboxトップにタイトルをつけてそこに泊まる

fancybox-innerのスタイルをposition:absoluteにしようとしましたが、fancybox-wrapの高さを絶対ピクセルに設定しないでください。

誰かがそれを達成するのに役立つでしょうか?

答えて

6

は...これらの要素のために先頭にタイトルを置くべき

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

.fancybox-skin{position: relative;} 

を次fancyboxのCSSを追加します。

1

内容がbeforeLoadまたはafterLoadを使用することにより、負荷をロードされたとき、およびFancyboxが更新されたときに、onUpdateで、jQueryのを使用することにより、あなたはFancyboxのコールバックを使用して、関連するCSSを操作することができ、一番上にタイトルを配置するには。 Link to FancyBox Docs


は、コード怒鳴ると、あなたのfancyboxをロードしていることを前提とし、標記の位置を操作するために、あなたは "を呼び出すことができます:

だから、あなたは最高のあなたのニーズに合わせて利用できるいくつかのコールバックを持っていますにonUpdate "と" 後負荷 "その変化をトリガする:

jQueryの例

今すぐ
$(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'}); 
    } 
    }); 
}); 

ドキュメントの提供リンク、特別Tをチェックします。 ab "コールバック"。


EDITED:

そして、ここでは、それは、あるthe Fiddle link!

NEW EDIT NOTES:

neokioので、Fancybox style sheetに単純な微調整で溶液を指摘実際に単純なタイトル位置制御の場合は、best approachです。

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


EDITED:neokioによって提示された溶液でそしてFiddleを!デフォルトFancybox 2.0.6 CSSから

+0

「一番上にタイトルを設定」を読んで、ダウン票が間違っているもののいくつかのアイデアが付属していなければなりません!誰もエラーを指摘しなければそれを学ぶことはできません! – Zuul

2

は、次のように置き換えます。

.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; 
    } 

はこれがトップ、それは私の意見では最高に見えるところ、左ヘッダーを配置します。 ここでのscreengrabです:

enter image description here

+0

Fiddleや少なくともFancyBoxの初期化を投稿して、あなたのソリューションを職場で見ることはできませんか? – Zuul

+0

FancyBoxをダウンロードして、上記のようにデモCSSを微調整してください。それだけです。 – neokio

+0

あなたの答えを補完するための実例があることがポイントでしたが、ここにあなたはそれを持っています:[Fiddle!](http://jsfiddle.net/zuul/KHyWF/2/) – Zuul

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' } 

あなたは、元のスタイルのいずれかを失うことはありませんし、あなたがそれらを必要として、あなたはスタイルを追加し続けることができます。

0

クリスマッキーの答えは最もクリーンです。

$(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 
    }); 

}); 
10

ベストと最も簡単な - ヘルパーを使用して:あなたはFancyBoxのトップを押し下げるために追加することができますafterUploadなどで約いじくるだけだいいえマージンではありません

helpers : { 
      title : { 
       type: 'inside', 
       position : 'top' 
      } 
     } 
+0

(OPによって使用されるバージョン)にもかかわらず、OPは画像の下または画像の上に必要ではありません。すべてのコンテンツの真上にある。 – JFK

0

上書きfancyboxのデフォルトあなたは(私たちをビルドシステムを使用した場合のいずれかが後に以下のスニペットを追加することにより、CSSは、あなたは、fancybox.css

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

含めますかe GruntJS)をLESSと組み合わせると、fancyboxのように簡単です。

@import "fancybox"; 

上記のスニペットと一緒に。そうすれば、パッチを1か所に集約してアプリの周りに分散させることができます。

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

3

にjsfiddleにこのコードの設定:http://jsfiddle.net/JYzqR/を。

$(".fancybox").fancybox({ 
 
    helpers : { 
 
    title: { 
 
     type: 'inside',   
 
     position: 'top' 
 
    } 
 
    }, 
 
    nextEffect: 'fade', 
 
    prevEffect: 'fade' 
 
});
.fancybox-title { 
 
    padding: 0 0 10px 0; 
 
}
<a rel="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/oZFno.jpg"><img src="http://i.stack.imgur.com/eZSbk.jpg" alt=""/></a> 
 
<a rel="gallery" title="Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/tv3kk.jpg"><img src="http://i.stack.imgur.com/IWWbG.jpg" alt=""/></a> 
 

 
<!-- External Resources --> 
 
<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- fancybox --><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

このソリューションの作品がhttp://fancyapps.com/fancybox/#examples

関連する問題