[JS]画像を溶け合うように切り替えられるスクリプト -CrossSlideCrossSlideは、画像同士をクロスフェードさせ、溶け合うように次々と切り替えられるスクリプトです。 CrossSlide デモには、上下にスライドしながらの切り替え、スタティックに切り替え、ズームしながら切り替える３つがあります。 オプションでは、スライド時のスピード、フェードの時間、静止画の表示時間、ズームの比率などが調整できます。 CrossSlideはjQueryのプラグインのため、動作にはjquery.jsが必要です。
表示法が新しくセクシーなLightBox「SexyLightBox」:phpspot開発日誌
SexyLightBox - www.coders.me 表示法が新しくセクシーなLightBox、その名も「SexyLightBox」。 次のような、角丸で、表示時にアニメーションするLightboxが公開されました。 実装法もLightbox風に、アンカータグに属性をつけるだけでOKみたい。 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryベースのLightBoxクローン「prettyPhoto」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画像ギャラリー「qGallery」 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々 LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」 YUIを使ってLightBoxを実現するサンプル 自動で画像のスライドショーが可能なLightBox風ライブラリ
Ajaxのローディング時に使えるフリーGIFアイコン集『120+ Free Ajax Activity Indicator Gif Icons』 – creamu
Design Ajaxのローディング時に使えるフリーGIFアイコン集『120+ Free Ajax Activity Indicator Gif Icons』 Ajaxのローディング画像を探している。 そんなあなたにおすすめなのが、『120+ Free Ajax Activity Indicator Gif Icons』。Ajaxのローディング時に使えるフリーGIFアイコン集だ。 このエントリーでは、Ajaxのローディング時に使えるアニメGIFがたくさん紹介されている。 There are free and open source implementations of suitable frameworks and libraries. とのことで、オープンソースで無料で使える。 Ajaxのローディング時に使えるフリーGIFアイコン、チェックしてぜひ使ってみてはいかがだろうか。 今日は雨で
[JS]わずか4KBの超軽量の画像ギャラリーのスクリプト -slide.js
leigeberのエントリーから、スムーズにスクロールするサムネイルから拡大画像を表示する画像ギャラリーのスクリプトを紹介します。 Dynamic Image Gallery and Slideshow デモ slide.jsはjQueryやPrototypeなど他のスクリプトに依存することなく単独で動作するスクリプトで、動作環境はIE6/IE7, FF, Opera and Safariとなっています。 サムネイルはリスト要素となっており、オプションでは「拡大画像の格納場所の指定」「拡大画像の拡張子の設定」「スピード」などを設定することができます。
jQueryを使った、クールな写真ギャラリーを作るためのライブラリ『galleria』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々:phpspot開発日誌
画像を同一Window内でスムーズにポップアップしてくれるJSライブラリ色々。 LightBox風ではなく、クリックした画像がそのままズームイン、されるライブラリを紹介。 FancyZoom 1.1 - 最近リリースされたFancyZoom。クリックでアニメーションしながら画像がズーム Highslide JS - 以前にも紹介した、Highslide JS。FancyZoomと動きはほぼ同じ。 Live Thumbnail Demo - 画像をその場でズイズイっとリサイズ (参照記事: サムネイルと元画像の見せ方) 今回新しく紹介する「FancyZoom」は、スクリプトを読み込んで、初期化するだけで、<a href="大きい画像"><img src="小さい画像(サムネイル)"></a> のマークアップにズーム機能が追加されるという点で実装はすごく容易でマークアップも綺麗にできます。
スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」 - GIGAZINE
IE6/IE7/Firefox/Safariに対応しているJavaScriptで、使い方もかなり簡単でページにほとんど変更を加えずに導入可能。 また、リンクの先読みにも対応しており、画像の上にマウスが乗ったことを感知して自動的に先読みすることもできますので体感的にはかなり速度アップしているように感じます。 画像をズームする機能のみに特化しているため、ほかの余計な機能付きのライブラリよりも動作は軽いのも特徴で、クリックしてズームされた後にはちゃんとドロップシャドウ効果が付いたりするなど、芸も細かい。 実際のデモと詳細は以下から。 cabel.name: FancyZoom 1.0 上記ページの下の方にある「Example」に体感できる例があります。なかなか面白い。 で、実際に設置するにはまず上記ページ中にあるZIPファイルをダウンロードしたら解凍し、出てきた2つのフォルダをFTPソフトなどで
ローディング中のアニメーションGIFを生成する「Load Info - gif generator」
AJAXなどでよくあるあの「読み込み中……」みたいな感じのローディング中アニメーションをGIFアニメとして、好きな色の組み合わせでカスタマイスできるという便利なジェネレータです。現時点で99種類のパターンがあります。 詳細は以下の通り。 Load Info - gif generator http://loadinfo.net/ まずは好きなパターンをクリックして選択 小さなウインドウが開くので、色と背景色（透明も可能）、それから大きさを選んで「generate」をクリック しばらく待つと、完成するので「download」をクリックすれば保存できます。 なお、これが実際に作ったサンプルです。やっぱり背景色はちゃんと指定した方がいいかも。
LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」:phpspot開発日誌
Facebox 1.0 Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」。 リンクをクリックで次のように画像をポップアップしてくれます。 これはFacebookでも使われているポップアップ方法のようで、知っている人は知っている、ポップアップの仕方のようです。 コードは次のように非常にシンプルです。 rel="facebox" でポップアップしてくれるみたいです。 <a href="/facebox/remote.html" rel="facebox">text</a> jQueryベースなので軽量な点もうれしいところ。 ちょっと気分を変えたい方は導入
実際にスクロールするまで画像を読み込ませない「Lazy Load Plugin for jQuery」 - GIGAZINE
AJAXを簡単に使用でき、しかもいろいろな効果を追加できるJavaScriptライブラリ「jQuery」の機能をさらに拡張できるプラグインとして開発されており、実際にブラウザでページをスクロールダウンするまでは画像の読み込みを行わないようにできます。つまり、転送量や負荷を抑えてサーバにやさしい仕組みが実現できるというわけ。特に1ページに大量かつ大容量の画像をばしばしページに貼り付けまくっている場合には効果が絶大です。 詳細や実際の効果を体感できるデモページは以下から。 以下がデモページ。スクロールダウンするまで画像は読み込まれません。ON/OFFも可能。 Lazy Load Enabled プラグインは以下のサイトからダウンロードできます。 Lazy Load Plugin for jQuery Safariではうまく動いてくれないようですが、それ以外のブラウザでは順調に動いてくれるようで
ドラッグ＆ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」
イメージ切り抜きのためのインタフェースを提供するJavaScriptライブラリで、prototype.jsやscript.aculo.usを使っています。 写真上をマウスカーソルでドラッグすると枠が破線で作成され、囲んだ領域の座標とサイズを取得し、トリミングすることができます。カーソルキーによる移動にも対応しているので微調整も可能、実にすごい。 詳細は以下の通り。 ダウンロードは以下から。 DEfusion.org.uk >> JavaScript Image Cropper UI, using Prototype & script.aculo.us デモは以下から。実際にドラッグして切り抜きを体験できます。 DEfusion.org.uk >> Demo >> Prototype JavaScript Image Cropper UI 操作感覚が通常のアプリケーションとほとんど差異がない
画像を角丸にしたり影を付けたりできる「Corner.js」
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
Lightbox.js のような写真のスライドショーするライブラリ沢山：Goodpic
This shop will be powered by Are you the store owner? Log in here
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」:phpspot開発日誌
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
角丸画像を瞬時に生成するGoogleの隠れAPI！ | p o p * p o p
これはすごい・・・Googleの隠れAPI（？）を見つけてしまった人がいます。Web 2.0系でよく使われる角丸用の部品を簡単につくることができちゃいます。 » Zach’s Journal – google’s own cornershop 例えば、Google グループのページの丸角は下記のURLで生成されています。 http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr 生成される画像は以下。 そしてご推測のとおり、パラメーターをいじることができちゃいます。たとえば下記のような画像を自由自在です。 以下、パラメーターの詳細です。 c：色を指定します。色の名前（aqua, black, blue, fuchsia, gray, green, lime, maroon, navy
prototype.jsベースの画像切抜き用JavaScriptライブラリ:phpspot開発日誌
DEfusion.org.uk JavaScript Image Cropper UI, using Prototype & script.aculo.us The JavaScript image cropper UI allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is is based on the Prototype JavaScript framework and script.aculo.us. prototype.jsベースの画像切抜き用JavaScriptライブラリ。 写真上でドラッグすると破線で枠が作成され、囲んだ領域の座標とサイズを取得できます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lightboxスクリプトいろいろ - DesignWalker