Ajaxを利用したシンプルなイメージギャラリーを作ってみる - jQuery入門

Ajax

jQueryを使うと、「Ajax」処理を簡単に書くことができます。Ajaxとはウェブコンテンツの遷移を「ページ」よりも更に細かいDOM要素単位で指定できる仕組みです。かなりいい加減な解説なので詳しくは検索してみてください。今回は、並んだサムネイルをクリックすると拡大画面が表示されるという、よくあるイメージギャラリーを作ってみます。

イメージギャラリーのデモ

各サムネイル画像をクリックすると、Ajaxにより大きな画像と画像名が読み込まれます。写真画像はフリー写真素材 Futta.NET様の素材をお借りしています。

別ページで開く

ファイル一式

本体ソース・Ajaxで読み込まれるソース・画像・サムネイル画像・ローディング画像をまとめて置いておきます。1.jpg～3.jpgはサムネイルの画像、b1.jpg～b3.jpgはそれに対応する大きな画像となります。
ajax_gallery.zip

本体(gallery.html)のソース


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<title>Ajaxイメージギャラリー</title>

<script>

$(function() {

  $('img').css({cursor: 'pointer'}).click(function() {

    $('#load_area').html('<img src="loading.gif" alt="">');

    var html = 'b' + $(this).attr('src')[0] + '.html';

    $('#load_area').load(html);

  });

});

</script>

</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>

プログラムの解説


$('#load_area').html('<img src="loading.gif" alt="">');

Ajaxによるローディングは時間がかかる場合があるので、まずローディング画像を配置しています。


var html = 'b' + $(this).attr('src')[0] + '.html';

$('#load_area').load(html);

クリックされたサムネイル画像(1.jpg～3.jpg)に対応するHTML(b1.html～b3.html)を「<p id="load_area"></p>」の内部に挿入しています。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト