異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretch
とても楽そうだったのでメモです。画面 のサイズに合わせて自動で背景画像 をリサイズしてくれるので背景画像を 固定できる、というもの。jQueryのプラ グインなので手軽でいいですね。ユー ザーがどんなモニタサイズでも同じ 背景画像を表示させることが出来ます。 以前、同じ機能のjQueryプラグインがPHPSPOTさんでも紹介されていましたが、複数覚えておいて損はないのでご紹介します。 ↑ これがデフォルト。 ↑ ご覧のようにサイズを変更しても背景画像は変わりません。 自動で背景画像をストレッチさせるので、環境の違いによる背景画像の表示の差が生じることも無い、というもの。 使い方は非常に単純で、jQuery Backstretchを読み込んでから画像を指定すればおｋです。 <script type="text/javascript" src="/js/jquery.backstretch-1
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
Qual è la migliore tecnologia per i casinò online - Casino slot online software
Esistono molte tecnologie diverse che possono essere utilizzate per i casinò online. Ogni tecnologia ha i suoi vantaggi e svantaggi, quindi è importante scegliere quella giusta per le tue esigenze. Alcune delle tecnologie più popolari includono Flash, Java e HTML5. Flash, Java e HTML – che cos’è e perché viene utilizzato per i casinò online? Flash è una tecnologia popolare per i casinò online perc
OVOL ICTソリューションズ株式会社
株式会社 田澤洋紙店 様 株式会社 田澤洋紙店 様 使用ソリューション：PROTSⅣ SDGsを軸に新たな一歩を踏み出す転換点に、PROTSⅣを導入。業務の効率化のさらにその先を目指していく。 青森県と岩手県を中心に紙・板紙、紙関連製品や日用雑 […] 株式会社ヤマト 様 株式会社ヤマト様 使用ソリューション：Dr.Sum Dr.Sumによる情報分析 製品概要 ～Dr.Sum（ドクター・サム）～ 『Dr.Sum（ドクター・サム）』は、基幹業務システムに蓄積されたデータを活用し […]
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
jQueryを使用している良デザインなWebサイトを集めたWebデザインギャラリー・Best jQuery
jQueryをうまく取り入れた良デザインなWebサイトを収集しているデザインギャラリー・Best jQueryのご紹介。jQueryを使用するWeb制作者さんには、インスピレーション向上だけでなく、コードやUIも参考になるかもですね。 普通にWebデザインギャラリーとしても良さそうですが、jQueryを使用している、という共通点を持っていますのでそちらの面でも参考に出来そうです。 jQueryを利用している良デザインなサイトを収集しています。AWWWARDSで見かけるようなサイトが多い印象です。 以下のようなWebサイトが紹介されています。 Tatchies EVB Nerisson 他にもいろいろ。100サイトほど紹介されています。 Webサイトのコンテンツでのカテゴリ分けしかされていないのでギャラリーの機能としては探すのに少し弱いかもですけど、選択肢の一つとしてはありじゃないかなと思い
arbor.js
about arbor Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whate
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」:phpspot開発日誌
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 2012年07月13日- Zebra_Datepicker, a lightweight datepicker jQuery plugin 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 13KBでクロスブラウザ、CSSによるデザイン変更が容易で国際化対応もしていて日本語カレンダーへのカスタマイズも簡単。 日付の形式も自在に指定可能。YdM等とオプション指定するだけです。 こうしたライブラリは実装が簡単であると同時に、サイトのデザインにマッチするようにカスタマイズできるようになっていると本当に使い勝手がよいですね。 実装自体は便利だけどカスタマイズに数日かかったなんていうとちょっと困ります。 年だけの選択も出来ます 関連エントリ これは新し
Twitter Bootstrapのデザインを簡単に変更出来るWebサービス・StyleBootstrap
今日もTwitter Bootstrapの話。やっと 出たって印象でしょうか・・デザイン を変更できるWebサービスです。こうした 人気のフレームワークでこのように デザインを変更できるのはありがたい ですねー。 人気のTwitter Bootstrapのデザインを直感で作成出来ます。自分で変更を加えるのは若干面倒なのでこれで大まかに作ってしまえば工数削減に繋がるかもですね。 StyleBootstrap.info 直感でサクサク作れます。Bootstrapみたいなフレームワークをご存知の方ならこういうの触った経験ある方のほうが多そうですので使い方は割愛します。 背景とかフォントとかボタンの色を変えられる、みたいなやつ。リアルタイムで反映されるので確認も楽でした。 以下のようなものを数分で作成出来ます。 やっつけ仕事でごめんなさいｗボタン周りはグラデーションで作れるようになってますね。 要
サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」
TOP > plugin > サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」 動的なサイトを手軽に構築できる jQueryを、サイト構築に利用している方も多いと思います。そんな中今回紹介するのが、サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」です。 JavaScript – jQuery Banner Rotator / Slideshow | CodeCanyon インデックスや画面スライドなど、多彩な機能を表現できるプラグインが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■jQuery Slideshow & Conte
超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」:phpspot開発日誌
Percentage Loader 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 次のようなカッコいいローディングが簡単に実装できます。Canvas描画なのでサイズ変更等も自由にできるみたい 超シンプルに実装可能です なんとなくローディング後の画面を期待させる物となっていますので、ローディング後も気合を入れたいところですね 関連エントリ HTML5でプログレスバー付きファイルアップロードを実現する例 プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
jquery スクロールバー
スクロールバーのデザインが簡単に変更できます、ブラウザのスクロールバーがサイトのデザインになじまない時等によいですね。 マウスのスクロールにも対応しています。パラメータを指定したり、スタイルシートを変更することで、垂直スクロールや横スクロールや色などデザインを変更できます。 配布先と使い方 jScrollPane 配布先の「download」の箇所より jquery.jscrollpane.cssとjquery.jscrollpane.min.jsと、 マウスホイールの為にjquery.mousewheel.jsをダウンロードします。 jQuery本体とjquery.jscrollpane.cssとjquery.jscrollpane.min.jsとJQuery.mousewheel.jsをヘッド内で読み込みます。 <script type="text/javascript" src="j
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
Isotope · Filter & sort magical layouts
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH
同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script>
画面いっぱいの背景画像をスライドショウするjQueryプラグイン
2010年4月10日 画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。 フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。 動作サンプル www.daichifive.com 自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。 追記 上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://gridster.net/