タッチデバイスにも対応の、要素をドラッグ&ドロップでソートできる軽量スクリプト・Sortable
要素をソートできるスクリプトのご紹介。タッチデバイスにも対応しており、軽量で非依存型となっています。なかなか便利そうですね。 D&Dでソートできるスクリプトです。HTML5のAPIを使用しているみたいですね。タッチデバイスでも動作します。 D&Dでどーと出来るスクリプト。jQuery等のライブラリに依存せず、圧縮版では2KBほどと軽量なのも素敵ですね。 <script src="Sortable.js"></script>本ライブラリを読み込むだけで利用できます。 var foo = document.getElementById("foo"); new Sortable(foo, { group: "bar" });グルーピングされた要素等にも対応できます。 ライセンスはMITとなっております。詳細は以下よりどうぞ。 Sortable
質問サイト構築の為のWordPressプラグイン・DW Question & Answer
よく見かける質問系のWebサイトをWordPressで構築する為のプラグイン・DW Question & Answerのご紹介です。今の所、自分では作る予定は無いですけど・・・一応備忘録として。 Stack Exchangeのような質問サイトをWordPressで作る為のプラグインです。・・・と言っても、まださほど触っていないのでメモ程度の内容です。 質問と回答をユーザー同士が交わせるコンテンツを構築する、というもの。 質問/回答の他にベストアンサーや閲覧数などの表示、フィルタリングなんかも出来るみたいです。 インクリメンタル検索もできるそうです。 時間ができたら触って見ようと思います。 DW Question & Answer
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
コンテナのサイズに合わせて画像をフィットさせるスクリプト・imagefill.js
コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。 コンテナに合わせてフィットさせる、というもの。似たスクリプトは既存しますので選択肢の一つとして。 サイズに応じて自動でフィットさせます。 ↑ こんな感じ。 $('.foo').imageFill();基本的にはコンテナをセレクタとして指定するだけ。 <div class="foo"> <img src="bar.png"> </div>そのコンテナの中に画像を含めます。楽でいいですね。 ライセンスはMITとGPLのデュアルライセンスとなっています。詳細は以下にて。 imagefill.js
Google Mapのカラー見本とコードをまとめている・Snazzy Maps
Google Mapのカラー見本と、変更する為のコードをまとめているWebサイト・Snazzy Mapsのご紹介です。Webデザインに合わせてGoogle Mapのデザインも変更しておきたいですね。 以前Google Mapのスタイルの変更法を書きましたのでご参照下さい。但し、当時ご質問頂いたのがjQueryを使って、との事でしたのでそんな内容です。 Google Mapのスタイル例と、実装コードが掲載されています。沢山あるので何かと参考になりそうです。 ただ、中には文字が見えなくなっているものもあります。 デザインの統一に拘りすぎて地図の存在理由が無くなってしまわない様に気を付けたいところです。ご利用は以下でどうぞ。 Snazzy Maps
あなたのファンページのコンテンツを、より充実させるFacebookアプリいくつか - かちびと.net
徐々に数も増えてきてる印象の Facebookファンページですが、 便利なアプリも多数存在するの で使わないと勿体無いですよ、 という訳でファンページに良さそう なアプリをいくつかご紹介します。 FBMLが難しくて使えない・・！という方はアプリに頼るのもひとつの手です。多数存在するアプリから実用性のありそうなファンページ向けアプリを数点ご紹介します。 はじめに・追加方法 はじめに、ファンページへの追加方法についてですが、簡単なんですが、若干分かりにくいので場所だけご説明します。 アプリのページに行って左サイドバーのプロフィール画像下部に「ファンページに追加」と出ますのでクリックしてアプリを追加します。あとはアプリ認証して設定すればタブに追加されます。 Static FBML ファンページ作成ではマストのアプリですね。オリジナルコンテンツを追加できるアプリです。使い方はこちらをご参照ください
数行で書けるオート再生なスライドショー - かちびと.net
Result jQurey //id="slideshow"内のdiv要素の最初以外は隠す $("#slideshow > div:gt(0)").hide(); //タイマーで順にフェードアウトとインを繰り返す setInterval(function() { $('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); }, 3000); css #slideshow { margin: 50px auto; position: relative; width: 100px; height: 100px; padding: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } #slideshow > div { position
iPhoneやiPadにも対応・モニターサイズに合わせて拡大表示するLightbox風jQueryプラグイン - かちびと.net
iPhoneやiPadにも対応した、モニター サイズに自動的に合わせて拡大表示 してくれるjQueryプラグイン、Touch- Galleryのご紹介です。Lightbox系の スクリプトは沢山ありますが、こちらも 一つの選択肢として思えておくといつか 役に立つかも、と思ってエントリー。 PCは勿論、iPhoneやiPadでも、そのモニターサイズの幅に合わせてLightbox風にフルスクリーン表示してくれます。特に設定も不要なのは楽で良い感じ。というか、iPhoneやiPad向けに作られたっぽいですね。 Touch-Gallery ↑ モニターのサイズに自動で合わせて拡大表示してくれるjQueryプラグインです。 ↑ PCで見るとこんな感じ。基本的には普通のLightbox系の拡大表示です。 ↑ iPhoneで見てもモニターサイズに合わせて拡大表示します。 ↑ 横にしても自動的に横幅に合わ
グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせるjQueryプラグイン
個人的に好きなタイプのjQueryの使い方 だったのでメモ。イメージギャラリーは、こ ういったエフェクトも大事な要因ですし、 参考にしておきたい所です。なかなかイン パクトもあって素敵ですね。尚、グリッドは Masonryを使っています。 基本的にはユーザーの利便性を高める目的でjsを使いたいですけど、視覚的にインパクトを与えられるのも利点の一つかなとは思います。 Animating with Modernizr こんな感じでマウスオーバーした画像に十字ハイライトされます。 広げてもだいじょうぶ。hoverしている画像にナビがアニメーションで付いてきてくれます。アニメーションはcss3なのでIEではアニメーションしません。 デモを見たほうが早いですかね・・ デモ※別窓で開きます ちょっと重いかな。手抜きですみません。 コード<script src="js/jquery-1.6.1.min.
記事内の最初の画像を取り出す
functions.phpに追記。記事にアップロードされた画像のうち、最初に表示されている画像のURLを取得する。無い場合はデフォルトとして設定した画像が表示される。
ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretch - かちびと.net
とても楽そうだったのでメモです。画面 のサイズに合わせて自動で背景画像 をリサイズしてくれるので背景画像を 固定できる、というもの。jQueryのプラ グインなので手軽でいいですね。ユー ザーがどんなモニタサイズでも同じ 背景画像を表示させることが出来ます。 以前、同じ機能のjQueryプラグインがPHPSPOTさんでも紹介されていましたが、複数覚えておいて損はないのでご紹介します。 ↑ これがデフォルト。 ↑ ご覧のようにサイズを変更しても背景画像は変わりません。 自動で背景画像をストレッチさせるので、環境の違いによる背景画像の表示の差が生じることも無い、というもの。 使い方は非常に単純で、jQuery Backstretchを読み込んでから画像を指定すればおｋです。 <script type="text/javascript" src="/js/jquery.backstretch-1
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
