Saetl.net

Simple And Easy TempLate

PhotoCradleの使い方

  1. 下記ページの 「Download」 よりファイル1式をダウンロード。
    PhotoCradle-js
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルでは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>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル