サンプル
+ Main
+- site
+- default.html
+- lib (ダウンロードしたlibをそのまま置いた)
+- css
+- images
+- js
サンプル
<!DOCTYPE html>
<html lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【勝手にやってちょ０１】</title>
<meta name="Keywords" content="【勝手にやってちょ０２】" />
<meta name="Description" content="【勝手にやってちょ０３】" />
<!-- jQuery library -->
<script type="text/javascript" src="../lib/js/jquery/_oldies/jquery-1.3.min.js"></script>
<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="../lib/js/jquery/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery/jquery.mousewheel.min.js"></script>
<!-- Slider Kit scripts -->
<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.8.min.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.delaycaptions.min.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.counter.min.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.timer.min.js"></script>
<!-- Slider Kit launch -->
<script type="text/javascript">
$(window).load(function(){
// ここで設定する
$(".photosgallery-minimalistic").sliderkit({
shownavitems:6, // 画像が増えたらここ増やせ。今回は6枚
circular:true,
navitemshover:false,
panelfxspeed:400,
auto:true,
autostill:1,
});
});
</script>
<!-- Slider Kit styles -->
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
<!-- Slider Kit compatibility -->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie8.css" /><![endif]-->
<!-- Site styles -->
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />
</head>
<body>
<noscript>
<div class="noscript">
【勝手にやってちょ０４】JavaScriptがオフられてた時の記述
</div>
</noscript>
<!-- ここからが本番 photosgallery-minimalistic -->
<div id="page" class="inner">
<div id="content">
<div class="sliderkit photosgallery-minimalistic">
<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>
<!-- ここは、小さい画像のパスを合わせて下さい -->
<li><a href="#" rel="nofollow" title="【勝手にやってちょ０５－０１】">
<img src="../lib/images/photos/mini/sample-01.jpg" alt="【勝手にやってちょ０５－１１】" /></a></li>
<!-- 略 -->
<li><a href="#" rel="nofollow" title="【勝手にやってちょ０５－０６】">
<img src="../lib/images/photos/mini/sample-06.jpg" alt="【勝手にやってちょ０５－１６】" /></a></li>
</ul>
</div>
</div>
<!-- ここは、大きい画像のパスを合わせて下さい -->
<div class="sliderkit-panels">
<div class="sliderkit-panel">
<a href="http://yahoo.co.jp" title="【勝手にやってちょ０７】">
<img src="../lib/images/photos/sample-01.jpg" alt="【勝手にやってちょ０６－０１】" />
</a>
</div>
<!-- 略 -->
<div class="sliderkit-panel">
<a href="http://yahoo.co.jp" title="【勝手にやってちょ０７】">
<img src="../lib/images/photos/sample-06.jpg" alt="【勝手にやってちょ０６－０６】" />
</a>
</div>
<div class="sliderkit-timer"></div>
</div>
</div>
<!-- // ここまで本番 photosgallery-minimalistic -->
</div>
</div>
</body>
</html>
