更新日: 2014年11月12日
jQuery & JavaScript

jquery-live-previewでリンク先をプレビュー

jquery-live-preview（Jquery Live Link Preview）を使うと、a タグのリンクにマウスオーバーで、リンク先URLをポップアップでプレビューする機能を実装できます。トリガーとなるイベントはマウスオーバー（hover）の他、クリック（click）を指定することも可能。

以下公式のサンプルページとGitHub。
A LIVE link preview window for links on hover over using Jquery and CSS3
alanphoon/jquery-live-preview

小さなライブラリですが便利、コードを読むのも簡単でした。

— 環境 —
Rails 4.1

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

jquery-live-preview の設置

Rails プロジェクトでの利用なので、vendor/assets/jquery-live-preview に設置しました。Rails じゃない場合は、普通に GitHub の Readme 通りに進めればOKです。

Rails 利用の場合に、jquery-live-preview を vendor/assets 以下に配置する理由は以下を参考。

RailsのAsset Pipelineの理解とgemで管理しないJavaScriptライブラリの配置 | EasyRamble

また、Rails の Asset Pipeline 有効ではまった箇所に書いている通り、css 内の画像ファイルへのパス指定で url → image-url へと変更させる必要がある。

css/livepreview-demo.css

9行目を変更。

background-image:url('/images/icon_loading.gif');
　　↓
background-image:image-url('/images/icon_loading.gif');

background-image:url('/images/icon_loading.gif');

　　↓

background-image:image-url('/images/icon_loading.gif');

以上で Rails プロジェクトへの jquery-live-preview の設置自体は完了。

Asset Pipeline の対象となるように manifest 設定

jquery-live-preview が Asset Pipeline の対象となるように、読み込まれるべきファイルを application.js, application.css の manifest で require されるように指定します。

assets/javascripts/application.js

//= require js/jquery-live-preview

1	//= require js/jquery-live-preview

assets/stylesheets/application.css

*= require 'css/livepreview-demo'

1	*= require 'css/livepreview-demo'

a タグに class=”livepreview” の属性を追加

HTML側は、任意の a タグに class=”livepreview” の属性を追加するだけです。

<a href="http://www.bing.com" target="_blank" class="livepreview">Hover over to preview, click to link!</a>

1	<a href="http://www.bing.com" target="_blank" class="livepreview">Hover over to preview, click to link!</a>

公式サイトのコード例ですが、この場合は bing.com のページをプレビューで表示させます。Rails の場合であれば、ビューファイルでは通常 link_to メソッドを使うと思うので、link_to に class オプションを付ければ良いでしょう。

<%= link_to "Hover over to preview, click to link!", "http://www.bing.com", target: "_blank", class: "livepreview" %>

1	<%= link_to "Hover over to preview, click to link!", "http://www.bing.com", target: "_blank", class: "livepreview" %>

jquery-live-preview 用の jQuery コード

Rails で jquery-live-preview を動作させるための jQuery コードを追加します。

assets/javascripts/livepreview.js

デフォルト設定での利用。

$(document).ready(function() { 
  $(".livepreview").livePreview();
});

$(document).ready(function() {

$(".livepreview").livePreview();

});

オプショナルな初期設定を行う場合は以下。

$(document).ready(function() { 
  $(".livepreview").livePreview({
    trigger: 'hover',
    viewWidth: 300,
    viewHeight: 200,
    targetWidth: 1000,
    targetHeight: 800,
    scale: '0.5',
    offset: 50,
    position: 'left'
  });
});

$(document).ready(function() {

$(".livepreview").livePreview({

trigger: 'hover',

viewWidth: 300,

viewHeight: 200,

targetWidth: 1000,

targetHeight: 800,

scale: '0.5',

offset: 50,

position: 'left'

});

マウスオーバー(trigger: ‘hover’)で左側(position: ‘left’)に、ポップアップのプレビューを表示します。その他オプション詳細は、GitHub ページを参照。

以下、インラインでオプションを設定する例。

<a href="http://www.cnn.com" class="livepreview" data-offset="20" data-position="left" >Hover over this link</a>

1	<a href="http://www.cnn.com" class="livepreview" data-offset="20" data-position="left" >Hover over this link</a>

インラインによる設定は、assets/javascripts/livepreview.js で行った初期設定を上書きします。この場合、data-offset, data-position がそれぞれ、assets/javascripts/livepreview.js 内の offset, position を上書する。

オライリーのJavaScritp本（通称サイ本）は、昔かなり読み込みました。

JavaScript 第6版

jQuery レッスンブック jQuery2.X/1.X対応