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 とかは指定出来た方が良いんだろうなぁ。 まぁ、そこらへんは勢いで作ったのでご愛嬌 :-P

ツッコミ大歓迎でございます!

Posted at: 
2008/03/19 03:02:49
2 Comments
2 TrackBacks
Tags: 
design
JavaScript
jQuery
plugin
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 な方です。
また、なげますね!

Created at: 
2008/03/20 00:03:32

nobu

>abde
次のお題はflickrかな?
いつでもよろしくどうぞー :-D

Created at: 
2008/03/20 00:15:20

Add Comment

Add Comment