タイ研修いってきました

超簡単!6ステップでのライトボックス設置方法

  • このエントリーをはてなブックマークに追加
超簡単!5ステップでのライトボックス設置方法

こんにちは。レジットの代表の浅井です。

レジットの制作実績も増えてきたので、そろそろ自社ホームページにレジットの制作実績を公開しようと思いました。

ただ、普通に載せるより簡単でちょっとお洒落に見えるように制作しようと思ったので、『ライトボックス』を採用することにしました。

 

『ライトボックス』とは

 Webページ上のサムネイル画像を拡大表示できるJavaScriptのライブラリ、および、そのライブラリを使用して実現できる画像表示機能のこと

 サムネイル画像をクリックした場合にモーダルウィンドウを開いて拡大画像を表示する。Ajaxの技術が使用されており、画面遷移せずになめらかに画像を閲覧できる

って、ことみたいです。

 

 

lightbox2.51の設置方法

ステップ1 必要なファイルをダウンロードする

コチラからライトボックスを無料ダウンロードして下さい。

 

 

 

ステップ2 ダウンロードしたファイルを解凍する

解凍すると以下の構成になっています。

 

ダウンロードしたファイルを解凍する

 

 

ステップ3 「css」・「images」・「js」の3つのフォルダをアップロードする

ルートディレクトリに、この3つのフォルダを配置

ダウンロードしたファイルを解凍する

※ パスを把握出来るなら、

別のディレクトリに設置したり、ディレクトリやファイル名の変更可能。

 

 

 

 

 

ステップ4 HTMLの~内に下記のソースを記述する

 

 

 

ステップ5 画像に拡大する画像のリンクを貼る

 

 

 

ステップ6 グループ名を指定すれば画像を閉じる事無く順送りで回覧出来るようにする

画像のグループ化

[グループ名]を統一する事で「next prev」、または、左右のクリックで移動します。

まとめ

意外と簡単にライトボックス(linghtbox)が設置できたと思います。

設置できない方は、きっと『パス』や『ディレクトリ』の指定方法が間違っていたりすると思います。

この記事を見て設置を試したけど、できない方はお問い合わせ下さい。
この記事を書いた人

浅井 脩太郎代表取締役

バスケット、フットサル、ゴルフ、スノボに将棋やチェス。多趣味のため、常にお金がない。 学生時代、地層に興味を持ち『土木』を学ぶ。社会人では、苦手分野である『IT』の世界へ。良き上司、良き先輩、良き同期、良き後輩に恵まれ、楽しい時間を過ごす。コンサルティング業務、システム開発では上流工程から下流工程のすべての業務に従事。 2013年、株式会社レジット創業。

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。