複数画像移動型スライダー

 ヘッダー部分に設置するスライダーは従来一つのスライドが入れ替わるものが多いが、サイトによっては、いくつかのスライドを水平に並べて表示し、全体がスライドして入れ替わるものも見受けられる。ここでは、全体を8枚のスライドとし … 続きを読む

オールインワン型スライダー(サムネイル付き)

 ページのヘッダー部分に表示するスライダーで、表示スライドの前後のスライドの部分を左右に表示するタイプで、スライド下部にサムネイルを水平に並べて、そのクリックでそのスライドに飛べるようにしたものを作成した。  画面サイズ … 続きを読む

サムネイル移動表示・Fade-In型フォトギャラリー

 これまで、サムネイルの数が5つの場合についてサンプルを作成してきた。もっとスライドの数が増えた場合(この例では10枚)の対処として、サムネイルが左右に移動して全部が現れるようにし、サムネイルのマウスオーバー時に、サムネ … 続きを読む

円運動サムネイル拡大型スライドショー

サムネイル画像が連なって円運動している状態で、水平になったサムネイル画像を拡大して、表示枠いっぱいに表示させるタイプのスライドショーである。 このサンプルでは、幅600pixの写真を表示させているが、他のサイズの写真をそ … 続きを読む

複数シリーズ切換え型フォトギャラリー2

 複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。先に、「複数シリーズ切換え型ギャラリー」で、切り替えるとサムネイルが流れ落ちるタイプを … 続きを読む

オールインワン・フルワイド型スライダー

 スライドショー、スライドの位置(順番)表示と移動を兼ねたボタン、左右送りボタンの機能を併せ持ったスライドショーで、スライド(画像)が、画面幅いっぱいに表示されるタイプのスライダーである。スライドは、画面サイズに応じてス … 続きを読む

カバーフロー型スライダー

 先にカバーフロー型スライドショーを別ページに投稿したが、本稿は、左右移動ボタンを追加したスライダーの作成である。基本的には、前項のスクリプトを踏襲しているが、スライダーの性格上横長(一般的に多い幅960px)のステージ … 続きを読む

グリッドサムネイル伸縮型フォトギャラリー

 格子状に配置されたサムネイルをロールオーバーすると、マウスがのったサムネイルが拡大し、その他のサムネイルが縮んで全体の格子の幅・高さは変わらないという効果を持つサムネイルクリック型のフォトギャラリーである。拡大したサム … 続きを読む