Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.