Javascript

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

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

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

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

demo page

昔よく見たテキストが横に流れていくスプクリクト

昔よく見たテキストが横に流れていくスプクリクト

昔よくテキストが横に流れるようなサイトって見かけたと思うですが、それをjQueryを使って出来るプラグインを見かけたので紹介しておきます。

demo page

クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch

クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch

「Easy Display Switch」はサムネイルなどを使って一覧で表示されているレイアウトをクリック一つで切り替えてくれるスクリプトです。

Easy Display Switch with CSS and jQueryで紹介、配布されているのですが、使い方などの簡単な解説をしたいと思います。

demo page

4つのバリエーションに変えれるLightbox風のスクリプト ColorBox

4つのバリエーションに変えれるLightbox風のスクリプト ColorBox

「ColorBox」はLightboxの様に画像を拡大表示するjQueryのPluginです。

拡大表示できるのは画像の以外にも、WebページやHTML、AJAX表示やインラインコンテンツにも対応しています。
一番凄い所はデザインのバリエーションは4パターン準備されおり、自分のサイトにあったテイストに合わせられるって所ですかね。

今回は「ColorBox」の簡単な使い方を解説したいと思います。

画像にALTに記述したキャプションを表示するスクリプト「jCaption」

画像にALTに記述したキャプションを表示するスクリプト「jCaption」

「jCaption」は画像のオルトを利用して、画像の上にキャプションを表示するスクリプトです。

今回は「jCaption」の使い方などを紹介したいと思います。

demo page

jQueryとprototype.jsを共存させる方法

jQueryとPrototypeを共存させる方法

prototype.jsとjQueryは実は競合(コンフリクト)します。

今さら...って記事なのですが、自分の紹介しているjQueryのプラグインを導入したが動かない...
こういう質問がいくつか寄せられ、実際みてみた所、prototype.jsが使われていたりしていたので、今さらですが紹介しておきたいと思います。

フッターを固定にしたサンプル

フッターを固定にしたサンプル

前回はヘッダーを固定にサンプルについて説明しましたが、今回はフッターを固定にしたサンプルを紹介します。

IE6に対応させる為に、以前にも紹介させて頂いたCyokodog::Diaryのcyokodogさんが使ったスクリプトを使いたいと思ったいたいと思います。

demo page

一つのHTMLでカテゴリ別に表示する内容を変えるjQueryのプラグイン

一つのHTMLでカテゴリ別に表示する内容を変えるjQueryのプラグイン

NETTUTSさんで紹介、配布されているプラグインです。

このjQueryのプラグインは一つのHTMLファイルで、すべてを表示と属しているカテゴリのみを表示するように切り替えが出来るようになっているので、使い方などを紹介したいと思います。

demo page

Lightbox風のスクリプト FancyBox

FancyBox

FancyBoxは分かりやすく言えばLightboxみたいなjQuery Pluginです。

Webページも読み込めますし、デザインもけっこうシンプルでよさげだったので使い方の解説をしておきます。

demo page

jQuery マウスオーバー時にサブタグクラウドを表示する

jQuery マウスオーバー時にサブタグクラウドを表示する

タグクラウドってよく見かけると思うですが、そのタグクラウドをマウスオーバーさせた時にサブタグクラウドって形でポップアップ表示するスクリプトがNoupeさんで紹介されていたので、使い方を解説したいと思います。

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年