|
|||||
Lightbox2 by Lokesh Dhakarダウンロードここから。↑ |
|||||
Lightbox2 2.5より仕様が変わったのでこちらに移動しました。>>> 新しいURLは、http://www.sharots.com/lightbox/index.html |
|||||
カスタム検索
|
|||||
|
|||||
■Lightbox2を使ったホームページの作り方 |
|||||
<head>〜</head>の中に <link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'> を書き込みます。 スタイルシートとグーグルのウェブフォントを使っているようです。 <body>〜</body>の中に <script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> を書き込みます。 |
|||||
■最初に表示される小さな写真「small」フォルダに、 クリックすると表示される大きな写真を「large」というフォルダに入れてあるとします。 <a href="large/大きい画像のファイル名.jpg" rel="lightbox" title="キャプションを入れる"> <img src="small/小さい画像のファイル名.jpg" width="小さい画像の幅" height="小さい画像の高さ" border="0"></a> width="小さい画像の幅" height="小さい画像の高さ"は、なくても表示されます。
|
|||||
|
|||||
■注意 Lightbox2の中にもindex.htmlというファィルがあります。 説明ファイルですが、すでにindex.htmlがあるフォルダにコピーする場合は、リネーム(名前の変更)するか 削除してからコピーしてください。 ※あなたのせっかく作ったindex.htmlが上書きされて無くなります。 index.htmlが、LightBox2を使うファイル(ページ)の場合、下のようになります。 |
|||||
index.html(クリックすると別ウインドウで画像が大きくなるページ) ├ cssフォルダ ├ imagesフォルダ └ jsフォルダ のようになります。 |
|||||
Lightbox2がうまくいかない場合、他のJavaScriptと相性が悪い場合があります。 初期のLightboxでは、スワップイメージ(カーソルを載せると画像が変わる)の記述があるとうまくいきませんでした。 head 内の <script type="text/JavaScript> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } などの記述や body タグの onLoad="MM_preloadImages …… の記述を消して確認してみてください。 Lightbox2 by Lokesh Dhakarダウンロードここから。↑ |
|||||
|
|||||
■FC2WEB 無料ホームページスペース | |||||