したらばTOP ■掲示板に戻る■ 全部 1-100 最新50 | メール | |

ADSL

1874とはずがたり:2023/05/03(水) 18:09:42

https://allabout.co.jp/gm/gc/470618/
概要:Lightbox2は設置する必要なくCDN経由で読み込める
Lightbox2を自サイトで使用する場合でも、Lightbox2の構成ファイル(CSSやJavaScriptなど)を自サイトに設置しておく必要はありません。Lightbox2の動作に必要なファイルはCDN経由でも提供されていますから、読み込むためのHTMLソースを書きさえすれば、何の準備もなく使えます。具体的な書き方は後述しますが、読み込むための最新URLはCDNサイト上で調べられます。

準備:Lightbox2とjQueryを読み込む記述方法(わずか3行)
Lightbox2を読み込んで使用可能な状態にするには、以下のようにHTMLソース内に3行を記述するだけです。

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css&quot; rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js&quot; type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js&quot; type="text/javascript"></script>

上記の3行を、HTMLのhead要素内などに記述します。それぞれの意味は、下記の通りです。
使用:画像をLightbox2で拡大できるようにする書き方
ウェブページ上に掲載している画像を、Lightbox2を使ってその場で拡大表示できるようにするには、画像のリンクを作るHTMLソースを以下のように記述します。

<a href="sakura.jpg" data-lightbox="abc" data-title="桜写真拡大">
<img src="sakura-thumbnail.jpg" alt="桜写真">
</a>

<a href="hiki/hiki23-05-01-00.jpg" data-lightbox="abc" data-title="三舞発電所計画">
上で提起した計画
</a>


新着レスの表示


名前: E-mail(省略可)

※書き込む際の注意事項はこちら

※画像アップローダーはこちら

(画像を表示できるのは「画像リンクのサムネイル表示」がオンの掲示板に限ります)

掲示板管理者へ連絡 無料レンタル掲示板