リンク先のスクリーンショットを表示(jQuery)

前回の記事「jqueryを使ったツールチップとイメージプレビュー」で、マウスオンでリンク先のスクリーンショットを表示される方法を書きましたが、こちらは自分でスクリーンショット画像を用意して作成しなければなりませんでした。

今日紹介するのは同じくjQueryのプラグインを使って自動的にスクリーンショットを撮ってきてくれる方法です。

【サンプル】
リンク文字の上にマウスを置いて下さい。
(このブログは重いので、scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてから試して下さい。)
IEでは表示されませんので、IEでご覧の方は何のことやら??ですが…(^^ゞ

Yahoo!Japan     気の向くままに…


2011092401 ただし、問題がありまして……。
IEでは表示されません。
全く表示されないのであればそれはそれでよかったのですが、実際はスクリーンショットは表示されず、スクリーンショットの周りのフレームだけは表示されるという間抜けな感じに……。

2011092402.jpgそこで、フレームを付けないようにして(IEでは全く表示されないようにして)設定してやると、他のブラウザではちょっともの足りませんが、まぁ見れるかな…という感じです。

以下、導入方法と使い方です。

2011092403.jpg
jQuery jLinkPreview 1.0.0から「j-Link-Preview-v1.0.0.zip」をダウンロード(保存)します。

2011092405.jpg
ダウンロードしたファイルを展開します。
この中の「v1.0.0」フォルダ→「Source」フォルダの中身を使います。

2011092407.gifIEでフレームを表示できないようにするためや、フレームデザインを変える場合はCSSを編集します。
「メモ帳」でも編集できますが、ズラズラっと横並びに表示されしまって見にくいので、「ワードパッド」で編集する方がやりやすいかもしれません。

「ワードパッド」を起動し、「開く」-「▼」から「すべてのファイル」を表示させてからcssフォルダの中の「jLinkPreview.css」を選択します。

2011092408.gif「border:7px #555 solid;」の部分を編集します。
フレームの幅が「7px」になっているので、ここを「0px」にするとフレームがなくなり、IEでは表示されません。
その他のブラウザでは、スクリーンショットだけが表示されるようになります。

IEでの表示を気にしないのであれば、フレームの幅、色、線のタイプなど、お好みで編集して下さい。

上書き保存し、アップロードしておきます。

2011092409.gif「jquery-1.6.1.min.js」ファイルと「jquery-jLinkPreview-1.0.0.js」「jquery-jLinkPreview-1.0.0-min.js」のどちらかのファイルを使います(ここでは「jquery-jLinkPreview-1.0.0.js」を使いました)。
「jquery-1.6.1.min.js」は他にjQeryを使っていて、すでにアップロード及びテンプレートに記述のある場合は必要ありません。
FC2では「.(ドット)」が入っているファイルはアップロードできないので、「.(ドット)」のないファイル名に変更してアップロードしておきます。(例:「jquery-1-6-1.js」など)。

2011092410.gifワードパッドを使って「jquery-jLinkPreview-1.0.0.js」を開きます。
ワードパッドから開くときに、「▼」-「すべてのファイル」にしておかないと「.js」ファイルは見えませんので、「すべてのファイル」にしておいてから選択してください。

←説明画像赤線部分に下記を付け加えます。

var cs = document.createElement("link");
cs.rel="stylesheet";
cs.href="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/jLinkPreview.css";
cs.type="text/css";
document.getElementsByTagName('head')[0].appendChild(cs);

↑赤字のURLは先程のcssファイルをアップロードしたURLになります。

2011092411.gif←こんな感じ。

FC2では「.(ドット)」が入っているファイルはアップロードできないので、「名前を付けて保存」で「.(ドット)」のないファイル名で保存します(例:「jquery-jLinkPreview.js」など)。

「.(ドット)」があっても支障のないサイトはそのまま上書き保存で構いません。
アップロードします。

それぞれのアップロードしたURLが必要となりますので、アップロード画面で「表示」をクリックするなど、URLがわかるようにしておいてください。

管理画面の「テンプレートの設定」で、編集したいテンプレートの「複製」を念のために作って編集します。

2011092010.gif
HTML編集のhead内に下記を書き加えます。

(どこに挿入すればよいかわからない場合は</head>の直前にでも挿入してください。)

<script type="text/javascript" src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/jquery-1-6-1.js"></script>
<script type="text/javascript" src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/jLinkPreview.js"></script>
<script type="text/javascript">
$(function() {
$().jLinkPreview({
'preload': true,
'width': 256,
'height': 192,
'fade': 300,
'elementsHavingClass': 'linkpreview', //スクリーンショットを表示させるためのclassを記入
'background-color': '#333'
});
});
</script>

↑赤字のURLは先程の.jsファイルをアップロードしたURLになります。
青字はプレビューさせたいクラス名を入力します。
ここでは「linkpreview」としました。

2011092412.gif
こんな感じ。

「更新」をクリックして確定しておきます。


以上で使える準備ができました。



使い方です。

Yahoo!Japan(上部にタイトル付き)

<a href="http://www.yahoo.co.jp/" class="linkpreview" target="_blank" title="Yahoo!Japan">Yahoo!Japan</a>

赤字→リンク先URL
青字→オンマウスでスクリーンショットを表示させるのに必要な記述
ピンク字→この場合は新しいタブで開く
水色字→スクリーンショット上部に表示されるタイトル
黄緑字→表示される文字

気の向くままに…

<a href="http://sakuraxren.blog103.fc2.com/" class="linkpreview" target="_blank">気の向くままに…</a>

赤字→リンク先URL
青字→オンマウスでスクリーンショットを表示させるのに必要な記述
ピンク字→この場合は新しいタブで開く
黄緑字→表示される文字


関連記事

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