TwitterやFacebookなどで使われている
コンテンツ要素をある一定の数表示(読み込み)しておいて
続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで
要素を順々に読み込んでいくUI。

このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、
同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。

jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験

今回の実験では<a>リンクを張った<img>画像タグを
<span>タグで囲った構成のまとまり
———————————————————-
<span><a><img></a></span>
———————————————————-
上記のセットを順々に追加していく構成になっています。

併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。
———————————————————-
・サムネイル画像
/img/thumb/thumb1.jpg

・メイン(拡大)画像
/img/main/main1.jpg

※それぞれファイル名の最後の数字を連番にします。
———————————————————-

まずは動作のサンプルから。
「もっと見る」のボタンをクリックすると追加で画像が10個ずつ読み込まれます。

サンプルを別枠で表示する。

「もっと見る」をクリックすることで
合計36枚の画像を10個ずつ順々に表示しています。
(最後は端数の6個だけ表示)

この動作の全体構成について
まずはHTMLから。

◆HTML
<div id="loadarea"></div>
<a href="javascript:void(0);" id="loadmore">もっと見る</a>

HTMLは画像を表示するエリアと
「もっと見る」ボタン用のリンクを配置するだけで
それぞれID名をつけます。

これに対してのCSSは以下。

◆CSS
/* #loadarea
--------------------------- */
#loadarea {
	margin: 0 auto;
	width: 500px;
	text-align: left;
}

#loadarea span {
	width: 100px;
	text-align: left;
}

#loadarea img {
	width: 100px;
	text-align: left;
}

#loadmore {
	margin-top: 20px;
	width: 494px;
	height: 29px;
	line-height: 29px;
	display: block;
	background: #fff;
	border: #999 3px double;
}

今回はCSSは特に重要な項目はなく、
通常のレイアウトを形成するCSS指定のみになっています。

そして「もっと見る」のボタンをクリックして
画像を追加させていくUIを実装するスクリプトは以下のようになります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var $setArea = $('#loadarea'),
	$setMore = $('#loadmore'),
	loadNum = 10,
	maxNum = 36;

	$setMore.click(function(){
		var childLengh = $setArea.children('span').length;
		var loopCont = (childLengh)+(loadNum);

		if(loopCont < maxNum){
			$.each(new Array(loadNum),function(i){
				$setArea.append('<span class="item" id="num' + ((childLengh)+((i)+1)) + '"><a href="img/main/main' + ((childLengh)+((i)+1)) + '.jpg"><img src="img/thumb/thumb' + ((childLengh)+((i)+1)) + '.jpg" alt="" /></a></span>');
			});
		} else if(loopCont >= maxNum){
			var overCont = (loopCont)-(maxNum);
			var adjustCont = (loadNum)-(overCont);

			$.each(new Array(adjustCont),function(i){
				$setArea.append('<span class="item" id="num' + ((childLengh)+((i)+1)) + '"><a href="img/main/main' + ((childLengh)+((i)+1)) + '.jpg"><img src="img/thumb/thumb' + ((childLengh)+((i)+1)) + '.jpg" alt="" /></a></span>');
				$setMore.remove();
			});
		}
	});
	$(window).load(function(){
		$setMore.click();
	});
});
</script>

「もっと見る」ボタンをクリック後は、
上記で説明した
———————————————————-
<span><a><img></a></span>
———————————————————-
このソースのセットが指定した数だけ順々に追加していく構成になっています。

