Merge pull request #146 from xieyu33333/master

update readme & demo
be-fe · Jan 21, 2015 · b6f793b · b6f793b
2 parents afa98e1 + 1fc3e21
commit b6f793b
Show file tree

Hide file tree

Showing 20 changed files with 73 additions and 1,195 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,7 @@ It features:
 * Damping effect, Infinite Looping, Autometic sliding and Vertical/Horizontal Sliding can be configured.
 * Support desktop gesture which is convenient for testing.
 * Support image preloader to improve user experience.
+* Support image zoomIn and zoomOut.
 
 ##iSlider Mobile Demo
 
@@ -106,6 +107,8 @@ If you hope to implement the effects mentioned in introduction part, you can:
     </script>
 
 ##Understand The iSlider
+the demo is only basic usage of iSlider，you can get more from [WIKI](https://github.com/BE-FE/iSlider/wiki/Notices).
+
 Here provides a clear description of what options you are able to manipulate:
 <table>
 <thead>
@@ -195,6 +198,18 @@ Here provides a clear description of what options you are able to manipulate:
 		<td>Boolean (true | fasle)</td>
 		<td>Decide whether to cover the whole browser screen or not</td>
 	</tr>
+	</tr>
+		<tr>
+		<td>initIndex</td>
+		<td>Number</td>
+		<td>init content index in data</td>
+	</tr>
+	</tr>
+		<tr>
+		<td>useZoom</td>
+		<td>Boolean (true | fasle)</td>
+		<td>Decide whether to open picture zoomIn and zoomOut</td>
+	</tr>
 </tbody>
 </table>
 ##Contact us

diff --git a/README_Chinese.md b/README_Chinese.md
@@ -4,23 +4,24 @@
 ####[iSlider 中文官网](http://be-fe.github.io/iSlider/index.html)
 ####[iSlider Example](http://be-fe.github.io/iSlider/demo/)
 
-iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素。它有如下特性：
+iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理大多数的滑动场景，例如图片或者DOM元素。目前支持以下特性：
 
-* 性能极好，硬件加速，极小占用内存
-* 能够自定义动画，自带的动画包括 default, rotate, depth, flow, flip and card
-* 你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)
-* 我们还支持滑动衰减效果，循环效果，自动滑动效果，水平/垂直滑动
-* 支持桌面鼠标动作，方便测试
-* 支持图片预加载，改善用户体验
+* 性能好，体积小，占用内存小，核心代码仅500行。
+* 可以按需加载需要的功能。
+* 丰富的动画效果。
+* 可以设置回调函数(onslidestart, onslide, onslideend, onslidechange)。
+* 支持滑动衰减效果，循环滑动，自动播放，水平/垂直切换。
+* 支持图片预加载，改善用户体验。
+* 支持图片的缩放。
 
 ##iSlider移动端展示
 
 <img width="150px" height="150px" src="qrcode.png"/>
 
-##开始部署iSlider
-部署iSlider最容易的办法是查阅我们提供的简易例子。大部份代码存放在demo文件夹的文件里面。*iSlider* 是必要新建的一个类。
+##开始使用iSlider
+使用iSlider最简单的办法是查阅我们提供的简易例子。大代码存放在demo文件夹的文件里面。
 
