lightboxの閉じるボタンを右上に移動したい

lightboxは通常、右下に閉じるボタンが表示されます。

しかしデザインによってどうしても右上に移動しないといけない!

なんてこともあると思います。

構造的にcssだけで右上に持ってくるのは難しいのでプラグインのjsを直接修正して対応します。

lightboxの修正方法を紹介していきます。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

lightboxの修正方法

1.lightboxをダウンロード。

まずはlightboxをダウンロードしましょう。

2.ファイルを開いて修正する

ダウンロードしたら「js/lightbox.js」を開いて修正する

lightbox.jsの画像や

<div id="lightbox">
<div class="lb-outerContainer">~</div> //画像部分
<div class="lb-dataContainer">~</div> //閉じる、ページ数、キャプション
</div>

修正する内容は下記になります。

<div class="lb-dataContainer">~</div>を<div class="lb-outerContainer">~</div>の上に移動

修正前

<div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="#" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" 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><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>

修正後

<div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><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"></a></div></div></div><img class="lb-image" src="#" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div></div>

コメント

タイトルとURLをコピーしました