javascript - Lightbox 2.51 - 閉じるボタンと画像番号を一番上に移動するには?

Question

Lightbox 2.51 を使用していますが、閉じるボタンや現在の画像番号などを含む lb-dataContainer を一番上に移動する解決策が見つかりません

古いバージョンの解決策しか見つかりませんでした。

コードはここにあります: http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip

Answer 1

解決策は、外側のコンテナーをデータ コンテナーに変更することです。

Lightbox.prototype.build = function() {
  var $lightbox,
    _this = this;

  $("<div>", {id: 'lightboxOverlay'}).after
    (
          $('<div/>', {id: 'lightbox'}
          ).append(

          $('<div/>', {
            "class": 'lb-dataContainer'
          }).append($('<div/>', {
            "class": 'lb-data'
          }).append($('<div/>', {
            "class": 'lb-details'
          }).append($('<span/>', {
            "class": 'lb-caption'
          }), $('<span/>', {
            "class": 'lb-number'
          })), $('<div/>', {
            "class": 'lb-closeContainer'
          }).append($('<a/>', {
            "class": 'lb-close'
          }).append($('<img/>', {
            src: this.options.fileCloseImage
        })))
 )),

          $('<div/>', {"class": 'lb-outerContainer'}).append
          ( $('<div/>', {
                "class": 'lb-container'
              }).append($('<img/>', {
                "class": 'lb-image'
              }), $('<div/>', {
                "class": 'lb-nav'
              }).append($('<a/>', {
                "class": 'lb-prev'
              }), $('<a/>', {
                "class": 'lb-next'
              })), $('<div/>', {
                "class": 'lb-loader'
              }).append($('<a/>', {
                "class": 'lb-cancel'
              }).append($('<img/>', {
                src: this.options.fileLoadingImage
              }))))
          )

)
    ).appendTo($('body'));
  $('#lightboxOverlay').hide().on('click', function(e) {
    _this.end();
    return false;
  });

Answer 2

私の答えは少し抽象的ですが、これが役に立てば幸いです。私の下手な英語を申し訳ありません:)

この行を見つける lb-outerContainer の上に div を作成する必要があります。85 行目にあると思います。コード:

Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).after
(
$('<div/>', {
id: 'lightbox'
}).append($('<div/>', {             //this is the div you have to append...
"class": 'lb-dataContainer'     
}).append($('<a/>', {
"class": 'lb-close',
"href":'#'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))
.append(
$('<div/>', {
"class": 'lb-outerContainer'    //this is the container
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}), $('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
})))

次に、これをcssに配置します

.lb-close{
float:right;
}

これにより、フロートが左上になります。見るだけでわかるよ！

Answer 3

これは、lightbox-2.6.min.js ファイルを編集する簡単な方法です。

lightbox-2.6.min.js ファイルのコードの下を検索し、

から：

<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'>    <div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>

上記を次のように置き換えます。

<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div></div>

Answer 4

ここで必要な人のために、[閉じる] ボタンのみを右上隅に移動し、キャプションを下部に残すコードを示します。ウェブ全体の標準ユーザー インターフェイス。

次のコードを使用して、lightbox.js ファイルにライトボックスを作成します。

Lightbox.prototype.build = function() {
  var $lightbox,
    _this = this;
  $("<div>", {
    id: 'lightboxOverlay'
  }).after($('<div/>', {
    id: 'lightbox'
  }).append($('<div/>', {
      "class": 'lb-outerContainer'
  }).append($('<div/>', {
      "class": 'lb-closeContainer'
  }).append($('<a/>', {
      "class": 'lb-close'
  }).append($('<img/>', {
      src: this.options.fileCloseImage
  })), $('<div/>', {
    "class": 'lb-container'
  }).append($('<img/>', {
    "class": 'lb-image'
  }), $('<div/>', {
    "class": 'lb-nav'
  }).append($('<a/>', {
    "class": 'lb-prev'
  }), $('<a/>', {
    "class": 'lb-next'
  })), $('<div/>', {
    "class": 'lb-loader'
  }).append($('<a/>', {
    "class": 'lb-cancel'
  }).append($('<img/>', {
    src: this.options.fileLoadingImage
  }))))), $('<div/>', {
    "class": 'lb-dataContainer'
  }).append($('<div/>', {
    "class": 'lb-data'
  }).append($('<div/>', {
    "class": 'lb-details'
  }).append($('<span/>', {
    "class": 'lb-caption'
  }), $('<span/>', {
    "class": 'lb-number'
  }))))))).appendTo($('body'));

閉じるボタンのCSSは次のとおりです。

.lb-closeContainer .lb-close {
float:right;
margin-top:-10px;
display:block;
outline-style:none;
text-decoration:none;
width:22px;
height:23px;
background:url(../images/layout/lightbox/close.png) no-repeat;
background-position: 0 0; 
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/layout     
/lightbox/close.png', sizingMethod='scale');
}


.lb-closeContainer .lb-close:hover {
background:url(../images/layout/lightbox/close.png) no-repeat;
background-position: 0 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/layout
/lightbox/close.png', sizingMethod='scale');    
}