勉強したことのメモ

webプログラマが勉強したことのメモ。

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

   

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下から右上に変更し、更に閉じるボタンを画像からテキスト表示に変更したかった。調べてみたところオプションでの変更は難しく、JavaScriptファイル内容の変更及びCSSでの調整が必要っぽい。以下に方法をメモ。

 

サンプルページ

https://taitan916.info/sample/lightbox2/

画像拡大時に右上に「クリックで閉じる」というテキストが表示され、当該テキストをクリックすると画像が非表示になる点を確認できる。

 

Lightboxの準備

以下からバージョン2.7.1のlightbox.jsをダウンロードする。

https://cdnjs.com/libraries/lightbox2/2.7.1

61行目付近の以下コメントアウト&追記。「クリックで閉じる」部分は適宜変更する。

//以下コメントアウト
//$("<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><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));
//以下追記
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-closeContainer"><a class="lb-close">クリックで閉じる</a></div><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><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><span class="lb-number"></span></div></div></div></div>').appendTo($('body'));

上記JSファイルを適当なディレクトリにアップロードし以下で読み込む。

<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./lightbox.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">

 

CSSで調整

<style>
.lb-closeContainer {
    position: absolute;
    top: -20px;
    right: -1px;
    color: #fff;
    font-weight: bold;
}
.lb-closeContainer .lb-close {
    display: block;
    float: right;
    height: 24px;
    background-size: contain;
    text-align: right;
    outline: none;
}
.lb-closeContainer .lb-close:hover {
    cursor: pointer;
    opacity: 1;
}
</style>

 

 - jQuery, JavaScript

  関連記事

JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...

submit関連のjQuery

<?php //jQueryでのsubmit,エンターキーでのsubmit ...

JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...