こんにちは。レジットの代表の浅井です。
レジットの制作実績も増えてきたので、そろそろ自社ホームページにレジットの制作実績を公開しようと思いました。
ただ、普通に載せるより簡単でちょっとお洒落に見えるように制作しようと思ったので、『ライトボックス』を採用することにしました。
『ライトボックス』とは
● Webページ上のサムネイル画像を拡大表示できるJavaScriptのライブラリ、および、そのライブラリを使用して実現できる画像表示機能のこと
● サムネイル画像をクリックした場合にモーダルウィンドウを開いて拡大画像を表示する。Ajaxの技術が使用されており、画面遷移せずになめらかに画像を閲覧できる
って、ことみたいです。
lightbox2.51の設置方法
ステップ１ 必要なファイルをダウンロードする
コチラからライトボックスを無料ダウンロードして下さい。
ステップ２ ダウンロードしたファイルを解凍する
解凍すると以下の構成になっています。
ステップ３ 「css」・「images」・「js」の３つのフォルダをアップロードする
ルートディレクトリに、この３つのフォルダを配置
※ パスを把握出来るなら、
別のディレクトリに設置したり、ディレクトリやファイル名の変更可能。
ステップ４ HTMLの～内に下記のソースを記述する
|
1 2 3 |
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> |
ステップ５ 画像に拡大する画像のリンクを貼る
|
1 2 |
<body>～</body> 内のリンクの貼り方 <a href="ディレクトリ/拡大画像.jpg" rel="lightbox">画像/テキスト</a> |
ステップ６ グループ名を指定すれば画像を閉じる事無く順送りで回覧出来るようにする
画像のグループ化
|
1 |
rel="lightbox" を rel="lightbox[グループ名]" |
[グループ名]を統一する事で「next prev」、または、左右のクリックで移動します。
まとめ
意外と簡単にライトボックス（linghtbox）が設置できたと思います。
設置できない方は、きっと『パス』や『ディレクトリ』の指定方法が間違っていたりすると思います。
この記事を見て設置を試したけど、できない方はお問い合わせ下さい。
この記事を書いた人
浅井 脩太郎代表取締役
バスケット、フットサル、ゴルフ、スノボに将棋やチェス。多趣味のため、常にお金がない。 学生時代、地層に興味を持ち『土木』を学ぶ。社会人では、苦手分野である『IT』の世界へ。良き上司、良き先輩、良き同期、良き後輩に恵まれ、楽しい時間を過ごす。コンサルティング業務、システム開発では上流工程から下流工程のすべての業務に従事。 2013年、株式会社レジット創業。
WEB制作
ランキング
制作実績
