カテゴリー: jQuery

jquery.infinitescroll をクリックで読み込む方法はこちらが詳しいです。

【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。

だけど、この方法のままだともう読み込むものが無い状態でも、「続きを見る」が表示され、クリックした後に読み込むものが無いことがわかる、というちょっと不親切な状況になってしまいます。
なので、ちょっと改善。
（変更したのはグレーのハイライト部分です）
読み込むページ数を指定して、そのページ数を読みきったらボタンを非表示にしてしまいます。

<script src="js/jquery.infinitescroll.min.js"></script>
$(function(){
	//ページ数を増やしたらpageMaxの数字を変更する
	var pageMax = 5;
	var pageNow = 1;
	$('#thanks .clearfix').infinitescroll({
		navSelector  	: '#infinitBox .btn',
		nextSelector 	: '#infinitBox .btn',
		itemSelector 	: '#infinitBox ul li',
		dataType		: 'html',
		loading: {
			finishedMsg: '<p class="loadingMessage">全ての画像を読み込みました！</p>',
			img: 'img/loading.gif',
			msgText: '<p class="loadingMessage">画像を読み込み中です</p>',
			speed: 'fast'
		}
	},
	function(newElements) {
		$(newElements).hide().delay(100).fadeIn(600);
		if (pageMax <= pageNow+1) {
			$btn.hide();
		} else {
			pageNow ++;
			$("#infinitBox .btn").appendTo("#infinitBox .wrap").delay(300).fadeIn(600);
		};
	});
	$('#infinitBox .clearfix').infinitescroll('unbind'); // 初期化
	$("#infinitBox .btn").click(function(){
		$('#infinitBox .clearfix').infinitescroll('retrieve');
		return false;
	});
});

ライトボックス系プラグインで扱いやすいcolorboxと改造したのでメモ

Colorboxの表示画像にaltを追加したい

まずはリンク元にtitleをつけておく（ここまでは標準機能でタイトルを表示させる方法と同じ）

jquery.colorbox.jsを開きます。

979行目にこちらの一行を追加。

		.attr('alt', settings.get('title'))

キャプションのみ非表示にする

837行目辺りのここをコメントアウト。
キャプション表示機能をオプションでfalseにすると、alt自体も無効になってしまうので。

//		$title.html(settings.get('title')).show();

リンク元をtitleでなくaltで設定したい

86行目辺りを以下のように改造。

	title: function() {
//		return this.title;
		return $(this).attr('alt');
	},

alt以外にキャプションも設定したい

リンク元に
data-caption=”キャプションの文言”
を追加

90行目辺りにこれを追加

	caption: function() {
		return $(this).data('caption');
	},

840行目辺りのここを改造。
キャプション表示機能をオプションでfalseにすると、alt自体も無効になってしまうので。

//		$title.html(settings.get('title')).show();
		$title.html(settings.get('caption')).show();

jQueryでアニメーションをする時、要素を表示したり消したりする手段がいろいろあるのでメモしました。

/*透過を含む画像はIE9以上で使いましょう*/
.show(1000);
.hide(1000);
.fadeIn(1000);
.fadeOut(1000);
.animate({opacity:'1'},1000);
.animate({opacity:'0'},1000);
.css({opacity:'1'});
.css({opacity:'0'});

/*IE8でもOK*/
.css({visibility:'visible'});
.css({visibility:'hidden'});
.css({display:'block'});
.css({display:'none'});