リンク先のスクリーンショットをプレビューさせられるJavaScript「jLinkPreview」

リンクをクリックする前に画面イメージを見せられると安心させられ、クリック率が上がるかもしれません。
jQueryプラグインのjLinkPreviewではこれを簡単に導入できます。 リンク先のスクリーンショットをプレビューさせられるJavaScript「jLinkPreview」サンプル

使用方法
jLinkPreviewからファイル一式をダウンロードします。 <link rel="stylesheet" href="jLinkPreview.css" />
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery-jLinkPreview-1.0.0.js"></script>
<script type="text/javascript">
$(function() {
$().jLinkPreview({
'preload': true, //ロードしておくかどうか
'width': 256, //幅
'height': 192, //高さ
'fade': 300, //フェード時間
'elementsHavingClass': 'class名', //プレビューさせたいclass
'background-color': '#333' //背景色
});
});
</script>

あとは普通にリンクを記述するだけでOKです。
<a href="#" class="class名">text</a>
なお、wIMGというサービスを使用しているので右下にウォーターマークが表示されます。

リンク先のスクリーンショットをプレビューさせられるJavaScript「jLinkPreview」サンプル

sponsors

「リンク先のスクリーンショットをプレビューさせられるJavaScript「jLinkPreview」」をシェアする

記事作成:
記事URL:

TOP > > > リンク先のスクリーンショットをプレビューさせられるJavaScript「jLinkPreview」