[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部
[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit
実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。 約4KBと超軽量なのもいいですね。 右上のオートプレイは状況も表示します。 Orbitの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> スタイルシートも外部ファイルとして指定します。 <link rel="stylesheet" href="css/orbit.css"> HTML 画像のみを配置したシンプルなスライドのHTMLです。 <div id="featured"
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
Galleria — A JavaScript gallery for the Fastidious
Galleria — A JavaScript gallery for the FastidiousWelcome to Galleria Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project. Galleria 1.0 started as a small hobby project but now has over 500.000 downloads worldwide. This site is now dedicated to version 1.2, c
JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」
画像ギャラリーはサイト制作の中でも多く利用するのではないでしょうか。 そのため選択肢の幅を広げ、よりサイトにあったJavaScriptを使うことをお勧めします。 今回はjQuery slideShow pluginを紹介します。 sponsors 使用方法 jQuery slideShow pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.slideshow.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#id名').slideShow({ interval: 3,
Create a Custom Content Slider with jQuery
Introduction I'm writing this tutorial in an Airport, heading back to my home country for a short holiday. It was a long day and had a farewell lunch with my fellow colleague. He got a better job offer, resigned and moved on. Well, that's life, had a great time working with him accross different projects, no doubt about it, I learnt heaps of stuff from him. I'm pretty sure I'll miss his daily quot
２つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」:phpspot開発日誌
dualSlider ２つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」。 左には動画、右にはその説明を記述するようなUIで、コンテンツをスライドさせると、左右連動してアニメーションされ、なかなかカッコいい効果が作れています。 サイトのヘッドラインなんかに組み込むとよさそうです。 jQueryのプラグインなので実装も容易です。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル
フルスクリーンでスッキリ綺麗な写真ギャラリーを作れるjQueryを使ったサンプルプログラム:phpspot開発日誌
Sliding Panel Photo Wall Gallery with jQuery | Codrops フルスクリーンでスッキリ綺麗な写真ギャラリーを作れるjQueryを使ったサンプルプログラム。 アニメーションしつつ、操作性もいい感じのフォトギャラリーが実装出来るサンプルプログラムが公開されています。 画像をクリックすれば、若干の読み込み時間を待ち、画像が下からスライドされます。待ち時間は画像サイズに依存します。 ナビゲーションの←、→で画像送りが可能。画像自体をクリックすることで一覧に戻ることが出来ます。 余計なナビゲーションはなくして、写真を前面にしているシンプルさが使いやすさと、見やすさに繋がっていますね。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 3Dでクールに回転するFlashを使った画像ギャラリー「Piece
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
