マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら
スクリプト
<link href= "mosaic.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="mosaic.1.0.1.min.js" type="text/javascript"></script>
実装
<div class="mosaic-block bar3"> <a class="mosaic-overlay" href="#"><div class="details">キャプション</div></a> <a class="mosaic-backdrop" href="#"><img src="xxx.jpg" alt="" /></a> </div>
ポイントは、スライドやフェイドさせるほうを"mosaic-overlay"に、動かさないものを"mosaic-backdrop"に指定します。逆バージョンもなかなかいい感じにできるかと。(←はじめにキャプションを表示しておいてマウスオーバで画像をスライドさせるなど)
デモはこちら
その他
CSSを読み込む場合は、".fade"との競合に注意
関連記事
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
Comment
“jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective” https://t.co/JPnsiAUSiP
2件のコメント http://t.co/M0Q4jv094Q “jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective” http://t.co/Cu9jWNDV6u
これ試してみよう。 / “jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective” http://t.co/vpi7F4dSte
[…] jQuery | マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 […]
jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective http://htn.to/uZ9Fi1 他2コメント http://b.hatena.ne.jp/entry/kwski.net/jquery/1006/#tw?u=michael0404 …
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 http://kwski.net/jquery/1006/ @kwski3さんから
キャプション
JQUERYでthumnailを呼び出したい http://ja.forums.wordpress.org/topic/19953
オーバーレイ
[*jQuery][*plugin] / jQuery: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 | Think deeply, Do less, More effective http://htn.to/fzkJby
WordPress › フォーラム » サムネイルにマウスオーバーするとタイトルが表示されるようにしたい https://ja.forums.wordpress.org/topic/14332
[...] http://kwski.net/jquery/1006/ [...]