2017年12月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

日記リンク

無料ブログはココログ

« モリシ をみた | トップページ | 本 »

メモ:Lightbox 2.04

とあるサイトの 画像ポップアップに 

lightbox の指定指示があったので試してみた

思っていたより簡単だった

解凍すると

lightbox2
├ index.html
├ css ─ lightbox.css
├ js ┬ effects.js
│ ├ lightbox.js
│ ├ prototype.js
│ └ scriptaculous.js
└ images ┬ blank.gif
├ close.gif
├ image-1.jpg
├ loading.gif
├ next.gif
├ nextlabel.gif
├ prev.gif
├ prevlabel.gif
└ thumb-1.jpg

となるので index.htm 以外をアップ

導入ページのヘッド部分に

<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

追加

aタグの後ろに追加

rel="lightbox"

サンプル

<a href="images/0001.jpg">

<a href="images/0001.jpg">0001.jpg" rel="lightbox">

スライドショーで表示させたい場合は

rel="lightbox[任意の半角英数字]"

スライドショーで一緒に見せる画像は同じ半角英数字に

<a href="images/0001.jpg" rel="lightbox[001]">リンク画像など</a> <a href="images/0002.jpg" rel="lightbox[001]">リンク画像など</a> <a href="images/0003.jpg" rel="lightbox[001]">リンク画像など</a>

思ってたより簡単に導入できました


Lightbox 2.03の導入解説を読んでいて・・・・・・

初め動かなかったのは内緒(^_^;


ちなみに2.03は以下です


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

« モリシ をみた | トップページ | 本 »

メモ」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/997/43832711

この記事へのトラックバック一覧です: メモ:Lightbox 2.04:

« モリシ をみた | トップページ | 本 »