jQueryでaタグをサムネイルにするプラグイン書いたよ。
abdeluxe な方にお願いされて、またまた調子に乗りました。
今回はaタグをサムネイルにする jQuery の野良プラグイン書いたよ ![]()
こんな感じにするとaタグがサムネイル画像になる。(実際はもうちょっとメンドクサイ)
// コレがデフォルト
$('a').asThumbnail();
サイズもちゃんと指定出来るよ。当たり前だけども。
// 引数でオプションを指定
$('a').asThumbnail({
width: 100,
height: 100
});
で、どうやって画像のパスを指定するかと言うと、 ぶっちゃけaタグの href 属性を正規表現で抜いてきて、 それを CSS で背景に指定してあげるだけ。 使い勝手が良いんだか悪いんだか分からんですが、 とりあえずソースを晒しておきます。
/**
* show element(s) as thumbnail
*
* @author Takanobu Izukawa
* @version 0.0.1
*/
jQuery.fn.extend({
/**
* asThumbnail
*
* @param options Object that contains some parameter.
* width: specified element width.
* default value is 170px.
* height: specified element height.
* default value is 170px.
* pattern: specified retrievable regex pattern.
* default value is `abdeluxe` custom.
* replacement: specified replace format.
* default value is `abdeluxe` custom.
* @return jQuery.
*/
asThumbnail: function (options)
{
// fix options.
options = options || {};
// declared default options.
var defaultOptions = {
'width': 170,
'height': 170,
'pattern': /^.*\/(\d+)\.html$/,
'replacement': '/blog/entryimg/$1.jpg'
};
// merge options.
options = jQuery.extend({}, defaultOptions, options);
// execute effect to each element(s).
return this.filter('a')
.each(function()
{
// retrieve image url.
var imageURL = this.href.replace(options.pattern,
options.replacement);
// attach new css.
jQuery(this).css({
'display': 'block',
'width': options.width + 'px', // should be width method instead?
'height': options.height + 'px', // should be height method instead?
'background-image': 'url(' + imageURL + ')',
'background-repeat': 'no-repeat',
'background-position': '50% 50%'
}).empty();
}).end();
}
});
たぶん、画像の position とかは指定出来た方が良いんだろうなぁ。
まぁ、そこらへんは勢いで作ったのでご愛嬌 ![]()
ツッコミ大歓迎でございます!
- Posted at:
- 2008/03/19 03:02:49
- 2 Comments
- 2 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2008/03/19/make-anchor2thumbnail-plugin-on-jquery/trackback/
TrackBacks
[jQuery]巡回 - 常山日記
The DOM Scripting Toolkit: jQuery jQueryでaタグをサムネイルにするプラグイン書いたよ。 jqunit: extending jquerys testrunner to all
- Created at:
- 2008/03/19 03:18:59
【jQuery】【これはすごい】エントリがサムネイルがしたのでし! - abdeluxe
うちの会社の中のひげの人に、エントリをサムネイル化してもらいました!!! とて...
- Created at:
- 2008/03/20 00:41:45
Comments
abde
abdeluxe な方です。
また、なげますね!
nobu
>abde
次のお題はflickrかな?
いつでもよろしくどうぞー