Polaroid Photobar Gallery with jQuery | Codrops
In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop […] In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a th
画面いっぱいに使ったスライドギャラリー
In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow […] In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking o
jQueryで動作するスライダーとギャラリーを集めた「30 Awesome jQuery Slider and Gallery Plugins and Tutorials」
jQueryで動作するスライダーとギャラリーを集めた「30 Awesome jQuery Slider and Gallery Plugins and Tutorials」 非常に使い勝手が良く、世界中で利用されているjavascriptライブラリjQuery。その中でもサイトの演出として多くのサイトで利用されているスライダーやギャラリーを集めたエントリー「30 Awesome jQuery Slider and Gallery Plugins and Tutorials」を紹介したいと思います。 horinaja for scriptaculous or jQuery 一般的によくある定番のものから、一工夫あるもののまで様々な演出のスライダーやギャラリーが集められています。今日はその中から今までDesigndevelopで紹介したこと無いものを中心にいくつかピックアップして紹介したいと思
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider 1.1
Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考： スムーズに切り替わるタブ型コンテンツ -Coda-Slider
サムネイルをドラッグして画像の表示領域をスクロールするスクリプト -Image Scroller
サムネイル画像をドラッグして、大きい画像の表示領域をその動作に合わせてスクロールさせるスクリプトを紹介します。 jQuery Image Scroller Plugin デモページ このスクリプトは作者がPUMAのサイトを構築する際に使用したスクリプトをjQueryのプラグインとして作り直したとのことです。 PUMAで使用されているのは、下記のページです。 <textarea name="code" class="html" cols="60" rows="5"> <div class="image-scroller"> <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" /> <div class="preview"> <img src="images/preview.j
新しくリリースされたjQueryプラグイン30「30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website」
新しくリリースされたjQueryプラグイン30「30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website」 世界中で利用されている軽量で多機能なjavascritpライブラリjQuery。それだけに非常に多くのプラグインがリリースされています。今日紹介するのは最近リリースされた新しいjQueryプラグインを集めたエントリー「30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website」を紹介したいと思います。 jQuery 2D Transformation Plugin Demo 変形からツールチップ、スライダーなど用途に限定されず幅広く最新のプラグインが集められています。今日はその中から幾つか気になったものをピックア
画像の内側にボーダーをひいてクールに画像をみせるjQueryプラグイン:phpspot開発日誌
Inset Border Effect jQuery Plugin | CSS-Tricks 画像の内側にボーダーをひいてクールに画像をみせるjQueryプラグイン。 通常、ボーダーというと外側に付けられますが、掲載されているサンプルでは内側にボーダーを表示し、更にカーソルを合わせるとアニメーションしながらボーダーが消えるというカッコいい演出が実装できます。 内側に白いボーダー カーソルを合わせるとアニメーションしながら消える こちらのデモを御覧ください。 ギャラリーなんかに実装するとカッコ良さそうです。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル 泡のアニメーションで癒しを演出できるjQueryプラグイン「Bubble Engine」 キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景
[JS]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。 Slide Down Box Menu with jQuery and CSS3 デモページ デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。 実装は割とシンプルです。 ナビゲーションはリスト要素で配置されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_act
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
[JS]リスト要素の項目をアニメーションで表示するシンプルなティッカー -List Ticker
リスト要素の項目をフェードやスライドのアニメーションで表示するシンプルなティッカーのスクリプトを紹介します。 Super simple jQuery ticker デモページ デモではリスト要素の各項目が自動で次々に表示され、スクリプトのオプションでは表示方法（フェード・スライド）とアニメーションのスピードが設定できます。 実装はシンプルで、HTMLは下記のようになります。 HTML 「id="fade"」は変更可能です。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="fade"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul> </textar
Create Featured Content Slider Using jQuery UI - WPLoaded
Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back. There are a few tutorials on creating featured content sliders li
[JS]jQueryのプラグイン33+1選 -2010年5・6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して
オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」:phpspot開発日誌
Professor Cloud オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」。 写真にカーソルを合わせるだけで、次のようにカーソル部分がズームされ、こうしたUIが必要な場面において便利に使うことが出来そうです。 範囲外を反転させることも出来るみたい。 アパレルサイトとかで、細部を拡大してより商品をしってもらう、的なインタフェースが必要な際にサクッと実装出来てしまいますね。 関連エントリ GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 細部のズームアップ表現に使えるPhotoshopチュートリアル 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々
jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル:phpspot開発日誌
Create a Custom Content Slider with jQuery jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。 次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。 サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。 簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ JavaScriptでページスライダー用ライブラリいろいろ
Jquery でお手軽ロールオーバー
通常、上のサンプルのようなロールオーバーを設定する場合は、JavaScript を使用して、ロールオーバー後の画像を<body>でプリロードするような方法がとられることが多いと思います。しかし、この方法だとロールオーバーを設定した画像が多くなると、HTMLのコードも煩雑になり、修正も面倒というデメリットがあります。 このようなロールオーバーは Jquery を使用すると最低限のHTMLコードの記述だけで、超簡単に設定できるようになります。さっそくその設定方法を解説しよう。 使用スクリプト Jquery ロールオーバーで使っているスクリプトは以下の2 つ。下のダウンロードボタンを押すとJSファイルを入手できます。
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」（閉じた状態）のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
ソート可能なテーブルを作成して設置できるWordPressプラグイン - ミblog : レビューや日常など
2009-05-19 WordPress プラグイン たまに価格などの比較表を作成する場合、テーブルを使う方が簡単で見やすかったりしますが、一から作成するとなるととても面倒です。そんな時は、WP-Table Reloadedというテーブル作成プラグインを使ってみてはいかがでしょう。jQueryプラグインが組み込まれているので、ソートにも対応したテーブルが作成可能です。また、CSVファイルやHTML、XMLをインポートしてテーブルを作成することもできます。 WP-Table Reloadedの導入方法 ダウンロード → WP-Table Reloaded Demo ※WordPress2.7.1で動作確認済 ダウンロード先のページからプラグインをダウンロード 解凍したフォルダごとwp-content/pluginsにアップロード プラグインを有効化 テーブルの作成や設定は、管理画面のツール→
サイト制作のためのテンプレートをごっそり自動生成してくれる『Project deply*』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
technologytosoftware.com
