THE HAM MEDIA BLOG

【TB企画】これまでに使った便利なjQueryプラグイン

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
プラグイン
plugins

TB企画!これまでに使った便利なjQueryプラグイン

5509のnoriさんとチャットで会話しているときに

  • nori: みんなでよく使うプラグインをまとめる、とかは?
  • nori: ↑それぞれがまとめる
  • nori: 意外と知らないやつとかあったりするかも
  • hiromu45: 皆さんはどうですかー?大募集!
  • hiromu45: みたいなのやりますか。

なんて話題になったので、TB(トラックバック)企画にしちゃいます!

自分の普段使うプラグインやこれは便利だ!なんてプラグインを書いてエントリーに書いて、トラックバックしてください!

続きを読む

ダイアログボックスを美しくみせる「jQuery Alert Dialogs」を使ってみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
アラート
ダイアログ
javascript
jquery
plugin

ダイアログボックスを美しくみせる「jQuery Alert Dialogs」を使ってみる

どうしてもOSに依存してしまうアラートボックスやダイアログボックス。しかし、それをきれいに見せてくれる「jQuery Alert Dialogs」というのがある。仕事で、ダイアログボックスを変えたいとの要望があったようで、これを使ってみることにしたので、メモ代わりにエントリー。

続きを読む

テキストにタイプライターのようなエフェクトを加えるText Effects Plugin

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
テキスト
エフェクト
jquery

テキストにタイプライターのようなエフェクトを加えるText Effects Plugin

jQuery Grab Bag」で、『Text Effects Plugin』というテキストにエフェクトを加えて表示するプラグインが紹介されていました。なかなかユニークだったので紹介がてら試しに使ってみることにします。

続きを読む »

優雅なWeb制作のためのJSのyuga.jsが最新版リリース

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
javascript
yuga

yuga.js

inputlog -yuga.js 0.7.0 - 優雅なWeb制作のためのJavaScript

Webサイトを制作する際に「こんな機能があったらなー」というのを実現してくれる、
jQueryのプラグイン「yuga.js
そのyuga.jsがバージョンアップしたようなので書いておきます。

続きを読む »

イメージのLightbox系スクリプトのまとめ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
javascript
Lightbox
イメージ

FancyBox

画像の拡大にLightboxとかThickboxとかを使うのですが、
他にもいろいろ出ているので、自分のメモのために一覧にしておく。
一覧はライブラリごとにまとめてみました。
まとめてみると、いろいろあるものですね。

続きを読む »

jQuery:Simple Controls Galleryを試してみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
gallery
ギャラリー
photo
javascript
jquery

Simple Controls Galleryを試してみた

なんだかいろんなところで紹介されている、
シンプルだけどかっこいいフォトギャラリー、
Simple Controls Gallery

使いやすいのかどうかも見るために使ってみることにした。

設定の仕方や注意点なども書いておいたので参考にしてください。

続きを読む »

半透明のレイヤーでページや要素をブロックする「jQuery BlockUI Plugin」を試してみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
javascript
plugin
プラグイン

半透明のレイヤーでページや要素をブロックする「jQuery BlockUI Plugin」

jQueryのプラグインとかを見ていた時に、
なにやら面白そうなプラグインを発見。

「jQuery BlockUI Plugin」

画面全体やもしくは要素に対して、
半透明のレイヤーを表示させてブロックするプラグインだ。

使う機会はでてくるかわからないけど、
とりあえず使って試したくなったので、
勉強のためにメモエントリーしておく。

続きを読む »

jQueryのanimateで背景色や文字色の変化をできるようにするプラグイン『Color Animations』

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
plugin
javascript
COLOR

背景色や文字色の変化をできるようにする

はっ!?内容とリード文があってない!?
ってことでいつのまにやら修正しておく。

背景色とか文字色とか、色関係をアニメーションさせようと思っても、
どうやらjQuery単体ではアニメーションできない。

