JS)で画像のスライドショーを作る2012年4月下旬にLightboxJSがv2.51にバージョンアップしました。v2.51からはjQueryをベースにしたものに、新たに作り直されたようです。名称も少し前から「LightboxJS」から「Lightbox2」に名称がかわりました。バージョンと名称が変わってもこれまでの「LightboxJS」と同じように、HTMLドキュメント内のサムネールなどをクリックすると画面全体を隠すように拡大した写真を表示する仕掛けを設定できます。サンプルページはこちら画像ファイルを用意するだけで、さらにソースコードへの記述も少なくなり、非常に簡単に作成できるようになりました。ソースコードのダウンロード「Lightbox」のソースコードは以下のURLからダウンロードできます。v2.51」をクリックし、ファイルをダウンロードします。ダウンロードしたファイルは圧縮されているので、解凍してください。ダウンロードした解凍ファイルには、以下のファイルが用意されます。そのうち、使用するのは赤い囲みの部分です。それぞれそのファイルがもともと入っていたフォルダにいれたまま使用してください。用意するファイルは以下です。2.51」からダウンロードしたファイルの中の以下のファイルcss/lightbox.cssjs/jquery-1.7.2.min.jsjs/lightbox.jsimages/close.pngimages/loading.gifimages/next.pngimages/prev.png画像ファイル(サムネールサイズと拡大サイズ)HTMLファイル<head>タグの部分に、以下のソースコードを追加します。src="js/lightbox.js"></script><head>タグの部分にCSSファイルをリンクする以下のソースコードを追加します。type="text/css">これで、最初の準備は終了です。画像ファイルをHTMLファイルに追加します。画像を貼付けるタグの部分はテキストでも構いません。href="">の部分に大きい画像ファイルへのリンクと「rel="lightbox"」という属性を追加します。この「rel="lightbox"」という属性の追加は必須です。tilte属性は拡大した画像が表示したときのタイトルになります。001.jpgをHTMLファイルに表示させ、リンク先をslide/001.jpgにした場合は以下のように記述します。「rel="lightbox"」で拡大の画像が表示されます。「title="おでんがいっぱい"」の部分が、拡大した画像の左下に表示れます。height="90"></a>スライドショーのように画像を見せるにはもしも連続して写真を見せたい場合は、「rel="lightbox"」の部分を「rel="lightbox[グループ名]"」と記述します。グループ名の部分は英数字で記述してください。height="90"></a>Lightbox2.51には「キーボードショートカット」も用意されています。制作著作/ノンピリオド:。