jQuery 簡易画像ビュアー

今回は画像ビュアーを作成してみました。相変わらず簡易ですけど。

クリックするリストの要素をまとめて取得する

今回はクリックされた要素のインデックスを使って移動させるのでindex()メソッドで取得する必要がある。そのためまとめてリストの要素を取得することで配列になるので、クリックされたリスト要素のインデックス番号と移動量をかけて移動させる座標を決める

移動量は今回は横向きに移動させるので画像の幅を設定

ul要素の子要素としてli要素のすべてを取得する。方法はどれでもオッケー

//直接取得
$("ul#navibtn > li")

//childrenメソッドで取得
$("ul#navibtni").children();

//findメソッドで取得
$("ul#navibtni").fild("li");

また移動量を最初に宣言して、移動させるコンテンツを取得する（コンテンツは別にクリック時でも構わない。）

(function($){
$(document).ready(function(){
//移動量と移動させるコンテンツを取得する
var initX=600;
var $nc=$("div#navicontainer");

});
});

})(jQuery);

クリックしてインデックス番号を取得する

例えばリストの要素の最初をクリックすると配列は0番ということになる


$("ul#navibtn >li").click(function(){

//indexメソッドでインデックス番号を取得する
var i=$(this).index();

});

アニメーションでcssのleft(横向きにスライドさせる場合)プロパティを変化させる

cssのleftプロパティをanimateメソッドでアニメーションさせる。

そのときに上記で取得したインデックス番号と移動量をマイナス方向にかける

var initX=600;
var $nc=$("div#navicontainer");

$("ul#navibtn >li").click(function(){
var i=$(this).index();

$nc.stop().animate({left:-i*initX+"px"},{duration:1000,easing:"easeInOutExpo"});

移動する画像リストの構造

ｈｔｍｌでの構造は移動させるdiv要素の一つ上にコンテナとなるdiv要素を作成する。そのコンテナ要素の幅と高さを設定して「overflow:hidden」にする

//大枠のコンテナ



//移動するコンテンツ

クリックする画像サムネイルの構造

クリックするサムネイルはリストで作成。リストでなくても兄弟要素としてインデックス番号が取得できればリストでなくてもオッケ～なはず

注意点というか当たり前かもしれないが、表示する画像とサムネイルの画像の順番は同じにする必要がある

例えば2番目のサムネイルをクリックするとインデックス番号は「1番」になる。そうなると表示する画像は「-i*initX」で移動量は「-600px」となるので左に600pxアニメーションするので1番目の画像が見えなくなり2番目の画像が表示されるようになる。

CSSでoverflowの設定とpositionの設定

  • 大枠のコンテナの幅と高さがを設定してoverflow:hiddenで子要素ではみ出た部分を見えなくする。

    position:relativeに設定して基準にする。そうしないと移動させるコンテンツが隠れなくなる。おそらく子要素でposition:absoluteで設定すると基準がbody要素になるから？？
  • 移動させるコンテナの幅を120000pxくらいに大きくとる（数値は適当です）。position:absoluteで移動できるようにする
  • 移動させるコンテナ内のリスト画像をfloat:leftで横並びにする

といった感じに設定しました

実行結果