Saetl.net

Simple And Easy TempLate

Slicebox 3D Image Sliderの使い方

  1. 下記ページの 「Download source」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcss,jsファイルを読み込ませるためのコードを記述。
    <head>
    <!--ダウンロードしたファイル-->
    <link rel="stylesheet" type="text/css" href="css/slicebox.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script src="js/modernizr.custom.46884.js"></script>
    </head> 
    

    サンプルのslicebox.cssコード(サンプルのcssは改変しています)(custom.cssはそのまま使用)

     a {
    	outline: none;
    }
    .sb-slider li > a img {
    	border: none;
    }
    .sb-slider img {
    	max-width: 100%;
    	display: block;
    }
    .sb-description {
    	padding: 20px;
    	bottom: 10px;
    	left: 10px;
    	right: 10px;
    	z-index: 1000;
    	position: absolute;
    	background: #CBBFAE;
    	background: rgba(190,176,155, 0.4);
    	border-left: 4px solid rgba(255,255,255,0.7);
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	filter: alpha(opacity=0);
    	opacity: 0;
    	color: #fff;
    	-webkit-transition: all 200ms;
    	-moz-transition: all 200ms;
    	-o-transition: all 200ms;
    	-ms-transition: all 200ms;
    	transition: all 200ms;
    }
    .sb-slider li.sb-current .sb-description {
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    	filter: alpha(opacity=80);
    	opacity: 1;
    }
    .sb-slider li.sb-current .sb-description:hover {
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    	filter: alpha(opacity=99);
    	background: rgba(190,176,155, 0.7);
    }
    .sb-perspective {
    	position: relative;
    }
    .sb-perspective > div {
    	position: absolute;
    	-webkit-transform-style: preserve-3d;
    	-moz-transform-style: preserve-3d;
    	-o-transform-style: preserve-3d;
    	-ms-transform-style: preserve-3d;
    	transform-style: preserve-3d;
    	-webkit-backface-visibility : hidden;
    	-moz-backface-visibility : hidden;
    	-o-backface-visibility : hidden;
    	-ms-backface-visibility : hidden;
    	backface-visibility : hidden;
    }
    .sb-side {
    	margin: 0;
    	display: block;
    	position: absolute;
    	-moz-backface-visibility : hidden;
    	-webkit-transform-style: preserve-3d;
    	-moz-transform-style: preserve-3d;
    	-o-transform-style: preserve-3d;
    	-ms-transform-style: preserve-3d;
    	transform-style: preserve-3d;
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/jquery.slicebox.js"></script>
    <!--javascript追記-->
    <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,
    					autoplay: true
    				}),
    				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>
    </body> 
    
    ・<body></body>内にコードを記述
      <ul id="sb-slider" class="sb-slider">
        <li> <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"> <img src="images/1.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Creative Lifesaver</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"> <img src="images/2.jpg" alt="image2"/> </a>
          <div class="sb-description">
            <h3>Honest Entertainer</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"> <img src="images/3.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Brave Astronaut</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"> <img src="images/4.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Affectionate Decision Maker</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"> <img src="images/5.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Faithful Investor</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"> <img src="images/6.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Groundbreaking Artist</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"> <img src="images/7.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Selfless Philantropist</h3>
          </div>
        </li>
      </ul>
      <div id="shadow" class="shadow"> </div>
      <div id="nav-arrows" class="nav-arrows"> <a href="#"> Next </a> <a href="#"> Previous </a> </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Slicebox 3D Image Slider</title>
    <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="container">
      <ul id="sb-slider" class="sb-slider">
        <li> <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"> <img src="images/1.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Creative Lifesaver</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"> <img src="images/2.jpg" alt="image2"/> </a>
          <div class="sb-description">
            <h3>Honest Entertainer</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"> <img src="images/3.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Brave Astronaut</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"> <img src="images/4.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Affectionate Decision Maker</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"> <img src="images/5.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Faithful Investor</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"> <img src="images/6.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Groundbreaking Artist</h3>
          </div>
        </li>
        <li> <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"> <img src="images/7.jpg" alt="image1"/> </a>
          <div class="sb-description">
            <h3>Selfless Philantropist</h3>
          </div>
        </li>
      </ul>
      <div id="shadow" class="shadow"> </div>
      <div id="nav-arrows" class="nav-arrows"> <a href="#"> Next </a> <a href="#"> Previous </a> </div>
    </div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/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,
    					autoplay: true
    				}),
    				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>
    </body>
    </html>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル