クールなjQueryのlightbox系スクリプト集 – creamu
サイトのデザインに合うlightbox系スクリプトを探している。 そんなときにおすすめなのが、『The Best jQuery Lightbox Scripts』。クールなjQueryのlightbox系スクリプト集です。 知らないのもあったりでいい感じのものが揃っていますよ。 CeeBox アニメーションがかっこいいCeeBox。画像だけでなく、iframeやFlash、動画を読み込めて、カスタマイズが可能。Flashの表示にはswfobjectを使用 ColorBox おっと思うような動きをしてくれるColorBox。画像以外も読み込み可能 Facebox facebookスタイルで画像をオーバーレイ表示。これは有名ですね。シンプルでとてもいい Fancy Zoom 画像やFlashなどを読み込める。すーっと拡大してくる動き FancyBox 動きがとてもクールなFancyBox ほか
コンテンツにエフェクトを掛けるjQueryプラグイン10個 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラ
[JS]jQueryのプラグイン33+1選 -2009年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Organic Tabs アニメーションで収縮するタブコンテンツ。 flips パネルを多彩なアニメーションでスライド。 bxSli
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […] Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect
【ハウツー】Persevere実践チュートリアル - 注目のJavaScriptアプリケーションサーバが1.0に (1) まずはテストで動作させてみるところまで | エンタープライズ | マイコミジャーナル
JavaScriptアプリケーションサーバ - Persevereとは Persevereプロジェクトは11月13日(米国時間)、Persevereの最新版であるPersevere 1.0をリリースした。PersevereはJSONストレージ・JavaScriptアプリケーションサーバのひとつ。Dojo Toolkitライブラリで著名なThe Dojo Foundationが管理するプロジェクトで、The BSD License・The Academic Free License 2.1のデュアルライセンスのもとで公開されている。 おもな機能は次のとおり(Persevere: The JSON database and JavaScript application serverより一部を抜粋・要約)。 JSONやHTTP/RESTといったWebインタフェースを利用した、永続的なデータへの作
jQSlickWrap - Slick text wrapping for jQuery
jQSlickWrap the pixel-perfect prose plugin v0.2 need to wrap content around an image? ...really around an image? jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images. It's as simple as $('img').slickWrap(); download it! contribute! Why would I need this? If you've ever felt the need to wrap stuff around an irregularly-sha
Panoramic Photoviewer in Javascript - Gaya Design
PRESS RELEASE You might of seen my work around the web. When My Direct Blinds contacted me back in late 2015 with an irresistible offer to help build out their digital assets and join the company with an ownership stake, it was an offer I could not refuse. Web design, interior design and window furnishings shared a common ground and something I could get behind. Thus, the decision was made to end
Solution for Long Dropdowns
If your dropdowns are this long, you might wanna take a re-look at your navigational strategy. But, if it makes sense, a technique like this may be beneficial. PROBLEM: Dropdown menu goes down below the fold when opened, making lower items inaccesible. SOLUTION? Make menu scroll up and down as you mouse through it. Really Tall Menu Artificial Turf Benches & Bleachers Communication Devices Dugouts
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、ＵＩも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加:phpspot開発日誌
要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加できる jquery.datasort.js が公開されています。 例えば、次のようなHTMLがあったとします。 <ul class='n'> <li>4.09</li> <li>4.10</li> <li>67.8</li> <li>100</li> <li>-98</li> <li>67.7</li> <li>23</li> </ul> datasort メソッドを実行すると次のようにソートが可能。 なんと、これを実現するためにJavaScriptコードはたった以下の1行だけ。 $('ul.n li').datasort({datatype: 'number', reverse: true}); 上記は、数字でソートを行っていますが、以下のデータ型についても要素を簡単にソートが出来て非常に便利です。 アルファベ
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」:phpspot開発日誌
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 最初見たときはLightBoxも驚きましたが、これがかなり進化してきています。 TopUpは、次のように、閉じるボタンやドラッグ＆ドロップでき、リサイズできるOSのようなLightBoxを実現できます。 実現できる機能を簡単にまとめてみました。 画像のスライドショー ズーム時のアニメーション機能 iframe呼び出し機能 Flash SWF再生 Flash FLV再生 QuickTime再生 WindowsMedia再生 RealPlayer再生 という感じで対応可能なメディアは全て対応している模様。 １つの選択肢として覚えておいてよさそうですね。 以下のエントリを参照してください。 The #1 Javascript Pop Up - Get TopUp! - Home 関連エントリ 表示法が新しくセクシーなLi
色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集:phpspot開発日誌
色々と使えそうなデータのビジュアリゼーションライブラリ集が２２個まとまったエントリのご紹介です。 FlashからPHPで描画するものや、APIを叩いて表示するものなど、既知の物も含まれていると思いますが、多数のグラフ作成用の仕組みが紹介されています。 Fly Charts マウス位置によって情報がポップアップされたり、タブでデータを区切ったり出来るFlash製のＵＩをしたユニークなグラフ描画ライブラリです。 単純に描画されるグラフ自体もデザイン性があっていい感じですね。 Fusion Charts こちらもFlash型のグラフ描画コンポーネントです。デモページを見ればその多機能さが分かります。 Axiis Flexで作られたデータビジュアリゼーション用フレームワーク。 Stlye Chart 色々な種類のユニークなデータビジュアリゼーションが実現できるライブラリ。 Jfree Chart
少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」:phpspot開発日誌
少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」が公開されています。 小さな枠を３分割させてページをスライドさせるなど動きとしてもおもしろいコンテンツスクローラーになっています。 少ないスペースに色々なコンテンツを置くような場合に参考にできそうです。 デモページを見るとその凄さが分かる筈。 jQueryなので次のように実装も超簡単です。 $('#flips1').flips( { autorun_delay:0, direction: 'left' } ); 詳細・ダウンロードは以下のページを参照してください。 FLIPS | jQuery Plugins
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
[ JavaScript ] jQuery サンプル集
連続アニメーションサンプル jQuery のみで動く連続アニメーションのサンプル。 上から落ちてくるバージョンを IE8 で見ると、エッジに黒い縁が出るのはなんで？ ( 最終更新日 : 2010/12/06 ) 上からフェードインしながら落下バージョン 右から出現バージョン 右から出現バージョン ( 遅延あり ) 目次に戻る アコーディオンパネルのサンプル アコーディオンパネルのサンプル１ 各コマ毎に id を書き換えなくて良いので、コマが無限に増やせるタイプ。 アコーディオンパネルのサンプル２ 各コマ毎に id を書き換えないといけないタイプ。 目次に戻る テーブルの偶数行に CSS を適用し、ストライプ ( しましま ) にするサンプル ( 最終更新日 : 2008/10/08 ) ソースコード わかりやすくするため、余計なコードは省いてあります。 <html> <head> <scr
![[ JavaScript ] jQuery サンプル集](https://cdn-ak-scissors.b.st-hatena.com/image/square/19691f3db719fc116cbcdd5e767c89ee15487f3e/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2018%2F09%2Fudon-1.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
http://wayfarerweb.com/jquery/plugins/mapbox/
Google Code Archive - Long-term storage for Google Code Project Hosting.