画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
Carousels in combination with lightbox-plugins - Examples --- CarouFredSel 4.3.2
A carousel scrolling images with a "jquery.fancybox" lightbox (click on an image to open the lightbox): carousel pauses when opening the lightbox carousel resumes when closing the lightbox lightbox is circular JavaScript:close x $("#foo1").carouFredSel(); $("#foo1 a").fancybox({ cyclic : true, onStart : function() { $("#foo1").trigger("pause"); }, onClosed: function() { $("#foo1").trigger("play");
JCarousel & LightBox
JCarousel & LightBox 矢印ボタンで写真が横にスライドします。 写真をダブルクリックすると拡大表示します。 ダウンロードはこちらから
[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip
Poshy Tip - jQuery Plugin for Stylish Tooltips デモページ ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。 まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024x768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。 また、画像を変更することで、好みの背景に簡単に変更できます。
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
縦書きを実現するJavaScript「nehan」
twitter facebook hatena google pocket 日本人ですし、WEBでも縦書き使いたいですよね？ はいJavaScript！ 縦書きjQueryで実現するnehan - Project Hosting on Google Codeです。 （追記） ※作者の方からご指摘いただき、jQueryがなくても動くとのことです。 sponsors 使用方法 nehan - Project Hosting on Google Codeからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="nehan.js"></script> <script type="text/javascript">
コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル
ウェブサイトのトップページなどにぴったりなコンテンツスライダーやツールチップナビゲーションなどを実装したページを作成するチュートリアルをAcrisDesignから紹介します。 Create Portfolio Website With CSS/jQuery デモページ チュートリアルのポイントはダイナミックなアニメーションでスライドするコンテンツスライダーと補足情報がツールチップ表示されるナビゲーションです。 ツールチップナビゲーション マウスオーバーで補足情報を表示。 スクリプトのベースにはjQueryが使用されており、プラグインはそれぞれ下記のものが使用されています。 コンテンツスライダー Automatic Image Slider ツールチップナビゲーション Create A Floating Navigation チュートリアルではそれらのHTML/CSS/JavaScriptだ
IxEdit
IxEdit - The First On-the-Fly Interaction Design Tool for the Web. IxEdit (Public Beta) フリーダウンロード IxEdit は JavaScript ベースのウェブ用インタラクションデザインツールです。IxEdit を使えば、デザイナーはコーディング無しで DOM スクリプティングを実践し、ウェブページ上の要素をダイナミックに変更したり、追加したり、動かしたり、変形させたりすることができます。特に、IxEdit はウェブアプリケーションのプロトタイピング段階において様々なインタラクションを即座に作って試してみるのに役立つでしょう。 インタラクションとは？ インタラクションとは、ユーザーのアクションに応じてスクリーンの状態が変化することです。つまり、ユーザーインターフェースの振る舞いと言ってもよいでしょう。
[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す | バシャログ。
テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する jQuery のプラグインをご紹介します。 jquery.fieldtab.js 導入はとても簡単です。 まずは上記のサイトから「jquery.fieldtag.js」をダウンロード。 次に HTML の head 内に以下のコードを。#hoge のところは適用したいテキストフィールドの id を入れます。 <script type="text/javascript" src="jquery.fieldtag.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(function(){ $("#hoge").fieldtag(); }); /* ]]> */ </s
![[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
jQueryを使ってCSSを補強するテクニック15 – creamu
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Art Sexy Lightbox - Carousel
http://solidstate.jp/
[JS]ダイナミックにウェブサイトをナビゲートするスクリプト -jQuery Panel Magic
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法
[JS]Apple風の画像ギャラリー：カバーフロースクリプトの決定版 -ContentFlow
フッターを固定にしたサンプル | CSS Lecture