Web Design

Lightbox2の閉じるボタンの位置を上にしたい。

閉じるボタンのデフォルトの位置

Lightbox2の閉じるボタン(close.png)は、画像の右下に設置されています。

閉じるボタンの位置を右上にカスタマイズ

画像のように、右上に閉じるボタンを設置していきます。

JSのオプションでカスタマイズできるかと思いきや、できないようです。
読み込んでいる「lightbox.min.js」をカスタマイズします。

とはいえ、下記閉じるボタンのHTML部分
<div class="lb-closeContainer"><a class="lb-close" role="button" tabindex="0"></a></div>
を移動させるだけです。簡単ですね!

移動させる場所は以下の通り、.lb-containerの中に入れてあげるだけです。

<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" role="button" tabindex="0" aria-label="Previous image" href="" ></a><a class="lb-next" role="button" tabindex="0" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" role="button" tabindex="0"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close" role="button" tabindex="0"></a></div></div></div>
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><div class="lb-closeContainer"><a class="lb-close" role="button" tabindex="0"></a></div><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" role="button" tabindex="0" aria-label="Previous image" href="" ></a><a class="lb-next" role="button" tabindex="0" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" role="button" tabindex="0"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div></div></div>