超簡単！jQueryを使用した概要画像をポップアップ - imgPreview

簡単に概要画像のマウスオーバーでポップアップを作成できるimgPreviewが公開されています。



作者のホームページからデモを見ることが出来ます。

imgPreview


以下のコードは<a id=mgpreview-demo>の文字列に概要画像を見せる場合となります。

$('#imgpreview-demo a').imgPreview({
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

ソースコードも非常に軽いですし、非常に使いやすそうな印象です。


超簡単！jQueryを使用した概要画像をポップアップ - imgPreview