RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.1 ~ No.10 > 記事No.7

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

← 前の記事

次の記事 →

LightBox

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

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


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

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

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

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


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

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

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

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


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

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

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

解説:

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


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

・lightbox[sample]という部分は、他の画像とのグループを識別するものです。LightBoxの左右に出る"送りボタン" "戻しボタン"を押すと、"lightbox[ ]"の括弧の中が同じ文字列の画像に切り替わります。

title=" "のセミコロンで囲んだ中にコメントを入力すると、画像拡大時に下の空欄に同様のコメントが表示されます。(実装例参照)。


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


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

関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