スポンサーリンク
1.デモ
デモを作成しましたのでよろしかったら、ここをクリックしてください。2.ダウンロード
公式ページに行って、ダウンロードしてください。 ダウンロード完了し解凍すると「knack-gh-pages」フォルダーができます。3.必要なファイル
以下のファイルをそれぞれ自分のフォルダーにコピーします。knack.cssとspritesheet.pngは同じフォルダーにコピーします。当方はcssフォルダーとjsフォルダーを作成して保存しています。 knack.js knack.css spritesheet.png4.HTMLの編集
headタグ内で、knack.css、jquery.js、knack.jsを読み込み、プラグインの初期化をします。表示する画像ファイルもここで登録します。配列に画像のパスと、説明用のテキストを登録します。 jsセレクタは「projector」に固定されます。他の名前にするとフルスクリーンとかができなくなります。
<link rel="stylesheet" href="./css/knack.css" media="all" type="text/css" />
<script src="./js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="./js/knack.js" type="text/javascript"></script>
<script>
$(window).load(function(){
var images = [
["./images/sample01.jpg","月夜の猫"],
["./images/sample02.jpg"],
["./images/sample03.jpg"],
["./images/sample04.jpg"],
["./images/sample05.jpg"],
["./images/sample06.jpg"]
];
$("#projector").knack(
{
data: images,
'autoPlay': 4000,
}
);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="projector"></div>
</div>
</body>
5.CSSの編集
サムネイルの画像がデフォルトでは小さかったので、30%と大きくしました。
#wrapper {
width: 70%;
padding: 10px;
margin: 0 auto;
}
.embed-container .thumbs-area .thumbs-box .thumb-image {
width: 30%;
height: auto;
}
コメントを残す