ホームページのサムネイル写真が大きくなって飛び出す

160space

160space
 

Lightbox2 by Lokesh Dhakar

ダウンロードここから。↑
  Lightbox2 2.5より仕様が変わったのでこちらに移動しました。>>>
新しいURLは、http://www.sharots.com/lightbox/index.html
 
カスタム検索
  Lightboxのイメージ
 
まとめてサイズを変更する・一括リサイズはこちら>>>
ピカサ・無料画像処理ソフト デジカメで撮った写真のサイズを変更したり、トリミング(必要な部分だけ切り抜く事)など使いやすいソフトです。
Picasa(ピカサ)はGoogleが無料で配布しています。

tifやフォトショップ形式(psd)も表示できます。
 
 

■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>

を書き込みます。
  ソースの変更・Lightbox2
 
 
  最初に表示される小さな写真「small」フォルダに、
 クリックすると表示される大きな写真を「large」というフォルダに入れてあるとします。


<a href="large/大きい画像のファイル名.jpg" rel="lightbox" title="キャプションを入れる">
<img src="small/小さい画像のファイル名.jpg" width="小さい画像の幅" height="小さい画像の高さ" border="0"></a>

width="小さい画像の幅" height="小さい画像の高さ"は、なくても表示されます。

■文字をクリックさせて大きい画像を別ウインドウで表示させる場合
<a href="large/image1.jpg" rel="lightbox" title="説明文">表示させる文字(タイトル)</a>

 赤い文字の部分をHTMLソースかメモ帳などで開いて書き込む。
 rel="lightbox"がないと大きくならない。

■クリックする度に画像が変わるようにする場合
<a href="large/image1.jpg" rel="lightbox[roadtrip]">image No.1</a>
<a href="large/image2.jpg" rel="lightbox[roadtrip]">image No.2</a>
<a href="large/image3.jpg" rel="lightbox[roadtrip]">image No.3</a>

<a href="大きい画像のファイル名1" rel="lightbox[roadtrip]">
<img src="小さい画像のファイル名1" width="小さい画像の幅" height="小さい画像の高さ" border="0"></a>

<a href="大きい画像のファイル名2" rel="lightbox[roadtrip]">
<img src="小さい画像のファイル名2" width="小さい画像の幅" height="小さい画像の高さ" border="0"></a>

<a href="大きい画像のファイル名3" rel="lightbox[roadtrip]">
<img src="小さい画像のファイル名3" width="小さい画像の幅" height="小さい画像の高さ" border="0"></a>

の要領で増やしていけばOKです。
[ ]内の名前は何でもいいです。

■キャプションを付ける場合

<a href="大きい画像のファイル名3" rel="lightbox[roadtrip] title="説明文(キャプション)・<br>=改行">

※[roadtrip]と書いてありますが、他のグループを作りたい時は、roadtripのところを他の名前にしてください。
  例えば [flower1] などにすると [flower1]で表示されるグループが出来上がります。
  同じように [flower2] などとグループを増やすこともできます。
 

次の写真へ、前の写真へ

lightboxの後に[roadtrip]を付けた例。 左=titleなしの場合、右=titleを付けた場合
カーソルを右側に動かすと「>」が、左側に動かすと「<」が出る。

  ■注意
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

ダウンロードここから。↑
 
 
アクセサリのメモ帳では、改行が無視されるかもしれません。
僕は、秀丸エディタを使っています。有料ですが便利です。
ホームページを作っていると、ドライバーをドライバに直したい時など、grepして置換などで一括編集できます。

フォルダ内の特定の文字列の検索と置き換え
 
 
 
■FC2WEB 無料ホームページスペース
 
ホームページ
inserted by FC2 system