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>
コメント