「javascript/gallery」の編集履歴（バックアップ）一覧に戻る

javascript/gallery - (2017/04/29 (土) 18:50:21) のソース

#js(){{{{{
<style>
.gallery {
	display:inline-block;
	width:600px;
	height:390px;
	margin-top:10px;
	position:relative;


}
.gallery img {
	position:absolute;
	left:0;
	top:0;

	display:none;/* 応急処置 */
}
.gallery img:nth-of-type(n+2) {
	display:none;
}
/* 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-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-bottomleft: 7px;
}
div.gallery_btn div:last-child {
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-webkit-border-bottom-right-radius: 7px;
	-moz-border-radius-topright: 7px;
	-moz-border-radius-bottomright: 7px;
}
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>
<script type="text/javascript">
$(document).ready(function(){
	/* 初期値 */
	var $width = 600; // 横幅
	var $height = 337; // 高さ
	var $btn_h = 10; // ボタン位置
	var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
	
	var $img_max = 100; // 画像最大枚数
	
	$('.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({'position':'relative', 'overflow':'hidden', 'width':$width, 'height':$height});
		$(' div.gallery_list img', this).hide().css({'position':'absolute', 'top':0, 'left':0});
		$(' div.gallery_list 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': $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>
}}}}}