HOME > previewbubble > previewbubble [WebSnapr]

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>
ブックマーク登録: add to hatena hatena.comment 0 user add to del.icio.us 0 user add to livedoor.clip 0 user
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
『WEBサイト制作者に役立つメルマガ』発行!