リンク先をサムネイル画像で表示してくれるjqueryプラグインの簡単設置

【この記事を読むのに必要な時間は約 5 分です。】

記事の中にリンクがある場合、クリックするのを躊躇する人もいると思う。
私は、自分の記事の中で画像やリンクを多用していることもあり、また、クリックして深刻な被害に会ったこともなく、明らかにおかしなリンク以外は普通にクリックしてしまう。
しかし、自分の記事でリンクを多用していることをかんがみ、少しでも記事を閲覧してくれる人に安心してもらうために、リンク先をサムネイル画像で表示してくれるJqueryプラグインを導入したいと考えた。
検索すると、「jquery-jLinkPreview」が有名みたい。しかし、サムネイル画像作成先のロゴが入るとのことで、採用せず。
更に検索するとASCII.jpの最終日：リンク先のサムネイルを自動的に表示しようで、自作Jqueryプラグインが紹介されていたので、こちらを設置することにした。これで、リンク先を警戒する人も、安心してくれると思う。

1 jsファイルの作成
2 jqueryプラグインの設置

jsファイルの作成

以下のスクリプトをthumbnail.jsファイルとして保存する。
保存する前に、
1.サムネイル画像のサイズを自分の好みのサイズに変更
現在のサイズは、320×240px
2.装飾を自分の好みに変更
現在の装飾は、round（角丸）、border（枠線）、shadow（影付き）が全て適用されている
3.サムネイル画像を表示したい場合のみ表示できるようにaタグにクラス名を設定
現在のクラス名はthumb
しておく。

上記1.2.については、下の4行目と21行目。
上記3.については、全てのaタグに適用する場合、クラス名を付けずに、下の22行目を(“a.thumb”)とせずに、(“a”)とする。

/* 自動サムネイル表示プラグイン for jQuery
2009.1 By KaZuhiro FuRuhata  */
$.fn.thumbnail = function(baseURL){
    var serverURL = "http://capture.heartrails.com/320x240/round/border/shadow?";
    return this.each(function(){
        $(this).hover(
            function(e){
                var url = $(this).attr("href");
                $("#jqThumbnail").attr("src",serverURL+url);
                $("#jqThumbnail").css("left",e.pageX+10);
                $("#jqThumbnail").css("top",e.pageY+10);
                $("#jqThumbnail").show();
            },
            function(){
                $("#jqThumbnail").hide();
            }
        );
    });
}
$(function(){
    $("body").append("<img src='' id='jqThumbnail' width='320' height='240' style='position:absolute;display:none'>");
    $("a.thumb").thumbnail();
});

なお、上記の設定についての詳細は、HeartRails Captureの画像APIのページで詳細に解説されている。

jqueryプラグインの設置

サーバーへのアップロード

上記で作成したthumbnail.jsファイルをサーバーにアップロードする。
なお、Jquery本体（現在の最新バージョンのJquery本体は、圧縮版でjquery-2.o.3.min.js）は既にアップロードされているものとする。

ヘッダー部分への記載

ヘッダー部分（<head>～</head>の間）に以下のように記載する。Jquery本体の記載はお約束。（既に他のJqueryプラグインで利用している場合は必要ない。）

<head>
<!-- Jquery本体ホスティング -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /Jquery本体ホスティング -->

<!-- thumbnail.js -->
<script type="text/javascript" src="サーバーのアップロード先/thumbnail.js"></script>
<!-- /thumbnail.js -->

</head>

利用方法

上記の例では、aタグにthumbというクラスを設定したので、サムネイル画像を表示したいリンクに以下のように記載する。

<a class="thumb" href="http://jump-up.info">jump-up.info</a>

これで表示される。
例：jump-up.info
このページのリンク全てに設置していますけど＾＾
以上

じょうより:

2014年7月25日 14:38

こんにちわ！
参考させてもらっております！
マウスオーバーでなく、固定した場所に表示する方法は応用でありますでしょうか
(facecookのような)

返信