スクリプト開始部分にある
———————————
var $setArea = $(‘#loadarea’),
$setMore = $(‘#loadmore’),
loadNum = 10,
maxNum = 36;
———————————
は上から
———————————
・画像を表示するメインエリアのID名
・「もっと見る」ボタンのID名
・「もっと見る」クリック1回で表示する画像数
・表示する画像の最大枚数
———————————
となっているので、
ここの値を変更することでもろもろ調整が可能です。

「もっと見る」クリック後に生成されるHTMLには
画像を囲っている<span>タグにはそれぞれクラス「item」を共通で付与し、
個別にナンバリングされたID名が付く仕様にしています。

◆HTML生成後のサンプル
<div id="loadarea">
<span class="item" id="num1"><a href="img/main/main1.jpg"><img src="img/thumb/thumb1.jpg" alt=""></a></span>
<span class="item" id="num2"><a href="img/main/main2.jpg"><img src="img/thumb/thumb2.jpg" alt=""></a></span>
<span class="item" id="num3"><a href="img/main/main3.jpg"><img src="img/thumb/thumb3.jpg" alt=""></a></span>
<span class="item" id="num4"><a href="img/main/main4.jpg"><img src="img/thumb/thumb4.jpg" alt=""></a></span>
<span class="item" id="num5"><a href="img/main/main5.jpg"><img src="img/thumb/thumb5.jpg" alt=""></a></span>
	・
	・
	・
	・
	・
</div>

今回のサンプルは単純な<span>で囲われたリンク付き画像を追加していく処理になっていますが
スクリプト内の「.append();」で指定しているソース部分を変えることで
<ul>の中で<li>を追加していく仕様にしたり、ソース構成を変更させることも可能です。

「もっと見る」を使ってシンプルな構成での要素を追加していくUIでは
こんな感じにスクリプトを組むことで実装できるかと思います。

jQueryで「もっと見る」を使って要素を追加していくUI必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Comments (14)

  • jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験 | BlackFlag - ミイラコード | 2012.06.22 11:05

    […] https://black-flag.net/jquery/20120523-3848.html /* […]

  • tokuyama | 2012.09.12 11:24

    Web制作に携わっているものですが、すごい便利で参考にさせていただこうと思っていますが、以下のようなことは可能でしょうか?

    ・拡大画像を表示させた場合の閉じるボタン機能。(現状はブラウザの戻るボタンで元の画面に戻るイメージ)
    ・拡大画像の背景を黒の半透明。
    ・画像の表示順を番号の大きい順に表示
    →合計画像が50枚の場合で、最初のロード数が12枚の場合、
    img50〜img39までを順に表示し、もっと見るクリックで残りのimg38〜img1までを表示するようなイメージ

    上記のような機能がついたバージョンアップ版等がございましたら非常に助かります。
    お忙しいところ誠に恐れ入りますが何卒ご教示いただければ幸いです。

  • BlackFlag | 2012.09.12 21:15

    >tokuyamaさん

    コメントありがとうございます。
    このスクリプトをご活用いただき嬉しく思っております。

    ご質問頂きました件についてですが
    当記事でのスクリプト紹介は「もっと見る」ボタンでの画像追加動作になっており
    サムネイルクリック後の動作については特にスクリプトは関連せずにJPEGに直リンクしています。

    おそらくFirefoxでご確認されている影響で
    モーダルの様な見た目になっていると想定されますが
    その様な動作を実装する場合には、
    モーダル系のプラグインなどと併用して組み込んでいただければと思っております。

    画像の表示順序については
    画像ファイル名のナンバリングの順序を逆にすることで
    実現できるかと思っておりますが如何でしょうか。

    ご確認くださいませ。

    よろしくお願いします。

  • tokuyama | 2012.09.13 20:32

    ご連絡ありがとうございます。

    画像の表示順ですが、例えば商品の画像を随時更新したい場合に、一つ目をimg1.jpgとして、順にナンバリングするとします。この場合、現在のソースでいくと、最新の商品(例えばimg20.jpg)とすると、img20.jpgの画像は最下部にきてしまいます。

    そうではなく、最新の画像が、最上部の左端に常に表示されるようにできればと思っています。
    もし簡単にソースを変更できるのでしたら、ご教示いただければ幸いです。

    よろしくお願いいたします。

  • BlackFlag | 2012.09.15 1:32

    >tokuyamaさん

    ご確認ありがとうございます。

    画像の表示順について順序を逆にする場合は
    スクリプト上のナンバリング部分の計算を
    最大枚数用の変数「maxNum」を使って計算することで
    実現可能かと思っております。

    「((childLengh)+((i)+1))」と計算しているところが
    「((maxNum)-((childLengh)+(i)))」となるかと思います。

    動作サンプルも用意しましたので
    必要あれば下記URLよりダウンロードしてご確認ください。

    https://black-flag.net/devel/jQueryMoreClick/jQueryMoreClickReverse.zip

    ご確認よろしくお願いします。

  • tokuyama | 2012.09.18 9:43

    ありがとうございます。
    ソースまでご用意いただき、誠に感謝申し上げます。

    後、サムネールの画像クリックでモーダル系の表示をしようと試みているのですが、下記サイトを参考に試してみた所、どうもうまくいきません。
    http://modal.modoki.jp/

    以下、headerに記載したソースを抜粋
    ===
    $setArea.append(‘<span class=”item” id=”num’ + ((maxNum)-((childLengh)+(i))) + ‘”><a href=”./img/img’ + ((maxNum)-((childLengh)+(i))) + ‘.jpg” class=”mmdk”><img src=”./img/img’ + ((maxNum)-((childLengh)+(i))) + ‘.jpg” alt=”” /></a></span>’);
    ===

    所定のjsをリンクし、aタグの中にクラス(class=”mmdk”)を指定して記載しているのですが、反映できていないようです。

    また、本スクリプトを使用せずに普通にaタグに記載するとうまく行きます。

    記載する箇所は合っていると思うのですが、もし本スクリプトへのモーダルの既述方法が間違っている場合はご教示いただけましたら大変助かります。

    ではお忙しいところ誠に恐れ入りますがご確認いただけましたら幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2012.09.20 1:38

    >tokuyamaさん

    ご返信ありがとうございます。

    ご質問いただいたモーダルウィンドウの件ですが
    「class=”mmdk”」をみてモーダルウィンドウ用のスクリプトが実行されるのは
    ページロード時になっているので、jQueryで後々生成されるソースには
    それが影響されない形になっているものだと思われます。

    モーダルウィンドウ用のスクリプトを
    ———————————-
    $setMore.click(function(){
    ———————————-
    のボタンクリック時にも実行されるように調整することで
    動作すると思われます。

    お試しください。
    よろしくお願いします。

  • tokuyama | 2012.10.02 18:00

    ありがとうございます。
    なんとか他のモーダル系のスクリプトを使用して希望通りの動きができました。
    本当に感謝申し上げます。(ご連絡が遅くなり申し訳ございません)

    あと一点ご質問なのですが、例えばロード時に表示する数と最大表示数が同じの場合、
    loadNum = 3,
    maxNum = 3;

    この場合、「もっと見る」ボタンを最初から表示しないようにするにはどのようにしたらよいでしょうか?
    お忙しいところ誠に申し訳ございませんが、ご教示いただけましたら大変助かります。

    よろしくお願いいたします。

  • tokuyama | 2012.10.02 19:21

    tokuyamaです。
    先ほどの件に追加でご質問です。

    「もっと見る」ボタンが消えない場合もございます。
    https://black-flag.net/devel/jQueryMoreClick/jQueryMoreClickReverse.zip

    のダウンロードデータでも検証したのですが、
    loadNum = 10,
    maxNum = 36;
    の場合は、最後まで見ると「もっと見る」ボタンは消えるのですが、

    loadNum = 12,
    maxNum = 36;
    の場合、最後まで見ても「もっと見る」ボタンは消えません。

    先ほどのご質問と関連しているかわからないのですが、一度ご確認いただければ幸いです。

    お忙しいところ誠に恐れ入りますがよろしくお願い申しあげます。

  • BlackFlag | 2012.10.02 23:29

    >tokuyamaさん

    モーダル部分の動作についても
    無事に解消されたようでよかったです。

    ロード時に表示する数と最大表示数が同じの場合での
    「もっと見る」のボタンを表示させない動作については
    もともとスクリプト内で一箇所、指定が逆になっていたようでした。

    記事内で紹介しているスクリプトの
    14行目と18行目のif文のところの不等号のイコールを入れ替えてみてください。
    (記事内のスクリプトの記述は修正してあります)

    これで解決するかと思います。
    ご確認よろしくお願いします。

  • tokuyama | 2012.10.03 9:48

    tokuyama です。
    早々のご連絡誠に感謝申し上げます。

    希望通りの動きができました。
    本当にありがとうござました!

  • BlackFlag | 2012.10.04 0:54

    >tokuyamaさん

    ご連絡ありがとうございます。

    無事に希望通りの動作が実装できた様で
    安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • nakajima | 2016.02.09 17:24

    こんなUIを探しておりました。
    公開ありがとうございます。
    一つ質問なのですが、ボタンを押した時に表示される領域を
    フワッと柔らかく表示することは可能でしょうか。

    贅沢を言って申し訳ございませんが、お力添え宜しくおねがしいます。

  • BlackFlag | 2016.02.14 9:49

    >nakajimaさん
    コメントありがとうございます。
    この画像読み込みスクリプトをご活用いただき嬉しく思っております。

    ご質問頂きました件についてですが
    宣伝みたくなってしまい申し訳ありませんが…

    そのような仕様の動作については
    ——————————-
    ・書籍「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」出版について
    https://black-flag.net/jquery/20160202-5926.html
    ——————————-
    こちらで紹介させていただいておりますので
    ご確認いただければと思っております。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して