SaoriMiyazaki/change-responsive-sample

## change-responsive-sample
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>ギャラリーをレスポンシブ対応にするサンプルデモ｜memocarilog demo</title>
<link type="text/css" rel="stylesheet" href="rhinoslider.css" />
<link rel="stylesheet" href="../demo_style.css" media="screen, projection, print">
<style type="text/css">
.container{
    margin: 50px auto 0;
    max-width: 750px;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
h1{
    color:#F1483E;
}
h2{
    color: #666;
    font-size: 1.6em;
    line-height: 1.3;
}
.articlefoot{
    overflow: hidden;
}
#slider {
    padding:0;
    width: 600px;
    height:450px;
}
#slider li {
    list-style:none;
}
.rhino-item{
    width: 600px!important;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/rhinoslider-1.05.min.js"></script>
<script src="js/mousewheel.js"></script>
<script src="js/easing.js"></script>
<script>
$(function() {
    // スライドショーの設定
    $('#slider').rhinoslider({
        effect: 'shuffle',
        showTime: 2000,
        autoPlay: true
    });

    // スライドショーをレスポンシブにする
    window.onload = function() {
        var $photoBox = $('.rhino-container'), // ギャラリー親要素を指定
        adjust = 0, // 調整用の数値
        boxWidth = 600 + adjust, // ギャラリーの横幅の数値
        boxHeight =  450;   // ギャラリーの高さの数値

        // ギャラリーをウィンドウ幅に合わせて縮小する関数
        function boxScale(){
            // 現在のウィンドウサイズを取得
            var currentWidth =  document.documentElement.clientWidth,
                scaleHeight = boxHeight - ((currentWidth / boxWidth) * boxHeight),
                scaleRatio = currentWidth / boxWidth ;

            // ギャラリー幅よりもウィンドウ幅が小さかったら縮小処理をする
            if(currentWidth < boxWidth ){
                $photoBox.css({
                    '-webkit-transform' : 'scale('+ scaleRatio + ')',
                    '-ms-transform' : 'scale('+ scaleRatio + ')',
                    transform : 'scale('+ scaleRatio + ')',
                    // ↑ ウィンドウ幅 ÷ ギャラリー幅で縮小比率を計算し
                    // transform : scale() で縮小
                    '-webkit-transform-origin' : '0 0',
                    '-ms-transform-origin' : '0 0',
                    transformOrigin : '0 0',
                    // ↑ 縮小する時の変形起点を設定
                    //（ここでは左0と上0の位置を起点としている）
                    marginBottom : (-scaleHeight) + 'px'
                    // ↑ 縮小されても元の高さは保ったままなので、
                    // margin-bottom へネガティブマージンを設定して調整
                });
            } else {
            // ウィンドウ幅よりもギャラリー幅が小さい場合は縮小しないようにする
                $photoBox.css({
                    '-webkit-transform' : 'scale(1)' ,
                    '-ms-transform' : 'scale(1)' ,
                    transform : 'scale(1)' ,
                    marginBottom : 0 + 'px'
                });
            }
        }
        boxScale();

        // ↓ ウィンドウサイズが変更された時にも、上で定義した
        // 「ギャラリーをウィンドウ幅に合わせて縮小する」関数を実行する
        $(window).on('resize', boxScale);
    }
});
</script>
</head>
<body>
<div class="container">
<h1>Rhinoslider｜memocarilog demo</h1>

<ul id="slider">
    <li><img src="img/slider/1.JPG" alt="" /></li>
    <li><img src="img/slider/2.JPG" alt="" /></li>
    <li><img src="img/slider/3.JPG" alt="" /></li>
    <li><img src="img/slider/4.JPG" alt="" /></li>
    <li><img src="img/slider/5.JPG" alt="" /></li>
</ul>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>ギャラリーをレスポンシブ対応にするサンプルデモ｜memocarilog demo</title>
	<link type="text/css" rel="stylesheet" href="rhinoslider.css" />
	<link rel="stylesheet" href="../demo_style.css" media="screen, projection, print">
	<style type="text/css">
	.container{
	margin: 50px auto 0;
	max-width: 750px;
	width: 100%;
	text-align: center;
	overflow: hidden;
	}
	h1{
	color:#F1483E;
	}
	h2{
	color: #666;
	font-size: 1.6em;
	line-height: 1.3;
	}
	.articlefoot{
	overflow: hidden;
	}
	#slider {
	padding:0;
	width: 600px;
	height:450px;
	}
	#slider li {
	list-style:none;
	}
	.rhino-item{
	width: 600px!important;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/rhinoslider-1.05.min.js"></script>
	<script src="js/mousewheel.js"></script>
	<script src="js/easing.js"></script>
	<script>
	$(function() {
	// スライドショーの設定
	$('#slider').rhinoslider({
	effect: 'shuffle',
	showTime: 2000,
	autoPlay: true
	});

	// スライドショーをレスポンシブにする
	window.onload = function() {
	var $photoBox = $('.rhino-container'), // ギャラリー親要素を指定
	adjust = 0, // 調整用の数値
	boxWidth = 600 + adjust, // ギャラリーの横幅の数値
	boxHeight = 450; // ギャラリーの高さの数値

	// ギャラリーをウィンドウ幅に合わせて縮小する関数
	function boxScale(){
	// 現在のウィンドウサイズを取得
	var currentWidth = document.documentElement.clientWidth,
	scaleHeight = boxHeight - ((currentWidth / boxWidth) * boxHeight),
	scaleRatio = currentWidth / boxWidth ;

	// ギャラリー幅よりもウィンドウ幅が小さかったら縮小処理をする
	if(currentWidth < boxWidth ){
	$photoBox.css({
	'-webkit-transform' : 'scale('+ scaleRatio + ')',
	'-ms-transform' : 'scale('+ scaleRatio + ')',
	transform : 'scale('+ scaleRatio + ')',
	// ↑ ウィンドウ幅 ÷ ギャラリー幅で縮小比率を計算し
	// transform : scale() で縮小
	'-webkit-transform-origin' : '0 0',
	'-ms-transform-origin' : '0 0',
	transformOrigin : '0 0',
	// ↑ 縮小する時の変形起点を設定
	//（ここでは左0と上0の位置を起点としている）
	marginBottom : (-scaleHeight) + 'px'
	// ↑ 縮小されても元の高さは保ったままなので、
	// margin-bottom へネガティブマージンを設定して調整
	});
	} else {
	// ウィンドウ幅よりもギャラリー幅が小さい場合は縮小しないようにする
	$photoBox.css({
	'-webkit-transform' : 'scale(1)' ,
	'-ms-transform' : 'scale(1)' ,
	transform : 'scale(1)' ,
	marginBottom : 0 + 'px'
	});
	}
	}
	boxScale();

	// ↓ ウィンドウサイズが変更された時にも、上で定義した
	// 「ギャラリーをウィンドウ幅に合わせて縮小する」関数を実行する
	$(window).on('resize', boxScale);
	}
	});
	</script>
	</head>
	<body>
	<div class="container">
	<h1>Rhinoslider｜memocarilog demo</h1>

	<ul id="slider">
	<li><img src="img/slider/1.JPG" alt="" /></li>
	<li><img src="img/slider/2.JPG" alt="" /></li>
	<li><img src="img/slider/3.JPG" alt="" /></li>
	<li><img src="img/slider/4.JPG" alt="" /></li>
	<li><img src="img/slider/5.JPG" alt="" /></li>
	</ul>
	</body>
	</html>