私はFancybox 2.0と一緒に作業しています。タイトルボックスをイメージの上に表示するか、イメージの上に表示します。fancyboxトップにタイトルをつけてそこに泊まる
fancybox-inner
のスタイルをposition:absolute
にしようとしましたが、fancybox-wrap
の高さを絶対ピクセルに設定しないでください。
誰かがそれを達成するのに役立つでしょうか?
私はFancybox 2.0と一緒に作業しています。タイトルボックスをイメージの上に表示するか、イメージの上に表示します。fancyboxトップにタイトルをつけてそこに泊まる
fancybox-inner
のスタイルをposition:absolute
にしようとしましたが、fancybox-wrap
の高さを絶対ピクセルに設定しないでください。
誰かがそれを達成するのに役立つでしょうか?
は...これらの要素のために先頭にタイトルを置くべき
.fancybox-title{position: absolute;top: 0;}
.fancybox-skin{position: relative;}
を次fancyboxのCSSを追加します。
内容が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から
は、次のように置き換えます。
.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です:
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' }
あなたは、元のスタイルのいずれかを失うことはありませんし、あなたがそれらを必要として、あなたはスタイルを追加し続けることができます。
クリスマッキーの答えは最もクリーンです。
$(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
});
});
ベストと最も簡単な - ヘルパーを使用して:あなたはFancyBoxのトップを押し下げるために追加することができますafterUpload
などで約いじくるだけだいいえマージンではありません
helpers : {
title : {
type: 'inside',
position : 'top'
}
}
(OPによって使用されるバージョン)にもかかわらず、OPは画像の下または画像の上に必要ではありません。すべてのコンテンツの真上にある。 – JFK
上書き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か所に集約してアプリの周りに分散させることができます。
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
に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
「一番上にタイトルを設定」を読んで、ダウン票が間違っているもののいくつかのアイデアが付属していなければなりません!誰もエラーを指摘しなければそれを学ぶことはできません! – Zuul