イメージプレビューjQueryプラグイン「imgPreview」[js]

james.padolsey.comより、イメージプレビューjQueryプラグイン「imgPreview」の紹介です。

デモページはこちらから

レギュラー、ノンスタイル

pre0902191.jpg

JavaScript

$('ul#first a').imgPreview();

レギュラー、サイズ指定

pre0902192.jpg

JavaScript

$('ul#second a').imgPreview({
    imgCSS: { width: 200 }
});

角丸、CSSスタイル

pre0902193.jpg

JavaScript

$('ul#third a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    // When image has loaded:
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    // When container hides: 
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

タイトル付き

pre0902194.jpg

JavaScript

$('ul#fourth a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        $('' + $(link).text() + '').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

Webリンクとプレビュー

pre0902195.jpg

JavaScript

$('ul#fifth a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    /* Change srcAttr to rel: */
    srcAttr: 'rel',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        $('' + link.href + '').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

ダウンロードはこちらから