奥から手前にズームするJavaScript「Spacegallery.js」
twitter facebook hatena google pocket 最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。 今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。 奥から手前にずんずんとズームしながら画像を表示していきます。 sponsors 使用方法 Spacegallery.jsのDownLoadからファイル一式をダウンロードします。 あとは以下を記載します。 <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text
[JS]わずか4KBの超軽量の画像ギャラリーのスクリプト -slide.js
leigeberのエントリーから、スムーズにスクロールするサムネイルから拡大画像を表示する画像ギャラリーのスクリプトを紹介します。 Dynamic Image Gallery and Slideshow デモ slide.jsはjQueryやPrototypeなど他のスクリプトに依存することなく単独で動作するスクリプトで、動作環境はIE6/IE7, FF, Opera and Safariとなっています。 サムネイルはリスト要素となっており、オプションでは「拡大画像の格納場所の指定」「拡大画像の拡張子の設定」「スピード」などを設定することができます。
[JS]テキストや画像をスライドして表示するスクリプト -iCarousel
iCarouselは、テキストや画像をスライドして表示するニュースティッカーと画像ギャラリーを実装できるスクリプトです。 iCarousel ニュースティッカーは一行タイプのものからパネル状のものまであり、画像ギャラリーは画像をスライド表示するものからサムネイル表示で拡大画像を表示するものまで、さまざまなタイプが実装できます。 ニュースティッカー：シンプル版のデモ ニュースティッカー：クリック機能付きのデモ ニュースティッカー：パネル版のデモ 画像ギャラリー：横タイプのデモ 画像ギャラリー：縦タイプのデモ 画像ギャラリー：拡大画像のデモ iCarouselはmootoolsのプラグインのため、動作にはmootools.jsが必要です。
テーブルをソートできるようにするjsライブラリ-table sorting
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
【ハウツー】ゼロからはじめるPhoto Slider - 自動再生機能も備わる画像表示ライブラリ (1) Photo Sliderとは? | パソコン | マイコミジャーナル
Photo SliderはjQueryライブラリを利用して画像を表示するライブラリです。 (X)HTMLタグ内に表示する画像やキャプションを記述するのではなく、スクリプトで設定して表示するタイプになります。表示画像の下にナビゲーションタイプのサムネイル画像が配置されるユニークな画像表示が可能です。 Photo Sliderの実行例 関連ファイルの入手 Photo SliderはこのURLにあるページからダウンロードすることができます。 Photo Sliderのサイト 「photoslider.tar.gz」と書かれた文字をクリックするとダウンロードが行われます。ダウンロードされたファイルはgzipで圧縮されたtar形式になっています。もし、この形式が解凍できない環境であればRequirementsカテゴリの下にある3つのリンクから必要なファイルを保存します。以後に説明するサンプルは下記の
JavaScriptで画像にベベル効果を与えられる「bevel.js」:phpspot開発日誌
bevel.js (with IE 6/7 support) bevel.js 1.0 allows you to add bevels (and also shading, shining and glowing) to images on your webpages (alternatively: glossy.js). JavaScriptで画像にベベル効果を与えられる「bevel.js」 netzgesta.de にてJavaScriptによる新たな画像エフェクトライブラリが公開されました。 ライブラリを使うことで、画像に次のような立体的なガラス風のベベル効果をかけることが可能です。 同様の画像エフェクトライブラリ 画像にページめくり効果をつけられるJSライブラリ「curl.js」 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 画像にマスク
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
MOONGIFT: » Webサイトを手軽にクールに「GreyBox」:オープンソースを毎日紹介
最近のWebサイトでは画面遷移をなくし、Ajax化するのが好まれる。とは言え、既存のサービスに対して実装するのはそうそう単純ではない。それにAjaxを使った場合、PVの計測が難しく、メディア等では取り入れづらい。 だが、これを使えば簡単にそれっぽい実装ができそうだ。 今回紹介するオープンソース・ソフトウェアはGreyBox、Webページにも対応したCSSポップアップウィンドウだ。 GreyBoxは最近良く見かける、画像をクリックすると同じページ上でポップアップするライブラリになる。特徴的なのは、画像のみならずWebページでもポップアップしてくれる点だ。 既存のAタグに対して情報を埋め込めば、それだけでクリックすると背景をグレーアウトし、クールなポップアップを表示してくれる。これならばお問い合わせフォームや、詳細検索等のフォームでも使えそうだ。 大きさを指定したり、フルスクリーンでの表示もで
[JS]さまざまなエフェクトを持つ角丸を実装できるスクリプト -ShadedBorder
画像を使用しないで角丸を実装するスクリプトはたくさんありますが、このShadedBorderは角丸にさまざまな効果を与えて実装することができるスクリプトです。 ShadedBorder - JavaScript Round Corners with Drop Shadow ShadedBorderの実装は、ダウンロードした「shadedborder.js」を外部ファイルとして指定し、下記のようなコードでシンプルな角丸が実装できます。 head箇所 <script type="text/javascript" src="shadedborder.js"></script> <style type="text/css" media="screen"> #simple{padding:10px;} </style> body箇所 <div id="simple"> <p>角丸のサンプル</p>
可愛くアニメーションするタブＵＩ実装ライブラリ「MooTabs」:phpspot開発日誌
MooTabs - Tiny tab class for MooTools MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it's main purpose is to help out with the creation of simple tab navigation.可愛くアニメーションするタブＵＩ実装ライブラリ「MooTabs」 タブ項目をクリックするとページがアニメーションしながら開きます。 動きが滑らかで、使っていてちょっと驚きで楽しいＵＩを提供できます。 CSSで綺麗にスタイルしても見栄えがしそうですね。 moo がついているので mooTools を利用しているのは言うまでもありませんね。
角を丸めるjavascript「Nifty Corners Cube」
twitter facebook hatena google pocket Web2.0と言われて増えたのが、グラデーション、画像を水面に映ったかの様に反射させる、透過などなど。 そして角を丸くすること。 Nifty Corners Cubeが提供するのはそんな角丸作成javascript。 sponsors 使用方法 Nifty Corners Cubeからダウンロードしたniftycube.jsとniftyCorners.cssを同じディレクトリにアップロード。 （もしくは、niftycube.jsのl.setAttribute("href","niftyCorners.css");）を絶対パスに） 次にheadに以下のスクリプトを書き込みます。 <script type="text/javascript" src="http://yourdomain/niftycube.js"></
Flash っぽいフェードイン・フェードアウト - てっく煮ブログ
as海外ブログのこんな記事とかこんな記事を見るとレベルの違いにへこみますが、少しずつ間を詰められるよう精進あるのみ。がんばります。今回は Flash っぽいフェードイン・フェードアウトを ColorMatrixFilter で作ってみました。RGB の各成分を元の値から増やしてフェードアウトしてます。Flash ではよく見るエフェクトなので業界の人は食傷気味かもしれませんが、JavaScript でα値をいじるだけのものしか知らなかった私にはかっこよく見えます。ソースは以下に(45行)。 package { import flash.display.*; import flash.geom.Point; import flash.filters.ColorMatrixFilter; [SWF(width="350", height="233")] public class ColorMat
写真がクルリとめくれたような効果を実現できる『Curl.js』 | POP*POP
便利そうなJavascriptライブラリーのご紹介。Curl.jsを使えば、誰でも簡単に写真がめくれたような効果を実現することができます。 ↑ こうした画像が簡単につくれます。 使い方も簡単そうですね。いろいろオプションをつけてカスタマイズもできるようです。 興味のある方は使ってみてはいかがでしょうか。詳細＆ダウンロードは以下からどうぞ。 » curl.js (with IE 6/7 support)
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
CoolTips ― Neat tooltips under the mouse
On May 3rd, we shared that we sold Postmark and DMARC Digests to ActiveCampaign. For some of you reading, this will come as quite the surprise. As you can imagine, this decision was incredibly important and personal, taking nearly a year of soul searching and questioning. First, a few important points: The entire team at Wildbit was offered a position with ActiveCampaign, regardless of whether the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iBegin - Local Search & Business Directory - iBegin
RetujyOu.com is for sale | HugeDomains
404 - Not Found
Scrollovers - Seu guia completo para o mundo das finanças.