-在你开始之前，你需要为iSlider先新建好数据:
+使用iSlider只需要准备好数据即可，无论是本地数据还是从接口获取的数据，例如：
 
 ``` javascript
 var data = [{
@@ -42,7 +43,7 @@ HTML代码如下:
 
 	<div id="iSlider-wrapper"></div>
 
-要使其运行，按下面例子新建ISlider类: 
+要使其运行，按下面例子新建iSlider类: 
 
  	<script type="text/javascript">
     	var islider = new iSlider({
@@ -100,8 +101,9 @@ var data = [{
     	});
     </script>
 
-##深入了解iSlider
-这里提供对iSlider类选项最清楚的描述: 
+## 深入了解iSlider
+上面的例子只是iSlider的基本用法，一些进阶功能可以参考[WIKI](https://github.com/BE-FE/iSlider/wiki/Notices)。
+下面是iSlider选项配置的列表:   
 <table>
 <thead>
 	<tr>
@@ -190,6 +192,18 @@ var data = [{
 		<td>Boolean (true | fasle)</td>
 		<td>是否平铺整个浏览器屏幕</td>
 	</tr>
+	</tr>
+		<tr>
+		<td>initIndex</td>
+		<td>Number</td>
+		<td>初始化内容在data中的索引值</td>
+	</tr>
+	</tr>
+		<tr>
+		<td>useZoom</td>
+		<td>Boolean (true | fasle)</td>
+		<td>是否开启图片缩放</td>
+	</tr>
 </tbody>
 </table>
 ##联系我们

diff --git a/build/islider.js b/build/islider.js
@@ -959,11 +959,6 @@ plugins_islider_button = function (iSlider) {
             var dir = parseInt(this.getAttribute('dir'));
             self.slideTo(self.slideIndex + dir);
           });
-          if (!this.isLooping) {
-            if (this.slideIndex === 0) {
-              btnOuter[0].style.display = 'none';
-            }
-          }
           btnOuter[i].appendChild(btnInner[i]);
           this.wrap.appendChild(btnOuter[i], this.wrap.nextSibling);
         }

diff --git a/demo/dom/slide_with_dots.html → demo/dom/slide_with_btn.html b/demo/dom/slide_with_dots.html → demo/dom/slide_with_btn.html
@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+<link href="../public/css/islider.css" rel="stylesheet">
 <style>
 	body {
 	    margin: 0;
@@ -81,7 +82,6 @@
 <body>
 	<div id="iSlider"></div>
 	<script type="text/javascript" src="../public/js/islider.js"></script>
-	<script type="text/javascript" src="../public/js/islider_plugin.js"></script>
 	<script>
 		var list = [{
 			'content' : '<div class="content home"><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
@@ -107,24 +107,10 @@
 		    type: 'dom',
 		    dom: document.getElementById("iSlider"),
 		    duration: 1000,
-		    isVertical: true,
-		    onslidechange: function(idx) {
-		    	islider.changeIndexDot();
-		    }
 		};
 
 		var islider = new iSlider(opts);
-
-		var dotOpt = {
-			isVertical: true,
-			left: ' ',
-			right: '0',
-			height: '20%',
-			borderColor: '#777',
-			diameter: '1em',
-		};
-
-		islider.renderDot(dotOpt);
+		islider.addBtn();
 	</script>
 </body>
 </html>
diff --git a/demo/picture/card.html b/demo/picture/card.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+	<link href="../public/css/islider.css" rel="stylesheet">
 	<style>
 		body {
 			margin: 0;

diff --git a/demo/picture/default.html b/demo/picture/default.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport"
           content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+    <link href="../public/css/islider.css" rel="stylesheet">
     <style>
         body {
             margin: 0;

diff --git a/demo/picture/picture_with_button.html b/demo/picture/picture_with_button.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+	<link href="../public/css/islider.css" rel="stylesheet">
 	<style>
 		body {
 			margin: 0;
@@ -48,8 +49,6 @@
 	<!-- Outer Canvas 外层画布 -->
 	<div id="iSlider-wrapper"></div>
 	<script src="../public/js/islider.js"></script>
-	<script src="../public/js/islider_plugin.js"></script>
-
 	<script>
 		var list = [
 			{
@@ -96,21 +95,9 @@
 			type: 'pic',
 		    data: list,
 		    dom: document.getElementById("iSlider-wrapper"),
-		    onslidechange: function(idx) {
-		    	islider.changeIndexBtn();
-		    }
+		    isLooping: true
 		});
-
-		var btnOpt = {
-			isLooping: false,
-			isVertical: false,
-			width: '3em',
-			height: '3em',
-			backgroundColor: '#777',
-			border: '2px solid #fff'
-		};
-
-		islider.renderBtn(btnOpt);
+		islider.addBtn();
 
 	</script>
 </body>

diff --git a/demo/picture/picture_with_dots.html b/demo/picture/picture_with_dots.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+	<link href="../public/css/islider.css" rel="stylesheet">
 	<style>
 		body {
 			margin: 0;
@@ -48,7 +49,6 @@
 	<!-- Outer Canvas 外层画布 -->
 	<div id="iSlider-wrapper"></div>
 	<script src="../public/js/islider.js"></script>
-	<script type="text/javascript" src="../public/js/islider_plugin.js"></script>
 	<script>
 		var list = [
 			{
@@ -96,20 +96,9 @@
 		    data: list,
 		    dom: document.getElementById("iSlider-wrapper"),
 		    isLooping: true,
-		    onslidechange: function(idx) {
-		    	islider.changeIndexDot();
-		    }
 		};
 		var	islider = new iSlider(opts);
-
-		var dotOpt = {
-			top: ' ',
-			width: '80%',
-			diameter: '0.8em',
-			borderColor: '#fff',
-		};
-
-		islider.renderDot(dotOpt);
+		islider.addDot();
 
 	</script>
 </body>

diff --git a/demo/picture/zoom.html b/demo/picture/zoom.html
@@ -2,8 +2,8 @@
 <html lang="zh-CN">
 <head>
     <meta charset="utf-8"/>
-    <meta name="viewport"
-          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
+    <link href="../public/css/islider.css" rel="stylesheet">
     <style>
         body {
             margin: 0;

diff --git a/demo/public/js/islider.js b/demo/public/js/islider.js
@@ -959,11 +959,6 @@ plugins_islider_button = function (iSlider) {
             var dir = parseInt(this.getAttribute('dir'));
             self.slideTo(self.slideIndex + dir);
           });
-          if (!this.isLooping) {
-            if (this.slideIndex === 0) {
-              btnOuter[0].style.display = 'none';
-            }
-          }
           btnOuter[i].appendChild(btnInner[i]);
           this.wrap.appendChild(btnOuter[i], this.wrap.nextSibling);
         }

diff --git a/demo/public/js/islider_animate.js b/demo/public/js/islider_animate.js