jQueryとiframeのイメージギャラリー
iframeでもイメージギャラリーはできるが、jQueryでもできる。javascriptをオフにするとGoogleMapすら見れないので、オンがデフォと考えれば、jQueryのほうが楽だし、レイアウトも崩れにくいしいいと思う。
jQueryでのイメージギャラリー
リストに画像を入れて枠を付ける場合、liやli aに対して指定しても枠はつかないので、li imgやli a imgに対してつける。javascriptをオフにしている人には表示されない。
訳）サムネイル画像がクリックされると、右側のイメージのsrc属性を、クリックしたサムネイルのhref属性に変更する。
//jsファイル内
$(function(){
$("ul.z2 a").click(function(){
$("div.z3 img").attr("src",$(this).attr("href"));
return false;
});
});
クリックしたサムネイルのhrefは、表示させたい大きい画像のURLで、右に表示させているimgのsrcの中身のURLと一致しますね。
attr()は属性値の変更と取得の命令です。（attrはattributeの略です）
<!--HTML--> <div id="z1" class="clearfix"> <ul class="z12"> <li><a href="r1.gif"><img src="r1m.gif" alt="" /></a></li> <li><a href="r2.gif"><img src="r2m.gif" alt="" /></a></li> </ul> <p class="z3"><img src="r1.gif" alt="" /></p> </div>
/*CSS*/
div#z1 {
width:500px;
}
ul.z2 {
float:left;
width:90px;
height:auto;
}
ul.z2 li {
list-style-type:none;
}
ul.z2 li a img,div.z3 img {
border:solid 1px #000;
}
ul.z2 li a:hover img {
border:solid 1px #00f;
}
div.z3 {
float:left;
width:auto;
height:auto;
}
ここで出てきたthisというのは、「今現在イベント命令の対象となっているセレクタ」の意味で、ここでは「ul.z2 a」を指しています。「今現在クリックされているaセレクタの」＝thisなので、クリックされてない方のaセレクタは対象から外れます。
thisはjavascriptにおいて非常に重要です。
※やりながら気づいたこと。floatはpに使うと上手く動かないことがある。。。divに使えということかな。
iframeでのイメージギャラリー
iframeの場合は、別フレーム用のhtmlを別に用意しておかなければならないという不便さがある。フレームの大きさと別htmlに表示された画像の大きさをきちんと調整する必要もある。
targetでiframeのname属性を指定してあげれば画像が切り替わる。
<!--HTML--> <div id="z4" class="clearfix"> <ul class="z5"> <li><a href="1.html" target="dzni"><img src="../gif/r1m.gif" alt="" /></a></li> <li><a href="2.html" target="dzni"><img src="../gif/r2m.gif" alt="" /></a></li> </ul> <div class="z6"><iframe src="1.html" width="400" height="320" name="dzni" scrolling="no">ディズニー塗り絵</iframe></div> </div>
jQueryでのイメージギャラリーを拡張する
jQueryを使えば、もっとアニメチックにできるという点も利点ではないだろうか。フェード効果を加えて、ついでにスライドも加える。
さきにHTMLで構造を作る。
<!--HTML-->
<div id="x1" class="clearfix">
<div id="x6">
<div id="x4" class="clearfix">
<div class="x5">
<ul class="x9">
<li><a href="画像１"><img src="ミニ画像１" alt="" /></a></li>
<li><a href="画像２"><img src="ミニ画像２" alt="" /></a></li>
<li class="x10"><img src="左矢印" alt="" class="x2" /><img src="右矢印" alt="" class="x3" /></li>
</ul>
</div>
<div class="x5">
<ul class="x9">
<li><a href="画像３"><img src="ミニ画像３" alt="" /></a></li>
<li><a href="画像４"><img src="ミニ画像４" alt="" /></a></li>
<li class="x10"><img src="左矢印" alt="" class="x2" /<img src="右矢印" alt="" class="x3" /></li>
</ul>
</div>
</div>
</div>
<div id="x7">
<div id="x8"><img src="画像１（初期画像）" alt="" /></div>
</div>
</div>
これを図に表すと、
スタイルを適用して横並びにする。
/*CSS（clearfixは略）*/
div#x1 {
width:500px;
}
div#x4 {
width:180px;
}
div.x5 {
width:90px;
float:left;
}
div#x6 {
float:left;
width:90px;
overflow:hidden;
}
div#x7 {
float:right;
width:410px;
height:320px;
position:relative;
}
div#x8 img {
border:solid 1px #000;
position:absolute;
top:0;
left:0;
}
ul.x9 {
width:90px;
height:200px;
}
ul.x9 li {
list-style-type:none;
}
ul.x9 li a img {
border:solid 1px #000;
}
ul.x9 li a:hover img {
border:solid 1px #00f;
}
ul.x9 img {
cursor:pointer;
}
li.x10 img {
margin-left:10px;
}
そしたらjQueryの命令でフェード効果をつける。
フェード効果は、左メニューのサムネイルをクリックすると、右の大きな画像（クリック前の画像）の前に、クリックされたサムネイルに対応するimgのタグ（クリック後の画像）を挿入し、後ろの画像（クリック前の画像）はフェードアウトした後、撤去する。
aのボタンなのでreturn falseを記述する。
この際、右の大きな画像のpでもdivでもいいので、囲ってる要素のpositionをabsoluteにしておかないと、画像が重なってくれないので注意する。絶対配置すると高さが無視されるので、pにheightを指定する。
jQueryの命令やセレクタ以外は必ず""（ダブルクオーテーション）でくくることにも注意。javascriptの連結は＋記号。
訳）サムネイルがクリックされたら、大きな画像の前に画像（srcがクリックされたサムネイルのhrefの値の画像）を配置して、div#z8内の前と後ろの2枚の画像のうち後ろ側の画像をフェードアウトした後、コールバックで取り除く。
//jsファイル内
$(function(){
$("ul.x9 a").click(function(){
$("#x8 img").before("<img src='"+$(this).attr('href')+"'>");
$("#x8 img:last").fadeOut("slow",function(){
$(this).remove();
});
return false;
});
});
続いて、スライドを加える。
//jsファイル内
$(function(){
$("img.x2").click(function(){
$("#x4:not(:animated)").animate({marginLeft:"0"},"fast");
});
$("img.x3").click(function(){
$("#x4:not(:animated)").animate({marginLeft:"-90px"},"fast");
});
});
左矢印をクリックすると、アニメーションしてないdiv#4（幅2倍のプレート）をマージン０に変更する。右矢印クリックするとdiv#4をマージン-90に変更する。数値は""でくくるのを忘れず。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
