caramel*vanilla > del.icio.usのTagCloudをポップアップ表示 - DoubleUp

lightbox風に別ページを表示

lightboxはサムネイルからページ移動なしに元画像をポップアップ表示してくれるjavascriptです。
先日これにちょっと似た感じで別ページを画面移動なしにポップアップしちゃうGreyBoxというのをみつけました。
Demoでは自サイト内でにゅるっとGoogleの検索画面を表示しててなんか面白いなー何かに使えないかなーとは思ってたんですがこのGreyBoxを使ってdel.icio.usのTagCloudをポップアップ表示しちゃうjavascriptをみつけたのでちょっと設置してみました。

amix.dk/projects - DoubleUp

サンプル↓
My del.icio.us

設置方法

1.)DoubleUpからスクリプト一式をDLして解凍
2.)doubleup&をgreyboxフォルダをFTPソフトで任意の階層にUP
3.)テンプレートの修正
・～部分に以下を追加
(WordPressの場合は「Header」のテンプレート)
<code> <link href="■greybox/greybox.cssへのパス" rel="stylesheet" type="text/css" media="all" /><script type="text/javascript" src="greybox/AmiJS.jsへのパス"></script><script type="text/javascript" src="■greybox/greybox.jsへのパス"></script><script type="text/javascript">//DoubleUp configurationvar DP_IMG_DIR = "■doubleup/ディレクトリへのパス";var DU_HEIGHT = 500;var DU_WIDTH = 550;function getDUHeight() { return DU_HEIGHT; }function getDeliUser() { return "■del.icio.usのユーザー名"; }//GreyBox configurationvar GB_IMG_DIR = "greybox/ディレクトリへのパス";var GB_ANIMATION = false;var GB_overlay_click_close = false;</script></code>
ワタシは例のごとく使用しているテーマのディレクトリにUPしたので以下のように記述しました。
<code> <link href="<?php bloginfo('stylesheet_directory'); ?>/greybox/greybox.css” rel=”stylesheet” type=”text/css” media=”all” /><script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/greybox/AmiJS.js"></script><script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/greybox/greybox.js"></script><script type="text/javascript">//DoubleUp configurationvar DP_IMG_DIR = "< ?php bloginfo('stylesheet_directory'); ?>/doubleup/”;var DU_HEIGHT = 500;var DU_WIDTH = 550;function getDUHeight() { return DU_HEIGHT; }function getDeliUser() { return “■del.icio.usのユーザー名”; }//GreyBox configurationvar GB_IMG_DIR = “< ?php bloginfo('stylesheet_directory'); ?>/greybox/”;var GB_ANIMATION = false;var GB_overlay_click_close = false;</script></link></code>
4.)リンクの追加
<code><a href="#" onclick="return GB_show('My del.icio.us bookmarks', 'doubleup/tag_cloud.htmlへのパス', DU_HEIGHT, DU_WIDTH);" title="My del.icio.us Tag Cloud"><strong>My del.icio.us</strong></a></code>

以上でおしまい。

フォントデカすぎとかで見た目をカスタマイズしたかったらdoubleupフォルダ内のtag_cloud.htmlとtag_bookmarks.htmlのcssをいじればいいと思います。

DoubleUpを設置したから公式のTagCloud表示用のスクリプトは外しました。
難点は背景のpng画像がたまにずれちゃうんですよね…
でもその場でブックマークが確認できちゃうのはすごいなーと思います。

Tags: del.icio.us, javascript, wordpress

Related posts

• del.icio.usのTOPが変わった - the del.icio.us hotlist (0)
• Technoratiの被リンク数を表示するLink Count Widget (0)
• サイトに雪を降らせる - DHTML Snowstorm! (2)
• del.icio.usにプライベート機能追加 (2)
• Pingbackの謎 (5)