また楽しそうなのが
codrops
にあったのでやってみました
サンプルは左右ボタンがずれてます;
おそらく何かのCSSが影響してしまってる気がしますが
Blogger以外で試してみたところ綺麗に表示されてました
SAMPLE
サンプルは左右ボタンがずれてます;
おそらく何かのCSSが影響してしまってる気がしますが
Blogger以外で試してみたところ綺麗に表示されてました
-
Landscape.1
-
Eclipse
-
Shishi-odoshi
-
Landscape.2
-
Illumination
-
Mt.Daisen
-
Cosmos
cssとjsを複数読み出す必要があります
jqueryは1.8.2以降であれば大丈夫と思われます。
<head>
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
</head>
<body>
<div class="wrapper" >
<ul id="sb-slider" class="sb-slider">
<li>
<a href="画像アドレス1" target="_blank" imageanchor="1" >
<img border="0" src="画像アドレス1" />
</a>
<div class="sb-description">
<h3>画像説明1</h3>
</div>
</li>
<li>
<a href="画像アドレス2" target="_blank" imageanchor="1" >
<img border="0" src="画像アドレス2" />
</a>
<div class="sb-description">
<h3>画像説明2</h3>
</div>
</li>
<div id="nav-arrows" class="nav-arrows">
<a href="#" style= "opacity: 0.4;">Next</a>
<a href="#" style= "opacity: 0.4;">Previous</a>
</div>
</ul>
</div>
</body>
あとはjavascriptですがbody部の閉じ括弧前で以下を記載します。jqueryは1.8.2以降であれば大丈夫と思われます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.slicebox.js"></script>
<script type="text/javascript">
$(function () {
var Page = (function () {
var $navArrows = $('#nav-arrows').hide(),
$shadow = $('#shadow').hide(),
slicebox = $('#sb-slider').slicebox({
onReady: function () {
$navArrows.show();
$shadow.show();
},
orientation: 'r',
cuboidsRandom: true,
disperseFactor: 30
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(':first').on('click', function () {
slicebox.next();
return false;
});
$navArrows.children(':last').on('click', function () {
slicebox.previous();
return false;
});
};
return {
init: init
};
})();
Page.init();
});
</script>
