jQueryでマウスオーバー時に画像を表示する imgPreviewのデモページ

画像サイズをそのまま表示

• サンプル 1
• サンプル 2
• サンプル 3
• サンプル 4
• サンプル 5

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

画像サイズを指定して表示

• サンプル 1
• サンプル 2
• サンプル 3
• サンプル 4
• サンプル 5

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

画像サイズ指定。CSSで装飾して表示

• サンプル 1
• サンプル 2
• サンプル 3
• サンプル 4
• サンプル 5

$('ul#third a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $(link).stop().animate({opacity:0.4});
        $('img', this).css({opacity:0});
    },
    onLoad: function(){
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        $(link).stop().animate({opacity:1});
    }
});

#imgPreviewWithStyles {
	background: #222 url(image/loading.gif) no-repeat center;
	padding: 15px;
	z-index: 999;
}
#imgPreviewWithStyles span {
	color: white;
	text-align: center;
	display: block;
	padding: 10px 0 3px 0;
}

画像サイズ指定。CSSで装飾。テキスト内容を表示

• サンプル 1
• サンプル 2
• サンプル 3
• サンプル 4
• サンプル 5

$('ul#fourth a').imgPreview({
    containerID: 'imgPreviewWithStyles2',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $('' + $(link).text() + '').appendTo(this);
    },
    onHide: function(link){
        $('span', this).remove();
    }
});

#imgPreviewWithStyles2 {
	background: #222 url(image/loading.gif) no-repeat center;
	padding: 15px;
	z-index: 999;
}
#imgPreviewWithStyles2 span {
	color: white;
	text-align: center;
	display: block;
	padding: 10px 0 3px 0;
}

Webサイトのイメージ画像表示

• Google
• Yahoo

$('ul#fifth a').imgPreview({
    containerID: 'imgPreviewWithStyles3',
    srcAttr: 'rel',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $('' + link.href + '').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

#imgPreviewWithStyles3 {
	background: #222 url(image/loading.gif) no-repeat center;
	padding: 15px;
	z-index: 999;
}
#imgPreviewWithStyles3 span {
	color: white;
	text-align: center;
	display: block;
	padding: 10px 0 3px 0;
}