Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript

FancyZoomは、jQueryやPrototypeなどのライブラリを必要とせず、シンプルで快適に動作する画像拡大のスクリプトです。 FancyZoom FancyZoomの設置は、外部スクリプトとして記述し、bodyに「onload="setupZoom()">」を記述します。 あとは、拡大したい画像に下記のように、アンカーを記述するだけです。 <textarea name="code" class="html" cols="60" rows="5"> &lt;a&nbsp;href=&quot;image.jpg&quot;&gt;&lt;img&nbsp;src=&quot;image-thumbnail.jpg&quot;&nbsp;/&gt;&lt;/a&gt; </textarea>

広告掲載などに最適なパネルをページの下部からアニメーションで表示するスクリプトをEmanuele Feronatoから紹介します。 Create a dynamic content animated footer ad for your site in just 9 jQuery lines デモページ デモではページを表示した際に、下部からパネルがアニメーションでスライドしながら表示されます。 パネルはスクロールしても定位置に固定表示されており、非表示にするには「Close」をクリックします。 実装は簡単で、</body>の直前にパネル用のdiv要素を配置します。 HTML

iBoxは、画像・動画・インラインコンテンツ・ドキュメント・フォームなどをLightbox風のエフェクトで表示するスクリプトです。 iBox v2 iBox - Lightweight inline popup Lightbox風のスクリプトは多数ありますが、その多くはjQueryやPrototypeなどのライブラリと一緒に設置しないと動作しなかったりしますが、このiBoxは単独で実装することができます。 また、容量も18.5KBと他の多くのスクリプトと比べ軽く、Packerを使用すると7KBになります。 iBoxの実装方法は、「ibox.js」と「ibox.css」を外部ファイルとして指定し、下記のコードを記述します。 titleは、キャプションとして表示されます。 画像 <textarea name="code" class="html" cols="60" rows="5"> <a

ウィンドウサイズよりも大きな画像を表示した際に、画像の拡大ができます。 表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。 効果画像を貼付けることができます。 マウスホイールで画像の拡大率を変更することができます。 拡大した画像はマウスでドラッグできます。 設置方法は Lightbox JS とほとんど同じです。 html ヘッダに lightbox_plus.js を追記します。 <script type="text/javascript" src="lightbox_plus.js"></script> Lightbox を有効にする全てのリンクに rel="lightbox" 属性を追記します。 ver 20090707 より spica.js が不要になりました。lightbox_plus.js に全ての内容が記述されています。 "lightbox_plus.

Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe

What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope

1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと

カスタマイズが可能な、一つのリスト要素で実装する画像ギャラリーのスクリプト「slideViewerPro」を紹介します。 slideViewerPro 上記のキャプチャはslideViewerProの元となるslideViewerのもので、直系の子孫にあたるとのことです。 画像の箇所は、一つのリスト要素で構成されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="my-folio-of-works" class="svwp"> <ul> <li><img alt="Meander - P.J. Onori" src="images/01.jpg" /></li> <li><img alt="Flock and Predator - L. Ongaro" src="images/02.jpg"