previewbubble [WebSnapr]

previewbubbleは、リンク先をクリックする前にリンク先のサムネイル画像を表示してくれるライブラリーです。

previewbubbleを実装するのは非常に簡単なので、ここで紹介します。

websnaprのページからpreviewbubble.zipをダウンロードします。次に、developper keyをwebsnaprページにメールアドレスなどを入力して取得します。

previewbubble.jsファイルを開いて、添付されているbg.pngのパスを記入します。
このとき、メインのHTMLから見たパスになることに注意してください。
例えば、index.htmlでpreviewbubbleを実行する場合、index.htmlからみてimagesフォルダーの
下にbg.pngがある場合は、以下のように書きます。

var bubbleImagePath = 'images/bg.png';

さらに、previewbubble.jsの以下の場所にdeveloper keyを入力します。

var developerKey = 'developer keyをここに書きます';

HTMLのヘッダーで、previewbubble.jsをロードします。

<script type="text/javascript" src="previewbubble.js"></script>

HTMLの<a>タグに、class名がpreviewlinkになるように設定すると、自動でプレビューされるようになります。

<a class="previewlink" href="http://www.cnn.com">CNN</a>

ブックマーク登録： 0 user 0 user 0 user

(No Ratings Yet)

 Loading ...