なぜ!?

とまぁ、背景とか色関係をアニメーションで使いたいなと思ったので、
色関係を扱えるようにするプラグインを見つけたので、メモエントリーしておく。

続きを読む »

jQueryを使って背景を角丸にする

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
javascript
jquery
角丸

jQueryを使って背景を角丸にする

最近jQueryのプラグインの紹介ばかりですが、
今日もjQueryのプラグインの紹介。

今日はjQueryのプラグインで、
簡単に角丸にしてしまうものを紹介します。

JQuery Curvy Corners

有名なのだと「jQuery Corner」なのですが、
JQuery Curvy Cornersの方が画像とかにも使えるので、
こっちのほうが利用するケースが多いかなと思い使ってみました。

続きを読む »

jQueryを使って透過pngをIE6で適応させる方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
png
javascript
jquery

PNG Fix

最近PNGでの表現が流行り?

ちょっとその辺は情報不足なので省略しますが、
今日はjQueryのプラグインを使って透過PNGをIE6に対応させてみます。

透過PNGを使えるほうにする方法は、
すでにいろいろな方法が紹介されていて、最近でも、
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ
なんてのが紹介されたりしています。

今回紹介するjQueryのは、もうかなり前からあるのですが、
個人的に知らなかったので、メモとしてエントリーしておきます。

続きを読む »

jQuery:URLからそのサイトのファビコンを表示してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
favicon
ファビコン
javascript

URLからそのサイトのファビコンを表示してみる

URLとかリンクの前に、サイトのファビコンが表示できたらなー
なんて思ってjQueryでできないか考えてみたけど、
なかなか難しい技術のようだってことはわかった。
自分でスクリプト作るのは難しいかな?

とりあえずプラグインなどをみつけたのでまとめておく。

続きを読む »

jQueryを使ってメニューを装飾:LavaLamp menuを使ったメニューを作ってみる その2

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
javascript
メニュー

LavaLamp menuを使ったメニューを作ってみる その2

昨日書いた
jQueryを使ってメニューを装飾:LavaLamp menuを使ったメニューを作ってみる
いろいろ間違い等もあったのですが、現在IE6以外では正常に動作するようになりました。

IE6では、なぜか動作中の背景画像を毎回ダウンロードしに行っているようで、
かなり動作が重くなってしまい、それ故スムーズに動作しなかったようです。

画像があるところのサーバーが違うからなのだろうか?

自分のパソコン内で実験してみたときは、
IE6でも、画像が途切れてしまうCSSの設定ミスはあるものの、
スムーズに動作していたので、たぶん読み込みの問題なのだろうなって思います。

さて、昨日は画像だけでやってみたのですが、
参考サイトをみてみたところ、他のサンプルもあって、
画像じゃなくてもできるようだったので、
そちらのサンプルも作ってみる事にしました。

今回は背景色やボーダーの設定で作ってみました。

若干バランスは悪いですがご了承ください。

続きを読む »

jQueryを使ってメニューを装飾:LavaLamp menuを使ったメニューを作ってみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
javascript
メニュー

LavaLamp menu

同じ会社のYさんが、動くメニューが作りたいということで、
JavaScriptでアニメーションするようなメニューを探していた。

そしてYさんが「Fancy menu」というのを見つけていた。
Mootoolsのライブラリを使って動作するものらしい。

MootoolsではなくてjQueryのプラグインで無いかなって探したところ、
LavaLamp menu」というプラグインを発見。

いろいろなところで利用できそうなので、試しに使ってみた。

※現在IEだとうまく動作しない様子。
CSSの設定がうまくいっていないのもあるので後ほど調節予定。

※追記(8/22)
IE7ではうまく動作するようです。
IE6ではここのブログ上ではうまく動作しない現状です。

※追記
全体的にうまく動作していないので後で修正します。
今はまだスムーズに動いてくれないようです。

