2009年11月29日
jQueryでイメージギャラリーを作成。
jQueryでイメージギャラリーを作成するチュートリアルを試してみました。
今までのチュートリアルを総合したような内容です。
元のチュートリアルと1点違う箇所があります。クリックした画像を表示し、元の画像をフェードアウトする部分ですが、フェードアウトさせる画像を選択するのに、:lastフィルターではなく、:not(:first)を使っています。
これは:lastのとき、アニメーションが終わる前にサムネイルを連続して複数クリックすると、画像がフェードアウトされず大量に残ったままになってしまったからです。見た目は変わりませんが気づかずにクリックしていると動作が非常に重くなりました。
そこで、「最後の画像」ではなく「最初以外の画像」を指定したところ、一旦大量の画像が生成されても、最後にクリックした画像がのみ表示されるようになりました。
今までのチュートリアルを総合したような内容です。
元のチュートリアルと1点違う箇所があります。クリックした画像を表示し、元の画像をフェードアウトする部分ですが、フェードアウトさせる画像を選択するのに、:lastフィルターではなく、:not(:first)を使っています。
これは:lastのとき、アニメーションが終わる前にサムネイルを連続して複数クリックすると、画像がフェードアウトされず大量に残ったままになってしまったからです。見た目は変わりませんが気づかずにクリックしていると動作が非常に重くなりました。
そこで、「最後の画像」ではなく「最初以外の画像」を指定したところ、一旦大量の画像が生成されても、最後にクリックした画像がのみ表示されるようになりました。
ASCII.jp：jQueryで作る画像ギャラリーのチュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、以下のギャラリーを作成しました。
サムネイルをクリックすると大きい画像が下に表示されます。矢印をクリックすると、サムネイルが移動して新しいサムネイルが表示されます。
サムネイルをクリックすると大きい画像が下に表示されます。矢印をクリックすると、サムネイルが移動して新しいサムネイルが表示されます。
<style type="text/css">
#imagegallery {
width:486px;
background-color:#fff;
}
#imagegallery *{
margin:0;
padding:0;
border:0;
}
#imagegallery img {
padding:3px;
background-color:#ccc;
vertical-align:bottom;
}
#imagegallery li {
float:left;
margin:0px 3px 3px 0px;
}
#imagegallery #navi {
margin:0 auto;
width:387px;
overflow:hidden;
}
#imagegallery #navi p {
width:387px;
margin-right:3px;
text-align:center;
clear:left;
}
#imagegallery #navi p img {
padding:0;
background-color:#fff;
}
#imagegallery img.prev,#imagegallery img.next {
cursor:pointer;
}
#imagegallery #navi #pageWrap {
width:1161px;
}
#imagegallery #navi .page {
width:387px;
float:left;
}
#imagegallery #main {
height:366px;
clear:left;
}
#imagegallery #main img {
position:absolute;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#imagegallery #navi a").click(function(){
$("#imagegallery #main img").before("<img src='"+$(this).attr("href")+"' width='480px' height='360px' alt='' />");
$("#imagegallery #main img:not(:first)").fadeOut(1000,function(){
$(this).remove();
});
return false;
});
$("#imagegallery #navi .next").click(function(){
$("#imagegallery #pageWrap").animate({
marginLeft : parseInt($("#imagegallery #pageWrap").css("margin-left"))-387+"px"
},500);
});
$("#imagegallery #navi .prev").click(function(){
$("#imagegallery #pageWrap").animate({
marginLeft : parseInt($("#imagegallery #pageWrap").css("margin-left"))+387+"px"
},500);
});
})
</script>
<div id="imagegallery">
<div id="navi">
<div id="pageWrap">
<div class="page">
<ul>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0001.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0001.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0002.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0002.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0003.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0003.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0004.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0004.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0005.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0005.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0006.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0006.jpg" width="120px" height="90px" alt="" /></a></li>
</ul>
<p><img src="//img01.naganoblog.jp/usr/webdesign/space.png" width="40px" height="40px" alt="" /> <img class="next" src="//img01.naganoblog.jp/usr/webdesign/next.png" width="40px" height="40px" alt="next" /></p>
</div>
<div class="page">
<ul>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0007.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0007.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0008.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0008.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0009.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0009.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0010.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0010.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0011.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0011.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0012.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0012.jpg" width="120px" height="90px" alt="" /></a></li>
</ul>
<p><img class="prev" src="//img01.naganoblog.jp/usr/webdesign/prev.png" width="40px" height="40px" alt="prev" /> <img class="next" src="//img01.naganoblog.jp/usr/webdesign/next.png" width="40px" height="40px" alt="next" /></p>
</div>
<div class="page">
<ul>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0013.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0013.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0014.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0014.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0015.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0015.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0016.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0016.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0017.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0017.jpg" width="120px" height="90px" alt="" /></a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/wc0018.jpg"><img src="//img01.naganoblog.jp/usr/webdesign/wc0018.jpg" width="120px" height="90px" alt="" /></a></li>
</ul>
<p><img class="prev" src="//img01.naganoblog.jp/usr/webdesign/prev.png" width="40px" height="40px" alt="prev" /> <img src="//img01.naganoblog.jp/usr/webdesign/space.png" width="40px" height="40px" alt="" /></p>
</div>
</div>
</div>
<div id="main">
<img src="//img01.naganoblog.jp/usr/webdesign/wc0001.jpg" width="480px" height="360px" alt="" />
</div>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでストライプの装飾 :nth-child()
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでストライプの装飾 :nth-child()
Posted by ヒダカ at 17:58│Comments(0)
│jQuery
