最近はFlashで作ったのかと思ってしまうようなjavascriptなギャラリーをちらほら見るようになりましたね。この記事ではあまり凝ったことをすると大変、、というか作れるスキルがないので、jQueryを使用したシンプルなフル画面ギャラリーの作成方法をチュートリアル形式でお送りいたします。Link画像の準備をしようギャラリーページなので当然のことながら画像は準備しておきましょう。小さい画像(サムネイル)と大きい画像を用意します。小さい画像は100×67、大きい画像は画面いっぱいに表示するのでそこそこ大きいのにします。画像サイズが変わっても基本的にcssを修正するだけで済むようにします。cssを作成しよう連番画像をjQueryで配置しても良かったのですが、今回はjavascriptOFFの環境にもやさしい親切設計でいきます。サムネイルはidを「photo」としてリストでマークアップします。「view」は大きな画像を表示するところです、とりあえず最初に表示される画像を入れておきます。/></div>cssは無駄なところが多いかもしれませんがこんな感じです。-1」に設定することで、サムネイルを常に前面に表示させます。」の「height」も指定しておいてください。サンプルではサムネイルは下部に配置してありますが、この状態だと上部になります。この辺りはcssでがんばるよりかはjQueryでやった方が簡単にできそうです。大きい画像を全画面表示する全画面表示は過去記事の「jQueryで背景画像を全画面表示する」を参考にしてください。他のメソッドで共通の変数を使用するので一部違うところがありますが、基本は同じです。「#view」の中になる画像を全画面表示するには次のようします。moveY});}});サムネイルを下部に配置する今はサムネイルが上部に配置されていて、画像の合計サイズがウィンドウの幅より多いと折り返して何段かになって表示されていますので、これを折り返さないようにして下部に表示します。_thumWidth);まじで何が言いたいのかわらない図になってますね。ようは「ウィンドウ縦(winH)」-「サムネイルdivの縦(outerHeight)」でサムネイルを配置する縦の位置がわかるじゃないですか。あとサムネイルのリストの数だけ横のサイズ(outerWidth)を足してそれをulのwidthにすれば、liの合計=ulのwidthにすることで画像が折り返さなくなります。outerWidth()は引数にtrueを入れることでmarginも含むサイズになります。$(‘#photo’).outerHeight())」は画面サイズが変更された場合、再配置する必要があるので、前述の「resize」イベントに追記しておきましょう。$('#photo').outerHeight());});サムネイルクリックで大きな画像を切り替えるサムネイルをクリックして大きな画像(#view)が切り替わるようにしてみましょう。img').height();fitImageSize();});この辺はコメントのを見て頂ければわかると思います。新たに配置した画像は実寸ですので、最後にまたサイズを取得して再配置する必要があります。マウスカーソルに合わせてサムネイルをスライドさせるここまでで基本的な動作をするフル画面ギャラリーになっていると思いますが、最後にマウスカーソルに合わせてサムネイルをスライドさせるという無駄でちょっと重いかもしれない機能を追加してみます。基本動作として次ぎのようなことを行います。マウスが画面中心より左に位置していたら、サムネイルは右に移動して、マウスが右なら左に移動します。移動速度は中心ほど遅く、画面端ほど速く移動します。端の画像が表示されると、サムネイルの移動は停止してそれ以上は進まなくなります。新たにグローバルな位置に次の変数を追加します。-0.15;基本的にコメントの通りですが、またすごくわかりにくい図を描いてみました。画面中央はウィンドウサイズが変われば当然変化しますので、前述のresizeメソッドにも追加しましょう。2;});マウスの位置を取得するマウスの位置を取得して、サムネイルの移動方向や速度の計算をします。サムネイル上にマウスカーソルが来たときに動作する仕様ですので、前述の「$(‘#photo’)」にメソッドチェーンで「mousemove」イベントを追加します。_mouseX(マウスのX座標)」で画面中心よりマウスは右にあればマイナスになり、左だったらプラスになります。これで移動方向が決まりますね。このままの数値では高すぎるので「_dx」で割ります。この数値を変更すればスピードの制御ができます。取得した数値をもとにサムネイルを移動させます。setIntervalは一定間隔ごとに処理を実行するメソッドです。......」と増えていき、この値を「margin」なんかに割り当てればあたかもアニメーションして移動しているようになるわけです。この「2」の部分に実際何が入るかというと先ほど、速度やら移動方向を計算した「_xvec」ですね。)にくるまで移動します。「else」(右方向に移動しているときは)場合はサムネイルの位置が0になるまで移動します。ここに数値を書いてしまうのはあまりよくないと思うのですが「10」というのは「#photo」のpaddingです。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。TRACKBACKS『フルスクリーン』『フェード』『サムネイルナビ付き』のスライダーを探しました。『フルスクリーン』『フェード』『サムネイルナビ付き』のスライダーまとめ。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。