※追記(8/22) Fx,Opera,Safariでの問題解決しました。 ただ単にjquery.easing.jsが読み込めていなかっただけでした。 IEの修正はもうしばらくかかりそうです。お待ちください。

続きを読む »

jQueryを使って領域をスムーズに伸縮するナビゲーション

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
javascript
jquery
ナビゲーション

jQueryを使って領域をスムーズに伸縮するナビゲーション

ネタ元:jQueryを使ってApple風デザインのナビゲーション | CSS Lecture

ちょうどjQueryのプラグインを探していたときに、
この「Kwicks for jQuery」をみつけて、
同じタイミングで、CSS LectureのMIYAさんがエントリーを書いていたので、
僕も使ってみる事にしました。

ただ、そのまま同じのをあげるのもなんなので、
自分で画像も簡単に作って使ってみました。

そして作っているときに、IEでのバグというか、
問題が起こることも見つけたので、それも書いておきます。

続きを読む »

ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
photo
Lightbox
javascript
jquery
画像
写真

ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法

とある友人が、先日エントリーした「札幌の花火大会を見てきた:フォトアルバム」をみて、
「写真をクリックしたら、画面に綺麗に表示されるJavaScript、
 それの導入方法が知りたい。!」
という様な連絡があった。

メールで書いて送ろうかとも思ったんだけど、
自分でも再度復習を兼ねて、ブログのエントリーにしてみた。

以前にもエントリーしたことがあるのですが、

今回もjQueryとそのプラグインを使って、 ブログとかサイトで写真や画像をLightboxを使って表示させる方法を説明します。
写真を張って、その写真へのリンクをつけるだけで、
自動的にLightboxで表示させる方法も書いておきます。

ちなみに以前のエントリーは関連エントリーを参照してください。

続きを読む »

優雅なWeb制作のためのJavaScript:yuga.jsがバージョンアップ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
タブ
jquery
javascript

inputlog - yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript

yuga.js

jQueryを使い、優雅なWeb制作をするためのJavaScript「yuga.js
そのyuga.jsがバージョンアップしたようです。

続きを読む »

続:画像を自動的にLightBoxで表示するようにした

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
javascript
Thickbox
写真
jquery
Lightbox
photo

LightBox
jQuery LightBox plugin

前のエントリーのの続きとして書きます。

前回のエントリー以降、他のJavaSctiptを調べた結果、
原因を発見、なんとかjQuery LightBox pluginで表示できたので、
あらためてエントリーしておきます。

続きを読む »

失敗談:画像を自動的にLightBoxで表示するようにしたけど、なぜか表示されない・・・

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
Thickbox
javascript
jquery
失敗
photo
Lightbox

jQuery LightBox plugin
jQuery LightBox plugin

今までは画像をクリックしたらthickboxで画像を表示してました。
それよりもLightBoxの方が綺麗だなって思ったので、
早速変更しようとしたのですが、
なぜか表示できなかったのでとりあえずメモしておきます。

続きを読む »

Validに対応させたコードを綺麗に見せる『SyntaxHighlighter』導入

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
SyntaxHighlighter
Pre
ソースコード
javascript
SyntaxHighlighter

JavaScriptやCSSの例を載せるときに、
普通に見せていただけでは色分けなどされていないし、
行番が伝えにくかったりして、何かと不便だった。

そこで、ソースコードを綺麗にしてくれるJavaScriptがあったので、
導入してみることにした!

続きを読む »

アップロードした画像を自動的にThickBoxで表示

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
Thickbox
jquery
javascript
ThickBox sample

画像を綺麗に表示したいなーって思ったので、
jQueryを使って、画像へのリンクを
ThickBoxで表示するようにしてみました。

※ 2008/05/09追記

現在はLightBoxで自動表示されるように変更してあります。

参照:続:画像を自動的にLightBoxで表示するようにした

続きを読む »

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。