「javascript/gallery」の編集履歴（バックアップ）一覧はこちら

javascript/gallery - (2017/12/23 (土) 08:03:21) の最新版との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#js(){{{{{
<script type="text/javascript">
$(function(){
	/* 今後JSプラグインでstyleが使えなくなるのに備えてインラインcssでスタイル定義する */
	var style = '<style type="text/css">'+
		'.gallery {display:inline-block;width:600px;height:390px;margin-top:10px;position:relative;}'+
		'.active {display:inline-block;}'+
		'.gallery img {display:none;}'+
		'.gallery_list > img,.gallery_list > div {position:absolute;overflow:hidden;left:0;top:0;bottom:0;background-color:#C0C0C0;}'+
		'.gallery_list > div {font-size:24px;margin:auto;height:80px;text-align:center;}'+
		'/* btn */'+
		'div.gallery_btn {position:absolute;right:0;}'+
		'div.gallery_btn div {position:relative;cursor:pointer;padding:5px 10px;float:left;border:solid 1px #aaa;margin-left:-1px;background:#eee;background-image:linear-gradient(top, #F6F6F6, #ccc);background-image:-ms-linear-gradient(top, #F6F6F6, #ccc);background-image:-moz-linear-gradient(top, #F6F6F6, #ccc);background-image:-webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#ccc));box-shadow:2px 2px 6px #ddd;-moz-box-shadow:2px 2px 6px #ddd;-webkit-box-shadow:2px 2px 6px #ddd;text-shadow:1px 1px 0px #fff;}'+
		'div.gallery_btn div:first-child {border-radius:7px 0 0 7px;-webkit-border-radius:7px 0 0 7px;-moz-border-radius:7px 0 0 7px;}'+
		'div.gallery_btn div:last-child {border-radius:0 7px 7px 0;-webkit-border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;}'+
		'div.gallery_btn div.checked {color:#fff;background:#C3C3C3;background-image:linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-ms-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-moz-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB));text-shadow:0px 0px 0px #fff;}'+
		'</style>';
	$(style).appendTo('head');
	/* 初期値 */
	var $width = 600; // 横幅
	var $height = 337; // 高さ
	var $btn_h = 10; // ボタン位置
	var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
	
	var $img_max = 100; // 画像最大枚数

	/* 読み込むタイミングをこのJSで管理する */
	$('.gallery img').each(function() {
		$(this).removeClass('lazy atwiki_plugin_ref')
			.attr('data-origin', $(this).attr('data-original'))
			.removeAttr('data-original');
	});
	
	$('.gallery').each(function(){
		/* 画像を移動 */
		var div1 = $('<div>').addClass('gallery_list');
		$(' img', this).each(function(i,img){
			$(img).css({'z-index': $img_max - i});
			$(div1).append($(img));
		});
		$(this).html($(div1));
		
		/* 画像の初期位置を設定 */
		$(' div.gallery_list img', this).css({
			'width':$width, 
			'height':$height
		});
		$(' div.gallery_list img:first', this).addClass('active').show();
		
		/* 画像の読み込みを開始する */
		$(' div.gallery_list img', this).each(function() {
			$(this).on('error', function() {
				$(this).insertBefore(
					$('<div>').css({
		 				'width':$width,
		 				'z-index':$(this).css('z-index')
		 			}).text('画像の読み込みに失敗しました'));
		 		$(this).remove();
			});
			/* コールバックより後に読み込み開始する(src指定) */
			$(this).attr('src', $(this).attr('data-origin'));
		});
		
		/* クリック判定用の透明なdiv作成 */
		var prev = $('<div>').addClass('prev');
		var next = $('<div>').addClass('next');
		$(this).append($(prev)).append($(next));
		
		$(' div.prev', this).css({
			'z-index': $img_max + 1,
			'width':$width/2, 
			'height':$height, 
			'position':'absolute', 
			'top':0, 
			'left':0,
		});
		$(' div.next', this).css({
			'z-index': $img_max + 1,
			'width':$width/2, 
			'height':$height, 
			'position':'absolute', 
			'top':0, 
			'right':0,
		});
		
		/* ボタン作成 */
		var imgNum = $('img', div1).length;
		var div2 = $('<div>').addClass('gallery_btn');
		for(var i=1; i<=imgNum; i++){
			var btn = $('<div>').text(i);
			if(i==1){$(btn).addClass('checked');}
			$(div2).append($(btn));
		}
		$(this).append($(div2));
		
		$(' div.gallery_btn', this).css({
			'top':$height + $btn_h,
		});
	});
	
	/* ひとつ前にフェードする処理 */
	$('.gallery div.prev').click(function(){
		var aaa = $(this).parent();
		var active = $(' div.gallery_list img.active', aaa);
		var size = $(' div.gallery_list img', aaa).length;
		var index = 1 + $(' div.gallery_list img', aaa).index(active);
		
		if(index == 1){var num = size;}
		else{var num = -1 + index;}
		
		gallery_click(aaa, num);
	});
	
	/* ひとつ次にフェードする処理 */
	$('.gallery div.next').click(function(){
		var aaa = $(this).parent();
		var active = $(' div.gallery_list img.active', aaa);
		var size = $(' div.gallery_list img', aaa).length;
		var index = 1 + $(' div.gallery_list img', aaa).index(active);
		
		if(index == size){var num = 1;}
		else{var num = 1 + index;}
		
		gallery_click(aaa, num);
	});
	
	/* ボタン処理 */
	$('div.gallery_btn div').click(function() {
		var aaa = $(this).parent().parent();
		var num = $(this).text();
		if(!($(this).hasClass('checked'))){
			gallery_click(aaa, num);
		}
	});
	
	function gallery_click(aaa, num){
		/* アニメーション終了 */
		$(' div.gallery_list img', aaa).finish();
		
		/* フェード処理 */
		var active = $(' div.gallery_list img.active', aaa);
		var next = $(' div.gallery_list img:nth-of-type('+num+')', aaa);
		active.fadeOut($fade_speed).removeClass('active');
		next.fadeIn($fade_speed).addClass('active');
		
		/* ボタン処理 */
		var ccc = $(' div.gallery_btn div:nth-of-type('+num+')', aaa);
		$(ccc).parent().each(function() {
			$('div', this).removeClass('checked');
		});
		$(ccc).addClass('checked');
	}
});
</script>
}}}}}

