ポンクソフト

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

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

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

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 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:



rrrあいうえ
2017/02/22 00:22


あああ
2017/02/12 19:10

名無しのリーク
香川県ルー餃子のフジフーヅはバイトにパワハラの末指切断の重傷を負わせた犯罪企業
2017/01/26 03:04


あああああ
2017/01/20 17:43

カワカワ
ああああああああ
2017/01/16 08:48

fsfさ
dふぁfだs
2017/01/05 19:56

ああ
あああ
2016/11/09 18:25

test
サンプル
2016/11/08 16:42

セレクタの指定方法を返る
HTML部分
~~~~
<div>問題1</div>
<p>
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
</p>

<div>問題2</div>
<p>
<input type="radio" name="food01" value="1">いか
<input type="radio" name="food01" value="2">たこ
<input type="radio" name="food01" value="3">えび
<input type="radio" name="food01" value="4">えび
</p>
2016/11/08 14:31

セレクタの指定方法を返る
>教えてくださいさん
セレクタの指定方法をinputからnameに変える方法はいかがでしょうか。

//問題1
$(function() {
$("*[name=food]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});

//問題2
$(function() {
$("*[name=food01]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});
2016/11/08 14:31

残りを読む »