[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
レスポンシブウェブデザインの画像問題を解決する「Response JS」
配布元:Response JS: mobile-first progressive enhancement in HTML5. ライセンス:MITライセンス 「Response JS」はレスポンシブウェブデザインの画像問題を解決するためのJavaScriptライブラリです。 レスポンシブウェブデザインではPCだけでなくiPhoneやAndroid、iPadなど複数の解像度、画面サイズ向けのデザインを1つのHTMLで提供します。そのため、スマートフォン向けのデザインなのにPC向けの画像が読み込まれてしまうことがあります。 「Response JS」を利用すると画面サイズごとに読み込む画像を選択できる為、無駄な画像リクエストの発生を抑えることが可能です。 Response JSの利用方法 まずはjQuery本体とダウンロードしたResponse JSのスクリプトファイルをhead要素内などで読
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
http://neteye.github.com/touch-gallery.html
Demo Click on one of the images below to view it fullscreen. Use your fingers or cursor keys to flick through the images. Click again (or press esc) to return to this view. NETEYE Touch-Gallery A fullscreen photo gallery for touch-devices. Supported Browsers The plugin was written and optimized for Mobile Safari running on the iPad or iPhone 4. It also runs in Dektop Safari, Firefox 4, as well as
1stWebDesigner • Helping You Build a Better Web - For Web Professionals
Learn Web Design Retro CSS Text Effect: A Step-by-Step TutorialCSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly complex, yields a visually appealing result and serves as a… UX surveys can be pivotal tools for des
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
Tripwire Magazine | Handpicked goodies for entrepreneurs, developers and web designers
The quality and availability of WordPress e-commerce themes makes WordPress a serious choice as an online shop platform. In fact, WordPress has moved rapidly from being mainly a blogging platform and is now one of the top CMS systems for traditional websites. Lately,... Welcome to our Website Awards for best free WordPress themes. We are hosting this award to showcase the best websites to visit wh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dualSlider
HugeDomains.com
http://www.aaronvanderzwan.com/maximage/