Saetl.net

Simple And Easy TempLate

iViewの使い方

  1. 下記ページの ｢Download ZIP｣ よりファイル1式をダウンロード。
    iView
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
    <head>
<!--ダウンロードしたファイル-->
<link rel="stylesheet" type="text/css" href="css/iView.css">
</head>

    サンプルのcssコード（サンプルのcssは改変しています）

    /*ページ設定部分（style.cssなどで設定していれば削除する）*/
* {
	margin: 0;
	padding: 0;
}
body {
	background: #fff;
	font-family: Arial;
}
#container {
	width: 910px;
	margin: 0 auto;
}
/*ここまでページ設定部分*/


/*ここからiViewの設定*/
#iview {
	display: block;
	width: 900px;
	height: 500px;
	background: #000;
	background: rgba(0, 0, 0, 0.7);
	padding: 5px;
	border-radius: 5px;
	position: relative;
	-webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	margin: 40px auto;
}
#iview a {
	text-decoration: none;
	cursor: pointer;
	color: #d0d9de;
}
#iview a:hover {
	color: #FFF;
}
sup {
	font-size: 13px;
}
#iview .iviewSlider {
	display: block;
	width: 900px;
	height: 500px;
	overflow: hidden;
	border-radius: 4px;
}
.iview-controlNav {
	position: absolute;
	bottom: 30px;
	left: 347px;
	height: 44px;
}
.iview-controlNav a {
	text-indent: -9999px;
}
.iview-controlNav a.iview-controlPrevNav {
	float: left;
	width: 50px;
	height: 44px;
	background: url('../images/slider-controls.png') no-repeat;
}
.iview-controlNav a.iview-controlNextNav {
	float: left;
	width: 50px;
	height: 44px;
	background: url('../images/slider-controls.png') no-repeat -50px 0px;
}
.iview-controlNav div.iview-items {
	float: left;
	padding: 0px 10px 0px 10px;
	height: 44px;
	background: url('../images/nav-bg.png');
}
.iview-controlNav a.iview-control {
	padding: 0px;
	float: left;
	width: 11px;
	height: 12px;
	background: url('../images/bullets.png') no-repeat;
	line-height: 0px;
}
.iview-controlNav a.iview-control.active {
	background-position: 0px -12px;
}
.iview-caption {
	background: url('../images/caption-bg.png');
	color: #FFF;
	border-radius: 3px;
	padding: 10px 15px;
	font-family: Verdana;
	font-size: 12px;
	text-shadow: #000 1px 1px 0px;
}
.iview-caption.caption1 {
	font-size: 36px;
	font-weight: bold;
	height: 45px;
}
.iview-caption.caption2 {
	background: #00b4ff;
	font-size: 36px;
	font-weight: bold;
	text-shadow: none;
}
.iview-caption.caption3 {
	background: #FFF;
	color: #000;
	font-size: 26px;
	text-shadow: none;
}
.iview-caption.caption4 {
	font-size: 22px;
	font-weight: bold;
}
.iview-caption.caption5 {
	background: #c4302b;
	box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;
	font-size: 15px;
	font-weight: bold;
	text-shadow: none;
}
.iview-caption.caption6 {
	font-size: 15px;
}
.iview-caption.caption7 {
	text-align: left;
	font-size: 11px;
	color: #888;
	border-radius: 0px;
}
.iview-caption.caption7 div {
	line-height: 200%;
}
.iview-caption.caption7 h3 {
	margin-bottom: 20px;
	color: #FFF;
}
.iview-caption.blackcaption {
	background: #000;
	box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;
	text-shadow: none;
	white-space: nowrap;
}
#iview-preloader {
	border: #666 1px solid;
	width: 150px
}
#iview-preloader div {
	background: #666;
}
.iview-controlNav div.iview-items ul li {
	padding: 0px;
	float: left;
	width: 11px;
	height: 12px;
	margin: 3px;
	margin-top: 16px;
	line-height: 0px;
}
#iview #iview-tooltip {
	display: none;
	position: absolute;
	background: url('../images/tooltip.png') no-repeat;
	width: 124px;
	height: 90px;
	bottom: 30px;
	left: -67px;
	padding: 10px;
	z-index: 100;
}
#iview #iview-tooltip div.holder {
	display: block;
	width: 124px;
	height: 84px;
	overflow: hidden;
	border-radius: 2px;
}
#iview #iview-tooltip div.holder div.container {
	display: block;
	width: 4000px;
}
#iview #iview-tooltip div.holder div.container div {
	float: left;
	display: block;
	overflow: hidden;
	width: 124px;
	height: 84px;
	left: -50%;
	text-align: center;
}
#iview #iview-tooltip div.holder div.container div img {
	height: 84px;
	margin: 0 auto;
}
/* The slider */
.iviewSlider {
	overflow: hidden;
}
/* The timer in the Slider */
#iview-timer {
	position: absolute;
	z-index: 100;
	border-radius: 5px;
	cursor: pointer;
}
#iview-timer div {
	border-radius: 3px;

}
/* The Preloader in the Slider */
#iview-preloader {
	position: absolute;
	z-index: 1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: #000 1px solid;
	padding: 1px;
	width: 100px;
	height: 3px;
}
#iview-preloader div {
	float: left;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	height: 3px;
	background: #000;
	width: 0px;
}
/* The strips and boxes in the Slider */
.iview-strip {
	display: block;
	position: absolute;
	z-index: 5;
}
.iview-block {
	display: block;
	position: absolute;
	z-index: 5;
}
/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
	position: absolute;
	top: 45%;
	z-index: 9;
	cursor: pointer;
}
.iview-prevNav {
	left: 0px;
}
.iview-nextNav {
	right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
	position: absolute;
	z-index: 9;
}
.iview-controlNav a {
	z-index: 9;
	cursor: pointer;
}
.iview-controlNav a.active {
	font-weight: bold;
}
.iview-controlNav .iview-items ul {
	list-style: none;
}
.iview-controlNav .iview-items ul li {
	display: inline;
	position: relative;
}
.iview-controlNav .iview-tooltip {
	position: absolute;
}
/* The captions in the Slider */
.iview-caption {
	position: absolute;
	z-index: 4;
	overflow: hidden;
	cursor: default;
}
/* The video show in the Slider */
.iview-video-show {
	background: #000;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 101;
}
.iview-video-show .iview-video-container {
	position: relative;
	width: 100%;
	height: 100%;
}
.iview-video-show .iview-video-container a.iview-video-close {
	position: absolute;
	right: 10px;
	top: 10px;
	background: #222;
	color: #FFF;
	height: 20px;
	width: 20px;
	text-align: center;
	line-height: 29px;
	font-size: 22px;
	font-weight: bold;
	overflow: hidden;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.iview-video-show .iview-video-container a.iview-video-close:hover {
	background: #444;
}
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/iview.js"></script>
<!--javascript追記-->
<script>
	$(document).ready(function(){
		$('#iview').iView({
			pauseTime: 7000,
			directionNav: false,
			controlNav: true,
			tooltipY: -15
		});
	});
</script>
</body>
    ・<body></body>内にコードを記述 
      <div id="iview">
    <div data-iview:image="images/photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
      <div class="iview-caption caption1" data-x="80" data-y="200"> iView<sup>&trade;</sup> </div>
      <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight"> The world's most awesome jQuery Image & Content Slider </div>
      <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"> <i>Presented by <b>Hemn Chawroka</b></i> </div>
    </div>
    <div data-iview:image="images/photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
      <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown"> Captions can be positioned and resized freely </div>
      <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"> <a href="#">Example URL-link</a> </div>
    </div>
    <div data-iview:image="images/photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
      <iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
      <div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight"> Video </div>
      <div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft"> Support </div>
    </div>
    <div data-iview:image="images/photos/photo3.jpg">
      <div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade"> Some of iView's Options: </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic"> Touch swipe for iOS and Android devices </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic"> Image And Thumbs Fully Resizable </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic"> Customizable Transition Effect </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic"> Freely Positionable and Stylable Captions </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic"> Cross Browser Compatibility! </div>
    </div>
    <div data-iview:image="images/photos/photo4.jpg">
      <div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight">
        <h3>The Responsive Caption</h3>
        This is the product that you <b><i>all have been waiting for</b></i>!<br>
        <br>
        Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br>
        <br>
        All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices! </div>
    </div>
    <div data-iview:image="images/photos/photo5.jpg">
      <div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft"> What are you waiting for? </div>
      <div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight"> Get it Now! </div>
    </div>
  </div>

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>iView</title>
<link rel="stylesheet" type="text/css" href="css/iView.css">
</head>

<body>
<div id="container">
  <div id="iview">
    <div data-iview:image="images/photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
      <div class="iview-caption caption1" data-x="80" data-y="200"> iView<sup>&trade;</sup> </div>
      <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight"> The world's most awesome jQuery Image & Content Slider </div>
      <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"> <i>Presented by <b>Hemn Chawroka</b></i> </div>
    </div>
    <div data-iview:image="images/photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
      <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown"> Captions can be positioned and resized freely </div>
      <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"> <a href="#">Example URL-link</a> </div>
    </div>
    <div data-iview:image="images/photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
      <iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
      <div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight"> Video </div>
      <div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft"> Support </div>
    </div>
    <div data-iview:image="images/photos/photo3.jpg">
      <div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade"> Some of iView's Options: </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic"> Touch swipe for iOS and Android devices </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic"> Image And Thumbs Fully Resizable </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic"> Customizable Transition Effect </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic"> Freely Positionable and Stylable Captions </div>
      <div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic"> Cross Browser Compatibility! </div>
    </div>
    <div data-iview:image="images/photos/photo4.jpg">
      <div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight">
        <h3>The Responsive Caption</h3>
        This is the product that you <b><i>all have been waiting for</b></i>!<br>
        <br>
        Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br>
        <br>
        All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices! </div>
    </div>
    <div data-iview:image="images/photos/photo5.jpg">
      <div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft"> What are you waiting for? </div>
      <div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight"> Get it Now! </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/iview.js"></script>
<script>
	$(document).ready(function(){
		$('#iview').iView({
			pauseTime: 7000,
			directionNav: false,
			controlNav: true,
			tooltipY: -15
		});
	});
</script>
</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル