lightbox2_logo.jpg

FC2ブログに特殊効果のLightBox2を導入した際のデモ表示ページ。

LightBox2の導入方法については、「」を参照。
スポンサードリンク


LightBox2の各種サンプルと対応するHTMLコード

以下にLightBox2を使用した画像の特殊効果のデモと実際のHTMLコードを記載する。

画像が1つの場合の例

20150912_lightboxF1429_R.jpg

この場合のHTMLコード。
<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1429_R.jpg" data-lightbox="demo-1" data-title="画像が1つの場合のデモ"><img src="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1429_Rs.jpg" alt="20150912_lightboxF1429_R.jpg" border="0" width="225" height="300" /></a>

リンク文字列から表示する場合の例。

LightBox2を使った画像1つを表示する場合

この場合のHTMLコード。
<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1429_R.jpg" data-lightbox="demo-2" data-title="画像が1つの場合のデモ">LightBox2を使った画像1つを表示するデモ</a>

複数の画像を使用した例

タグ内のdata-lightbox="XXXX"のXXXXを同じ名前にすればグループ化できる。
20150912_lightboxF1315_R.jpg 20150912_lightboxF1296_R.jpg 20150912_lightbox_0578_R.jpg 20150912_lightbox_0633_R.jpg 20150912_lightbox_0179_R.jpg

この場合のHTMLコード。
<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1315_R.jpg" data-lightbox="group-1" data-title="ハレイワの看板"><img src="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1315_Rs.jpg" alt="20150912_lightboxF1315_R.jpg" border="0" width="300" height="225" /></a>

<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1296_R.jpg" data-lightbox="group-1" data-title="道端に咲いていたハイビスカス"><img src="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightboxF1296_Rs.jpg" alt="20150912_lightboxF1296_R.jpg" border="0" width="300" height="225" /></a>

<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightbox_0578_R.jpg" data-lightbox="group-1" data-title="ハレイワにある有名なシュリンプトラック"><img src="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightbox_0578_Rs.jpg" alt="20150912_lightbox_0578_R.jpg" border="0" width="300" height="169" /></a>

<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightbox_0633_R.jpg" data-lightbox="group-1" data-title="Surf'n Seaの看板とベンチ"><img src="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightbox_0633_Rs.jpg" alt="20150912_lightbox_0633_R.jpg" border="0" width="169" height="300" /></a>

<a href="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightbox_0179_R.jpg" data-lightbox="group-1" data-title="大好きなマカプービーチ"><img src="http://blog-imgs-82.fc2.com/l/a/b/lab319/20150912_lightbox_0179_Rs.jpg" alt="20150912_lightbox_0179_R.jpg" border="0" width="300" height="169" /></a>


各HTMLのコードは都合上改行されていますが、改行は必要ありません。

スポンサーサイト



スポンサードリンク

  

 カテゴリ