フォトギャラリー型ポートフォリオ

 グリッド状に配置された画像がナビゲーションとなり、そのクリックで、その画像が拡大され、説明文が表示される。cssアニメーションらしく、ここまでがシームレスで表示される。このまま、単なるギャラリーとしても使えると思うが、 … 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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