HP・ブログ関連

クリックでその場に画像を拡大表示!ホームページに「LightBox」機能を実装する方法

投稿日:

画像をクリックすると、 別ページに飛ぶことなくその場で拡大表示してくれるjQueryの有名プラグイン「LightBox」を ホームページに実装する方法について、簡単に解説します!

▼ 実装例(画像をクリックすると拡大します)




①「LiteBox Plus+」プラグインのダウンロード

「LightBox Plus+」のダウンロードサイトへ行き、下の方にスクロールすると見える Downloadボタンを押して「lightbox_sample.zip」という.zipファイルをダウンロードしてください。

ダウンロードが済んだら解凍して中身を開いてください。使用するのは「sample」フォルダの中の「resource」フォルダとその中身だけです。

なので「resource」フォルダのみを、自身のホームページのディレクトリに配置してください。これがプラグイン本体となります。

② プラグインを呼び出すHTML行の記述

次に、ダウンロードしたプラグインを呼び出すためのHTML行を記述します。

本機能を追加したいページのhtmlを開き<head></head>内に以下の行を追加してください。

<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv" />
<script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>

※ hrefとsrcの部分は「resource」フォルダを置いた場所のパスを選択してください。(./ = 同階層 ../ = 一階層前)

③ 小画像(サムネイル)と拡大画像をリンクさせる

最後に小画像(サムネイル)と拡大後の画像をリンク付けします。

▼ ここでは上にある"実装例"を載せる際に記述した文を用いて解説します

<a href="../images/newtown/prison1_2.png" rel="lightbox[sample]" title="(ここにコメントが入ります)">
<img src="../images/newtown/prison1_2.png" width="150" height="75" class="hp_no7_sample"></a>

<a href="../images/newtown/prison2_1.png" rel="lightbox[sample]" title="(ここにコメントが入ります)">
<img src="../images/newtown/prison2_1.png" width="150" height="75" class="hp_no7_sample"></a>

<a href="../images/newtown/prison2_2.png" rel="lightbox[sample]" title="(ここにコメントが入ります)">
<img src="../images/newtown/prison2_2.png" width="150" height="75" class="hp_no7_sample"></a>

解説:

2行の下部分:拡大前の小画像(サムネイル)の設置行です。普段画像を載せる時と同じ手順でサムネ画像を配置してください。

2行の上部分:拡大後の画像の読み込み文です。<a>タグでサムネ画像を一緒に囲んでいるのが分かると思います。 表示する画像はサムネの画像と同じものを選択してください。

  • lightbox[sample]という部分は、他の画像とのグループを識別するものです。LightBoxの左右に出る"送りボタン" "戻しボタン"を押すと、"lightbox[ ]"の括弧の中が同じ文字列の画像に切り替わります。
  • title=" "のセミコロンで囲んだ中にコメントを入力すると、画像拡大時に下の空欄に同様のコメントが表示されます。(実装例参照)。

 

以上で実装は完了です!!

 

アルバムページやスクリーンショット集のページのように、複数枚の画像を載せるページを 作成する際にはとても便利なので、是非実装してみてください!

-HP・ブログ関連
-, , , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.