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」 色々な画像の見せ方を演出できる画像ギャラリー集
[JS]img要素の属性で画像をLightbox風に拡大するスクリプト -Fullsize
img要素の属性「longdesc」「title」を元に、Lightbox風にスムーズなアニメーションで画像を拡大するスクリプト「Fullsize」を紹介します。 Fullsize A New IMG Tag Attribute 「longdesc」は本来、画像の（詳細で長い）説明ページへのリンクを記述する属性です。 作者は、img要素に大きい画像を指定する属性「fullsize」を望んでおり、その代わり（？）として「longdesc」を使用したとのことです。 属性を使用しているため、img要素にリンク（a）を設置できる仕様は大きなポイントだと思います。 スクリプトの「longdesc」「title」を変更したい場合には、「jquery.fullsize.js」のL.71, 75, 76を変更すればよさそうです。 対応ブラウザはIE6/7/8, Fx, Op, Safari, Chrome
驚きの画像切り替え！jQueryプラグイン「Jquery.ImageSwitch」
twitter facebook hatena google pocket 画像の切り替えでユーザーに驚かせることができそうです。 jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。 sponsors 使用方法 Jquery.ImageSwitchからGroject.ImageSwitch.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="Groject.ImageSwitch.js"></script> <script> $(document).ready(function(
input要素にも使えるjQueryのロールオーバープラグイン - Rewish
jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。 ライブラリについて HTMLを汚さず、簡単に画像のロールオーバーを実装できます。 ダウンロード jquery.rollover.js - v1.0.4 ライセンス MIT License 主な機能 HTMLで指定するのは初期表示の画像だけ 指定された箇所でも _on が付いている画像は無視 ロールオーバー画像をプリロード 拡張子は何でもOK (png, jpg, jpeg, gif, etc…) ロールオーバー画像を示す _on の部分を自由に変更できる 使用方法 画像を用意する example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じデ
Ajax » jQuery plugin » その他のプラグイン | PHP & JavaScript Room
画像を指定したサイズに切り取るjQueryプラグイン。 設置イメージ jQuery plugin: cropの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Language" content="ja" /> <m
14 jQuery Plugins for Working with Images
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. JavaScript frameworks have become very
画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」
twitter facebook hatena google pocket 画像ギャラリーの見せ方のひとつにこんな手法があってもよいかもしれません。 jQueryプラグインのFLOATING IMAGESは画像を次々にフローティングさせていきます。 sponsors 使用方法 FLOATING IMAGESからファイル一式をダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.floatingimages.js"></script> <script type="text/javascript" src="jquery.ui.all.js"></script> <script type="text/javascrip
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
jQueryを使ったシンプルなスライドショー – creamu
Timothy van Sasさんのブログで、jQueryを使ったシンプルなスライドショーの作り方が紹介されています。 ↑アニメGIFにしてみた。こんな感じでナビゲーションをクリックするとフェードインして表示されます。 jQueryとCSS、HTMLコードが載っているので、ぜひ参考にしてみてはいかがでしょうか。 以下からどうぞ。デモはTake a look at an exampleから見られます。 » Simple slideshow in jQuery 珍しくお食事。いい席に座れたしすごくまったりできた。iPhoneを持っていてプロフもやっている子でしびれたね。俺も勉強のためにもプロフやろうかなw。
Ajax » jQuery plugin » 画像ポップアウト・イメージギャラリー・スライドショー
Google Codeで公開されている、jQueryを使用したJavaScriptノイメージギャラリーです。 他のライブラリのように、サムネイル画像を用意する必要はなく、原寸大画像をロード時に自動的にリサイズしてサムネイル画像として表示してくれます。 デモ1 設置イメージ1 galleria デモ1の設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" con
画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」
twitter facebook hatena google pocket 画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。 しかし飽き飽きしている人も多いのも確かです。 たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？ sponsors 使用方法 jQuery Smooth Div Scrollからjquery.smoothDivScroll-0.6.jsや画像、CSSファイルを、jQueryからjquery.jsをダウロードしましょう。 またjquery.scrollToからjquery.scrollTo.jsをダウロードします。 <link rel="stylesheet" type="text/css" href="smoothDivScroll.css" /> <script type="text/ja
[JS]多彩なカスタマイズが可能なLightbox風スクリプト -ColorBox
インターフェイスのデザイン、クローズやアローなどコントローラーのカスタマイズが可能な画像を拡大表示するLightbox風のスクリプト「ColorBox」を紹介します。 ColorBox 拡大表示できるのは画像のほかにも、インラインコンテンツ、外部コンテンツに対応しており、AJAX表示、画像ギャラリーにも対応しています。 デモでは、4パターンのカスタマイズが紹介されています。
[JS]フレキシブルな実装に対応した、画像にキャプションを表示するスクリプト -jCaption
先日紹介した「オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify」と同等の機能をフレキシブルな実装に対応させたスクリプト「jCaption」を紹介します。 下記は、画像の下に配置したテキストを画像の上にキャプションとしてアニメーションでスライド表示させたものです。 jCaption: jQuery Image Captions with Customizable Markup, Style and Animation demo jCaptionのデフォルトの設定では、img要素のaltのテキストを利用して表示されるようになっています。 設定を変更することで、img要素の別の属性（titleなど）や画像とは関係無い別の要素（pなど）からのテキスト取得や、適用する要素やclass, idの指定ができます。 demoページではaltのみのデモですが、img要素の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]画像のキャプションをスタイリッシュな動きでスライド表示させるスクリプト -slidingboxes
Google Translate
[JS]ポラロイド写真を散らかしたような画像ギャラリーのスクリプト -Polaroid Photo Viewer
IDEA * IDEA
http://e0166nt.com/blog-entry-587.html
4つのバリエーションに変えれるLightbox風のスクリプト ColorBox | CSS Lecture
http://e0166nt.com/blog-entry-506.html
