マウスオーバーすると画像にキャプションを表示してくれる「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"との競合に注意
関連記事
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
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/ [...]