[
板情報
|
カテゴリランキング
]
したらばTOP
■掲示板に戻る■
全部
1-100
最新50
|
メール
|
1-
101-
201-
301-
401-
501-
601-
701-
801-
901-
1001-
1101-
1201-
1301-
1401-
1501-
1601-
1701-
1801-
この機能を使うにはJavaScriptを有効にしてください
|
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"
rel="stylesheet">
<script src="
https://code.jquery.com/jquery-1.12.4.min.js"
type="text/javascript"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"
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
(省略可)
:
※書き込む際の注意事項は
こちら
※画像アップローダーは
こちら
(画像を表示できるのは「画像リンクのサムネイル表示」がオンの掲示板に限ります)
スマートフォン版
掲示板管理者へ連絡
無料レンタル掲示板