なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」:phpspot開発日誌
なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 2010年11月18日- hash slider by manjographics なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 コンテンツ自体はul > li リストに埋め込んで、ナビゲーション用のタグを定義して必要なcssとjsをインクルードすれば自動でスライダーにしてくれます。 プラグイン内で自動で初期化してくれるため、コーディング不要です。 デフォルトでは独特のUIですがCSSによるカスタマイズが可能です。 色々と使えるかもしれませんね。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル 軽量の
カーソルを合わせた際、その場で大きくズームさせられるjQueryプラグイン「hoverZoom」:phpspot開発日誌
jQuery hoverZoom - a lightbox and gallery alternative カーソルを合わせた際、その場で大きくズームさせられるjQueryプラグイン「hoverZoom」。 画像のサムネイルがあったとして、カーソルを合わせることでその場でアニメーションしながら拡大できるライブラリです。 その場で広がる感じでアニメーションして拡大されます。 ギャラリーなんかに実装する際の１つの選択肢として使えます。 関連エントリ LightBoxライクに同一ページ内の要素をポップアップするライブラリ jQueryベースのLightBoxクローン「prettyPhoto」 表示法が新しくセクシーなLightBox「SexyLightBox」 クールにアニメーションする角丸LightBox「prettyPhoto」
jQueryでスライダー実装関連のチュートリアル２０:phpspot開発日誌
20 Useful jQuery Slider Tutorials - Web Design Blog ? DesignM.ag jQueryでスライダー実装関連のチュートリアル２０。 実に様々なスライダーの実装チュートリアルが公開されており、チュートリアルをこなすというより、サンプルとして活用することが出来そうです。 この手のUI実装にまよったら参考にしてみるのもよさそう。 関連エントリ 軽量のイメージスライダー実装jQueryプラグイン「Orbit」 なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル ２つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」
これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン:phpspot開発日誌
Lightweight Circle slideshow | Required:jQuery | Tags:image slideshow,image gallery | Slideshow & Scroller これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 通常スライドショーといえば、長方形ですが、このプラグインによって実装したギャラリーは次のように円形です。 画像の送りも画像の赤い部分を円形にドラッグ＆ドロップすることで実現します。 ドラッグしてみると次のように画像が送れます。 赤い丸のところは画像なんかに置換してよりカッコよくすることが出来そうですね。 ちょっとした驚きの要素として入れてみてもよさそう。 関連エントリ AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「AviaSlider」 シンプルだけどとってもクールなスライ
[JS]複数の商品写真を見せるのに適したコンテンツスライダー -FancyMoves
複数の商品写真を見せるのに適した、画像拡大にも対応したコンテンツスライダーのスクリプトを紹介します。。 画像を拡大表示したキャプチャ FancyMovesの特徴 滑らかなアニメーションで画像がスライド表示。 画像はスライドすると拡大・縮小表示。 スライダーの送りは、矢印・画像のクリック。 キーボード（矢印）操作にも対応。 画像は拡大表示が可能（FancyBox使用）。 FancyMovesのオプション スクリプトのオプションでは、下記の設定が可能です。 パネルのサイズ パネルで使用する画像のサイズ 見出し・本文の文字サイズ 移動距離 また、FancyBoxを使用しているので、そちらのオプションも変更できます。 FancyMovesでは下記のオプションを調整しています。 ズームイン・アウト時のスピード 不透明度 オーバーレイのカラー
次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」:phpspot開発日誌
次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」 2010年11月28日- Supersized - Full Screen Background/Slideshow jQuery Plugin 次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」。 画像のスライドショーと言えば、次や前の画像はナビゲーションだけでわからないものがほとんどですが、このギャラリースクリプトを使えば次のように次・前の画像のサムネイルを表示しつつフルスクリーンでスライドショーを実現できます。 基本は$(element).supersized(); を呼び出すのですが、オプションを豊富に渡せて動きを自由にカスタマイズすることが可能です。 ナビゲーションのUIもなかなか秀逸なのでカッコイイ写真の
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
jQueryとPHPで作るサムネイルがスライドするギャラリー – creamu
サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと
jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル:phpspot開発日誌
Create a Custom Content Slider with jQuery jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。 次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。 サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。 簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ JavaScriptでページスライダー用ライブラリいろいろ
２つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」:phpspot開発日誌
dualSlider ２つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」。 左には動画、右にはその説明を記述するようなUIで、コンテンツをスライドさせると、左右連動してアニメーションされ、なかなかカッコいい効果が作れています。 サイトのヘッドラインなんかに組み込むとよさそうです。 jQueryのプラグインなので実装も容易です。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル
軽量のイメージスライダー実装jQueryプラグイン「Orbit」:phpspot開発日誌
ZURB ? Interaction Design and Design Strategy 軽量のイメージスライダー実装jQueryプラグイン「Orbit」。 わずか2.8KBというサイズでクールな動作をするイメージスライダーの実装が可能です。 実装方法は必要なJS, CSSを読み込んだ後に、<div>の中に<img>タグを並べるだけです。title、altタグにキャプションを設定しておけば下に表示されます。 実装が超簡単かつ軽量ということでいい感じです。 関連エントリ Flickr風のイメージスライダーを作ってみよう JavaScript製の画像スライダー・ギャラリーいろいろ クールに動作するスライダーを実現するJSライブラリ「Start/Stop Slider」
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
Webサイトをスライド化する·SiteFlow MOONGIFT
通常、Webサイトは縦に長くなる傾向がある。そのため縦書きの文字はほとんど使われず、横書きで下へ、下へ伸びていく。そのため、あまりページが長くなるとページネーションとしてページを区切って読み進めるようになっているのが一般的だ。 Webページをスライド化して読みやすくする だがこのページネーションは果たして便利な機能だろうか。都度マウスでクリックしたりするのが面倒だし、縦長のページを移動するのも大変だ。そこでSiteFlowが登場した。 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 SiteFlowはJavaScriptで提供されるソフトウェアで、ブックマークレットとしても動作する。主な機能は二つで、一つはページ内の移動に関する機能で、もう一つはページネーションに関係する機能だ。ページ内の移動処理では、C
スライダーを極める為のテクニック集「25+ Awesome Slider Techniques」
現在WEBサイトで良く見かけるテクニックの一つスライダー。少ないスペースで様々なコンテンツを見せられるのが魅力ですが、今日はそんなスライダーのテクニックを集めたエントリー「25+ Awesome Slider Techniques」を紹介したいと思います。 Scrollable よく見るスライダーから、動きが特殊なものやインターフェイスが優れているもの様々なスライダーのテクニックが紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■jQuery.ScrollTo 様々な方向にスライドさせる事ができるスライダー応用次第では面白いものが作れるかもしれません。 ■Slider Gallery Macライクなスライドショー。シンプルに綺麗に見せたいときは良いですね。切り抜き写真とは相性が良さそうです。 ■Sliding Boxes and Captio
色々使えそうな、かっこよくアニメーションするスライダー実装JSライブラリ:phpspot開発日誌
Ultra versatile slider for websites 色々使えそうな、かっこよくアニメーションするスライダー実装JSライブラリ。 ウィジェット風に設置できそうなJSライブラリが紹介されています。 デモページ 次のように、divで大きく囲って中身にリストを定義して、リスト内をスライドさせるという、他の多くのライブラリで同じように実装されているようになっていて使いやすい。 <div id="slider-stage"> <ul id="myList"> <li >Box 1</li> <li >Box 2</li> <li >Box 3</li> <li >Box 4</li> <li >Box 5</li> <li >Box 6</li> </ul> </div> 次へ、前へリンクも<a>タグにidをふるだけみたいです。 <div id="slider-buttons">
jQueryを使ったFlashばりにクールなギャラリー「GalleryView」:phpspot開発日誌
jQuery GalleryView - by Jack Anderson jQueryを使ったFlashばりにクールなギャラリー「GalleryView」が公開されています。 初期化に以下の数行を書けばＯＫみたい。 $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); 動かしているHTMLのなかなか分かりやすいです。 関連エントリ 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」 色々な画像の見せ方を演出できる画像ギャラリー集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
クールな写真ギャラリーを作るためのjQueryプラグイン「Exposure」:phpspot開発日誌
http://e0166nt.com/blog-entry-708.html
気持ちよいスライド機能を提供する「noobSlide」:phpspot開発日誌