jQueryでマウスオーバー時に画像を表示する imgPreview

jQueryでマウスオーバー時に画像を表示する imgPreview

imgPreviewはテキストにマウスオーバーした時に画像が表示されるjQueryのプラグインです。

マウスオーバー時に表示される画像もCSSで装飾出来るのでけっこう好きに変更出来ちゃいます。

demo page

…ここからが続き

imgPreview Plugin使い方

imgPreview Pluginの「Download」をクリックするとテキストデータが表示されるのですが、これをjsファイルで保存して下さい。
自分はimgpreview.jsとして保存しました。

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/imgpreview.js"></script>

body終了タグの上あたりに記述

<script>
jQuery.noConflict();
(function($){  
    
$('ul#first a').imgPreview();
$('ul#second a').imgPreview({
    imgCSS: { width: 500 }
});
$('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});
    }
});
$('ul#fourth a').imgPreview({
    containerID: 'imgPreviewWithStyles2',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $('<span>' + $(link).text() + '</span>').appendTo(this);
    },
    onHide: function(link){
        $('span', this).remove();
    }
});
$('ul#fifth a').imgPreview({
    containerID: 'imgPreviewWithStyles3',
    srcAttr: 'rel',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $('<span>' + link.href + '</span>').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});


})(jQuery);
</script>

※これをhead内に記述すると動作しません。

後は指定されているid名で記述されたリンク先の要素がポップアップとして表示されます。
どの要素がどれに関連しているかはデモページをご覧下さい。

Comments

匿名

匿名

デモページ

id=fifthのソースコードの
preタグ内でspanが表示できてないです。

2010年07月23日 19:38

MIYA

MIYA

現状自分の方でもゆいっちが望むプラグインを配布しているのを見かけた事がないような気がします…

もし見かけた際はエントリーしたいと思います!

2009年06月15日 13:43

ゆいっち

ゆいっち

ご丁寧にお返事ありがとうございます。やはり無理でしたか^^;自分でも調べてみたのですが意図するようなものがみつからない状態におりもし存在すればで構わないのですが望むような動作ができるjsなどご存知でしたら教えて頂けますと幸いです!

2009年06月15日 00:56

MIYA

MIYA

リンク要素から画像を呼び出しているので、ゆいっちさんが言っている通りに画像以外のURLに飛ばすのは、このプラグインでは無理ですね…

力になれなくてすみません。

2009年06月14日 21:31

ゆいっち

ゆいっち

これいいですね^^qtipにするか迷っていたところたどり着きました!
デモページの『画像サイズ指定。CSSで装飾。テキスト内容を表示』で試してみたのですがマウスオーバーで拡大画像表示しクリックするとそれぞれ指定のurlに飛ばす事って無理でしょうか?
リンクに画像を指定して機能するものなので仕様上の問題もあるかと思うのですが・・・

2009年06月14日 14:44

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article