PhotoCradleの使い方
- 下記ページの 「Download」 よりファイル1式をダウンロード。
PhotoCradle-js
- ダウンロードしたファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にcssファイルを読み込ませるためのコードを記述。<head> javascriptsample/ <link rel="stylesheet" type="text/css" href="css/PhotoCradle.css"> </head>
サンプルのcssコード(サンプルのcssは改変しています)
/*ページ設定部分(style.cssなどで設定していれば削除する)*/ * { margin: 0; padding: 0; } body { background: #fff; font-family: Arial; } #container { width: 700px; margin: 0 auto; } /*ここまでページ設定部分*/ /*ここからPhotoCradleの設定*/ .photocradle .photocradle-box { background: #1d1d1d; border-radius: 4px 4px 4px 4px; box-shadow: 0px 0px 4px #fff; } .photocradle .thumbnails-plane { background: transparent; } .photocradle .thumbnails-slider { background: #1d1d1d; border-radius: 4px 4px 4px 4px; } .photocradle .previewControl .control-next { background: url(../images/controls.png) no-repeat -262px 0; width: 38px; height: 48px; } .photocradle .previewControl .control-prev { background: url(../images/controls.png) no-repeat -224px 0; width: 38px; height: 48px; } .photocradle .mini .control-next { background: url(../images/controls.png) no-repeat -243px -48px; width: 19px; height: 20px; } .photocradle .mini .control-prev { background: url(../images/controls.png) no-repeat -224px -48px; width: 19px; height: 20px; } .photocradle .originalControl .control-next { background: url(../images/controls.png) no-repeat -112px 0; width: 112px; height: 112px; } .photocradle .originalControl .control-prev { background: url(../images/controls.png) no-repeat 0 0; width: 112px; height: 112px; } .photocradle .originalLoader .loader { background: #1d1d1d url(../images/loader.png) no-repeat center center; width: 90px; height: 54px; border-radius: 9px 9px 9px 9px; opacity: 0.9; }
・</body>の直前にjsファイルを読み込ませるためのコードを記述。
<!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!--ダウンロードしたファイル--> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.photocradle.min.js"></script> <!--javascript追記--> <script> $(function() { var options = { firstImageIndex: 5, borderWeight: 4 }, params = { sources: [{ thumbnail: 'images/thumbnails/1.jpg', preview: 'images/previews/1.jpg', original: 'images/originals/1.jpg', title: 'Woods troll' }, { thumbnail: 'images/thumbnails/2.jpg', preview: 'images/previews/2.jpg', original: 'images/originals/2.jpg', title: 'A frosty tree New Zealand' }, { thumbnail: 'images/thumbnails/3.jpg', preview: 'images/previews/3.jpg', original: 'images/originals/3.jpg', title: 'Bloody fog' }, { thumbnail: 'images/thumbnails/4.jpg', preview: 'images/previews/4.jpg', original: 'images/originals/4.jpg', title: 'Blue dock' }, { thumbnail: 'images/thumbnails/5.jpg', preview: 'images/previews/5.jpg', original: 'images/originals/5.jpg', title: 'Daisy wallpaper' }, { thumbnail: 'images/thumbnails/6.jpg', preview: 'images/previews/6.jpg', original: 'images/originals/6.jpg', title: 'Flower' }, { thumbnail: 'images/thumbnails/7.jpg', preview: 'images/previews/7.jpg', original: 'images/originals/7.jpg', title: 'Waterdrops on the glass' }, { thumbnail: 'images/thumbnails/8.jpg', preview: 'images/previews/8.jpg', original: 'images/originals/8.jpg', title: 'I\'ll follow you' }, { thumbnail: 'images/thumbnails/9.jpg', preview: 'images/previews/9.jpg', original: 'images/originals/9.jpg', title: 'Fresh green trees' }] }; $('.photocradle').photocradle(params, options); }); </script> </body>
・<body></body>内にコードを記述<div class="photocradle" style="width:520px;height:340px;margin:170px 0 0 120px;float:left;"> </div>
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>PhotoCradle</title> <link rel="stylesheet" type="text/css" href="css/PhotoCradle.css"> </head> <body> <div id="container"> <div class="photocradle" style="width:520px;height:340px;margin:170px 0 0 120px;float:left;"> </div> </div> <a href="https://saetl.net/javascriptsample.html"> <span style="position:fixed; right:10px; top:10px; font-size:1em; color:#000;">Javascriptサンプル集 - Saetl.net</span> </a> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.photocradle.min.js"></script> <script> $(function() { var options = { firstImageIndex: 5, borderWeight: 4 }, params = { sources: [{ thumbnail: 'images/thumbnails/1.jpg', preview: 'images/previews/1.jpg', original: 'images/originals/1.jpg', title: 'Woods troll' }, { thumbnail: 'images/thumbnails/2.jpg', preview: 'images/previews/2.jpg', original: 'images/originals/2.jpg', title: 'A frosty tree New Zealand' }, { thumbnail: 'images/thumbnails/3.jpg', preview: 'images/previews/3.jpg', original: 'images/originals/3.jpg', title: 'Bloody fog' }, { thumbnail: 'images/thumbnails/4.jpg', preview: 'images/previews/4.jpg', original: 'images/originals/4.jpg', title: 'Blue dock' }, { thumbnail: 'images/thumbnails/5.jpg', preview: 'images/previews/5.jpg', original: 'images/originals/5.jpg', title: 'Daisy wallpaper' }, { thumbnail: 'images/thumbnails/6.jpg', preview: 'images/previews/6.jpg', original: 'images/originals/6.jpg', title: 'Flower' }, { thumbnail: 'images/thumbnails/7.jpg', preview: 'images/previews/7.jpg', original: 'images/originals/7.jpg', title: 'Waterdrops on the glass' }, { thumbnail: 'images/thumbnails/8.jpg', preview: 'images/previews/8.jpg', original: 'images/originals/8.jpg', title: 'I\'ll follow you' }, { thumbnail: 'images/thumbnails/9.jpg', preview: 'images/previews/9.jpg', original: 'images/originals/9.jpg', title: 'Fresh green trees' }] }; $('.photocradle').photocradle(params, options); }); </script> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。