カラーボックスのキャプションを最上部に移動しますか？

Question

私は自分のプロジェクトでモーダルウィンドウを開くためにcolorboxを使用しています。

colorboxを使用する5つのスタイルがあります。私はこのURLに例5を使用しています：http://www.jacklmoore.com/colorbox/example5/ 私はcolorbox.jsのキャプション行（タイトル属性テキスト、背景とクローズアイコン）をボックスの上部に移動しようとしています - デフォルトは下部です。どうしたらいいですか？

これは、実施例5のカラーボックスウィンドウの通常のビューである：

これは私が本当に欲しいものです：あなたがしなければならない

Answer 1

2つのもの： Th最初は簡単です。あなたは、CSSファイル（colorbox.css）を編集し、次の要素の位置のルールを変更する必要があります：

#cboxTitle, #cboxCurrent, #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow 

をその絶対位置を「上部」の特性ではない「ボトム」プロパティに基づいているように、 。ここでは前と編集後（前バージョンはコメントアウトされ）、例です：

/*#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} */ 
    #cboxCurrent{position:absolute; top: 0; left:58px; font-weight:bold; color:#7C7C7C;} 

あなたは「上部」プロパティに適切な値を取得するために実験する必要があります。

2番目のことはもっと難しいかもしれません。プラグインはcontrols.pngと呼ばれる画像 'スプライト'（多数の画像の合成）を使用します。それを見ると、あなたが望むことをするために必要なイメージはありません。

イメージエディタを熟練している場合は、このイメージを修正して必要なイメージを追加し、CSSの典型的なスプライト使用に従って新しいイメージコンテンツを使用するために必要なX-Y座標を決定できます。あなたがこれをしているかどうかわからない。

ああ、あなたはそれが単なる変更だと思ったのですか？運が良かった！ 「{}合計の画像{現在}」、 前回：

Answer 2

、「クローズ」jquery.colorbox.js

現在では、あなたのイメージに 変更ワードイメージに近いを変更する簡単な方法を発見： 次の、 "前"： "次へ"、 は近い：このコンテンツの読み込みに失敗しました " imgErrorは："： "" xhrErrorは、 "クローズ " //だった"。この画像の読み込みに失敗しました"、

。

Answer 3

colorbox.cssの下に記載されているコードをコピーしてください。

#colorbox #cboxClose { top: 0; right: 0; } #cboxLoadedContent{ margin-top:28px; margin-bottom:0; }

Answer 4

カラーボックスを編集します。CSS メイク以下の変更

1. Replace 
#cboxLoadedContent{margin-bottom:28px;} 
with 
#cboxLoadedContent{margin-top:28px;} 

2. Replace 
#cboxClose{position:absolute; bottom:0; 
with 
#cboxClose{position:absolute; top:0; 

Answer 5

この

 $content = $tag(div, "Content").append(
      $title = $tag(div, "Title"), 
      $current = $tag(div, "Current"), 
      $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}), 
      $next = $('<button type="button"/>').attr({id:prefix+'Next'}), 
      $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}), 
      $loadingOverlay 
     ); 

     $close = $('<button type="button"/>').attr({id:prefix+'Close'}); 

では

$content = $tag(div, "Content").append(
     //$title = $tag(div, "Title"), // comment this line 
     $current = $tag(div, "Current"), 
     $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}), 
     $next = $('<button type="button"/>').attr({id:prefix+'Next'}), 
     $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}), 
     $loadingOverlay 
    ); 

    $close = $('<button type="button"/>').attr({id:prefix+'Close'}); 
    // add this new code 
    $wrap = $tag(div, "Wrapper").append(
      $title = $tag(div, "Title") 
    );