#js(){{{{{
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
		/* 今後JSプラグインでstyleが使えなくなるのに備えてインラインcssでスタイル定義する */
		var style = '<style type="text/css">'+
			'.gallery {display:inline-block;width:600px;height:337px;margin:10px 10px 60px 0px;position:relative;}'+
			'.gallery img {display:none;position:absolute;overflow:hidden;left:0;top:0;bottom:0;background-color:#C0C0C0;width:100%;height:100%;}'+
			'/* btn */'+
			'div.gallery_btn {position:absolute;right:0;top:calc(100% + 10px);}'+
			'div.gallery_btn div {position:relative;cursor:pointer;padding:5px 10px;float:left;border:solid 1px #aaa;margin-left:-1px;background:#eee;background-image:linear-gradient(top, #F6F6F6, #ccc);background-image:-ms-linear-gradient(top, #F6F6F6, #ccc);background-image:-moz-linear-gradient(top, #F6F6F6, #ccc);background-image:-webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#ccc));box-shadow:2px 2px 6px #ddd;-moz-box-shadow:2px 2px 6px #ddd;-webkit-box-shadow:2px 2px 6px #ddd;text-shadow:1px 1px 0px #fff;}'+
			'div.gallery_btn div:first-child {border-radius:7px 0 0 7px;-webkit-border-radius:7px 0 0 7px;-moz-border-radius:7px 0 0 7px;}'+
			'div.gallery_btn div:last-child {border-radius:0 7px 7px 0;-webkit-border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;}'+
			'div.gallery_btn div.checked {color:#fff;background:#C3C3C3;background-image:linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-ms-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-moz-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB));text-shadow:0px 0px 0px #fff;}'+
			'/* for SP page */' +
			'@media screen and ( max-width:600px ) {.gallery {margin:10px 0px 60px 0px;width:100%;height:calc((100vw - 20px) / 600 * 337);}}'+
			'</style>';
		$(style).appendTo('head');
		/* 初期値 */
		var $width = 600; // 横幅
		var $height = 337; // 高さ
		var $btn_h = 10; // ボタン位置
		var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
		
		$('.gallery').each(function(){
			$('img:first', this).addClass('active').show();
			
			/* クリック判定用の透明なdiv作成 */
			var prev = $('<div>').addClass('prev');
			var next = $('<div>').addClass('next');
			$(this).append($(prev)).append($(next));
			
			$(' div.prev', this).css({
				'z-index': 101,
				'width':'50%', 
				'height':'100%', 
				'position':'absolute', 
				'top':0, 
				'left':0,
			});
			$(' div.next', this).css({
				'z-index': 101,
				'width':'50%', 
				'height':'100%', 
				'position':'absolute', 
				'top':0, 
				'right':0,
			});
			
			/* ボタン作成 */
			var imgNum = $('img', this).length;
			var div2 = $('<div>').addClass('gallery_btn');
			for(var i=1; i<=imgNum; i++){
				var btn = $('<div>').text(i);
				if(i==1){$(btn).addClass('checked');}
				$(div2).append($(btn));
			}
			$(this).append($(div2));
		});
		
		/* ひとつ前にフェードする処理 */
		$('.gallery div.prev').click(function(){
			var aaa = $(this).parent();
			var active = $('.active', aaa);
			var num = $('img', aaa).index(active) - 1;
			if (num < 0){ num = $('img', aaa).length - 1;}

			gallery_click(aaa, num);
		});
		
		/* ひとつ次にフェードする処理 */
		$('.gallery div.next').click(function(){
			var aaa = $(this).parent();
			var active = $('.active', aaa);
			var num = $('img', aaa).index(active) + 1;
			if ($('img', aaa).length <= num){ num = 0; }
			
			gallery_click(aaa, num);
		});
		
		/* ボタン処理 */
		$('div.gallery_btn div').click(function() {
			var aaa = $(this).parent().parent();
			var num = parseInt($(this).text()) - 1;
			if(!($(this).hasClass('checked'))){
				gallery_click(aaa, num);
			}
		});
		
		function gallery_click(aaa, num){
			/* アニメーション終了 */
			$('img', aaa).finish();
			
			/* フェード処理 */
			var active = $('.active', aaa);
			var next = $('img:eq('+num+')', aaa);
			active.fadeTo($fade_speed, 0).removeClass('active');
			next.fadeTo($fade_speed, 1).addClass('active');
			
			/* ボタン処理 */
			var ccc = $('div.gallery_btn div:eq('+num+')', aaa);
			$(ccc).parent().each(function() {
				$('div', this).removeClass('checked');
			});
			$(ccc).addClass('checked');
		}
	});
	</script>
}}}}}