第13回 Ajaxを利用した、ごくシンプルなイメージギャラリーを作ってみる – jQuery入門
2009 年 9 月 30 日 投稿者: naga3
jQueryの真価を発揮するためにはAjaxは避けて通れません。Ajaxというとサーバーサイドのプログラミングが必要で難しそうというイメージがあるのですが、仕組みはとても単純なものです。今回は、並んだサムネイルをクリックすると拡大画面が表示されるという、よくあるイメージギャラリーを作ってみます。
Ajaxとは何か？
言葉の意味は置いといて大雑把に言うと、Ajaxとはウェブコンテンツの遷移を「ページ」よりも更に細かいDOM要素単位で指定できる仕組みです。かなりいい加減な解説なので詳しくは検索してみてください。イメージギャラリーのデモ
各サムネイル画像をクリックすると、Ajaxにより大きな画像と画像名が読み込まれます。写真画像はフリー写真素材 Futta.NET様の素材をお借りしています。ファイル一式
本体ソース・Ajaxで読み込まれるソース・画像・サムネイル画像をまとめて置いておきます。1.jpg～3.jpgはサムネイルの画像、b1.jpg～b3.jpgはそれに対応する大きい画像となります。
gallery.zip
本体(gallery.html)のソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function() {
$('img').click(function() {
var html_name = 'b' + $(this).attr('src')[0] + '.html';
$('#load_area').load(html_name);
});
});
</script>
<style type="text/css">
img {
cursor: pointer;
}
</style>
<style type="text/css">
</style>
</head>
<body>
<p>
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</p>
<p id="load_area"></p>
</body>
</html>
Ajaxで読み込むHTML(b1.html, b2.html, b3.html)のソース
b1.html
<img src="b1.jpg" alt="" width="400" height="300" /><br /><br />
CDの虹色の光
b2.html
<img src="b2.jpg" alt="" width="400" height="300" /><br /><br />
宇宙船のようなイルミネーション
b3.html
<img src="b3.jpg" alt="" width="400" height="300" /><br /><br />
赤く塗られた電灯
本体(gallery.html)プログラムの解説
var html_name = 'b' + $(this).attr('src')[0] + '.html';
クリックされたサムネイル画像(1.jpg～3.jpg)に対応するHTML(b1.html～b3.html)の名前を変数html_nameに代入しています。
$('#load_area').load(html_name);
この一行で、html_nameで示されるファイルの中身をAjaxによって
<p id="load_area"></p>
の内部に挿入しています。
2009 年 10 月 15 日 2:42 PM
はじめまして。ひとつのページの中に複数のイメージギャラリーを実装したいのですが、どうしたらいいのでしょうか？ お時間がありましたら、よろしくお願いします。ｊａｖａの知識は、ほとんどないのですが、、、
2009 年 10 月 15 日 4:49 PM
このページのものは最小限のサンプルなので、複数のイメージギャラリーにするには少し手直しが必要です。
「javascript イメージギャラリー」などで検索すると沢山ヒットするので、そういうありものを使うのが良いのではないでしょうか。
2009 年 10 月 15 日 10:29 PM
さっそく調べてみます。ありがとうございました。！