From 031660abe24299388844e64fd5acbc019a67ca9b Mon Sep 17 00:00:00 2001
From: xieyu33333 <xieyu33333@gmail.com>
Date: Tue, 10 Mar 2015 00:27:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9loader,=20=E6=97=A0?=
 =?UTF-8?q?=E9=9C=80=E4=BC=A0=E5=85=A5height&width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/islider.js               | 28 +++++++++--
 build/islider_core.js          | 28 +++++++++--
 demo/picture/default.html      | 87 +++++++++++++++++++---------------
 demo/public/js/islider.js      | 28 +++++++++--
 demo/public/js/islider_core.js | 28 +++++++++--
 src/islider_core.js            | 31 +++++++++---
 6 files changed, 166 insertions(+), 64 deletions(-)

diff --git a/build/islider.js b/build/islider.js
index 47161d18..526fb500 100644
--- a/build/islider.js
+++ b/build/islider.js
@@ -44,9 +44,9 @@ iSlider = function () {
     this.isOverspread = opts.isOverspread || false;
     // Play time gap
     this.duration = opts.duration || 2000;
-    // start from initIndex or 0 
+    // start from initIndex or 0
     this.initIndex = opts.initIndex || 0;
-    // touchstart prevent default to fixPage 
+    // touchstart prevent default to fixPage
     this.fixPage = opts.fixPage || true;
     if (this.initIndex > this.data.length - 1 || this.initIndex < 0) {
       this.initIndex = 0;
@@ -151,6 +151,11 @@ iSlider = function () {
     var item;
     var html;
     var len = this.data.length;
+    var self = this;
+    var insertImg = function () {
+      html = item.height / item.width > self.ratio ? '<img height="' + self.height + '" src="' + item.content + '">' : '<img width="' + self.width + '" src="' + item.content + '">';
+      el.innerHTML = html;
+    };
     // get the right item of data
     if (!this.isLooping) {
       item = this.data[i] || { empty: true };
@@ -170,15 +175,24 @@ iSlider = function () {
     }
     if (this.type === 'pic') {
       if (!this.isOverspread) {
-        html = item.height / item.width > this.ratio ? '<img height="' + this.height + '" src="' + item.content + '">' : '<img width="' + this.width + '" src="' + item.content + '">';
+        if (item.height & item.width) {
+          insertImg();
+        } else {
+          var currentImg = new Image();
+          currentImg.src = item.content;
+          currentImg.onload = function () {
+            item.height = currentImg.height;
+            item.width = currentImg.width;
+            insertImg();
+          };
+        }
       } else {
         el.style.background = 'url(' + item.content + ') 50% 50% no-repeat';
         el.style.backgroundSize = 'cover';
       }
     } else if (this.type === 'dom') {
-      html = item.content;
+      el.innerHTML = item.content;
     }
-    html && (el.innerHTML = html);
   };
   /**
    * render list html
@@ -223,6 +237,10 @@ iSlider = function () {
       if (!self.data[index].loaded) {
         var preloadImg = new Image();
         preloadImg.src = self.data[index].content;
+        preloadImg.onload = function () {
+          self.data[index].width = preloadImg.width;
+          self.data[index].height = preloadImg.height;
+        };
         self.data[index].loaded = 1;
       }
     };
diff --git a/build/islider_core.js b/build/islider_core.js
index fa4ff45e..cb7ded4f 100644
--- a/build/islider_core.js
+++ b/build/islider_core.js
@@ -44,9 +44,9 @@ iSlider = function () {
     this.isOverspread = opts.isOverspread || false;
     // Play time gap
     this.duration = opts.duration || 2000;
-    // start from initIndex or 0 
+    // start from initIndex or 0
     this.initIndex = opts.initIndex || 0;
-    // touchstart prevent default to fixPage 
+    // touchstart prevent default to fixPage
     this.fixPage = opts.fixPage || true;
     if (this.initIndex > this.data.length - 1 || this.initIndex < 0) {
       this.initIndex = 0;
@@ -151,6 +151,11 @@ iSlider = function () {
     var item;
     var html;
     var len = this.data.length;
+    var self = this;
+    var insertImg = function () {
+      html = item.height / item.width > self.ratio ? '<img height="' + self.height + '" src="' + item.content + '">' : '<img width="' + self.width + '" src="' + item.content + '">';
+      el.innerHTML = html;
+    };
     // get the right item of data
     if (!this.isLooping) {
       item = this.data[i] || { empty: true };
@@ -170,15 +175,24 @@ iSlider = function () {
     }
     if (this.type === 'pic') {
       if (!this.isOverspread) {
-        html = item.height / item.width > this.ratio ? '<img height="' + this.height + '" src="' + item.content + '">' : '<img width="' + this.width + '" src="' + item.content + '">';
+        if (item.height & item.width) {
+          insertImg();
+        } else {
+          var currentImg = new Image();
+          currentImg.src = item.content;
+          currentImg.onload = function () {
+            item.height = currentImg.height;
+            item.width = currentImg.width;
+            insertImg();
+          };
+        }
       } else {
         el.style.background = 'url(' + item.content + ') 50% 50% no-repeat';
         el.style.backgroundSize = 'cover';
       }
     } else if (this.type === 'dom') {
-      html = item.content;
+      el.innerHTML = item.content;
     }
-    html && (el.innerHTML = html);
   };
   /**
    * render list html
@@ -223,6 +237,10 @@ iSlider = function () {
       if (!self.data[index].loaded) {
         var preloadImg = new Image();
         preloadImg.src = self.data[index].content;
+        preloadImg.onload = function () {
+          self.data[index].width = preloadImg.width;
+          self.data[index].height = preloadImg.height;
+        };
         self.data[index].loaded = 1;
       }
     };
diff --git a/demo/picture/default.html b/demo/picture/default.html
index c3f8d5bf..866ce4c4 100755
--- a/demo/picture/default.html
+++ b/demo/picture/default.html
@@ -56,46 +56,57 @@
 
 <script>
     var list = [
-        {
-            height: 475,
-            width: 400,
-            content: "./imgs/random/1.jpg",
-        }, {
-            height: 527,
-            width: 400,
-            content: "./imgs/random/2.jpg",
-        }, {
-            height: 800,
-            width: 536,
-            content: "./imgs/random/3.jpg",
-        }, {
-            height: 400,
-            width: 512,
-            content: "./imgs/random/4.jpg"
-        }, {
-            height: 400,
-            width: 458,
-            content: "./imgs/random/5.jpg"
-        }, {
-            height: 400,
-            width: 498,
-            content: "./imgs/random/6.jpg"
-        }, {
-            height: 377,
-            width: 600,
-            content: "./imgs/random/7.jpg"
-        }, {
-            height: 396,
-            width: 600,
-            content: "./imgs/random/8.jpg"
-        },
-        {
-            height: 374,
-            width: 600,
-            content: "./imgs/random/9.jpg"
-        },
+        { content: "./imgs/random/1.jpg"}, 
+        { content: "./imgs/random/2.jpg"}, 
+        {content: "./imgs/random/3.jpg"}, 
+        {content: "./imgs/random/4.jpg"}, 
+        {content: "./imgs/random/5.jpg" }, 
+        {content: "./imgs/random/6.jpg"}, 
+        {content: "./imgs/random/7.jpg"}, 
+        {content: "./imgs/random/8.jpg"},
+        {content: "./imgs/random/9.jpg"},
     ];
 
+    // var list = [
+    //     {
+    //         height: 475,
+    //         width: 400,
+    //         content: "./imgs/random/1.jpg",
+    //     }, {
+    //         height: 527,
+    //         width: 400,
+    //         content: "./imgs/random/2.jpg",
+    //     }, {
+    //         height: 800,
+    //         width: 536,
+    //         content: "./imgs/random/3.jpg",
+    //     }, {
+    //         height: 400,
+    //         width: 512,
+    //         content: "./imgs/random/4.jpg"
+    //     }, {
+    //         height: 400,
+    //         width: 458,
+    //         content: "./imgs/random/5.jpg"
+    //     }, {
+    //         height: 400,
+    //         width: 498,
+    //         content: "./imgs/random/6.jpg"
+    //     }, {
+    //         height: 377,
+    //         width: 600,
+    //         content: "./imgs/random/7.jpg"
+    //     }, {
+    //         height: 396,
+    //         width: 600,
+    //         content: "./imgs/random/8.jpg"
+    //     },
+    //     {
+    //         height: 374,
+    //         width: 600,
+    //         content: "./imgs/random/9.jpg"
+    //     },
+    // ];
     var islider = new iSlider({
         type: 'pic',
         data: list,
diff --git a/demo/public/js/islider.js b/demo/public/js/islider.js
index 47161d18..526fb500 100644
--- a/demo/public/js/islider.js
+++ b/demo/public/js/islider.js
@@ -44,9 +44,9 @@ iSlider = function () {
     this.isOverspread = opts.isOverspread || false;
     // Play time gap
     this.duration = opts.duration || 2000;
-    // start from initIndex or 0 
+    // start from initIndex or 0
     this.initIndex = opts.initIndex || 0;
-    // touchstart prevent default to fixPage 
+    // touchstart prevent default to fixPage
     this.fixPage = opts.fixPage || true;
     if (this.initIndex > this.data.length - 1 || this.initIndex < 0) {
       this.initIndex = 0;
@@ -151,6 +151,11 @@ iSlider = function () {
     var item;
     var html;
     var len = this.data.length;
+    var self = this;
+    var insertImg = function () {
+      html = item.height / item.width > self.ratio ? '<img height="' + self.height + '" src="' + item.content + '">' : '<img width="' + self.width + '" src="' + item.content + '">';
+      el.innerHTML = html;
+    };
     // get the right item of data
     if (!this.isLooping) {
       item = this.data[i] || { empty: true };
@@ -170,15 +175,24 @@ iSlider = function () {
     }
     if (this.type === 'pic') {
       if (!this.isOverspread) {
-        html = item.height / item.width > this.ratio ? '<img height="' + this.height + '" src="' + item.content + '">' : '<img width="' + this.width + '" src="' + item.content + '">';
+        if (item.height & item.width) {
+          insertImg();
+        } else {
+          var currentImg = new Image();
+          currentImg.src = item.content;
+          currentImg.onload = function () {
+            item.height = currentImg.height;
+            item.width = currentImg.width;
+            insertImg();
+          };
+        }
       } else {
         el.style.background = 'url(' + item.content + ') 50% 50% no-repeat';
         el.style.backgroundSize = 'cover';
       }
     } else if (this.type === 'dom') {
-      html = item.content;
+      el.innerHTML = item.content;
     }
-    html && (el.innerHTML = html);
   };
   /**
    * render list html
@@ -223,6 +237,10 @@ iSlider = function () {
       if (!self.data[index].loaded) {
         var preloadImg = new Image();
         preloadImg.src = self.data[index].content;
+        preloadImg.onload = function () {
+          self.data[index].width = preloadImg.width;
+          self.data[index].height = preloadImg.height;
+        };
         self.data[index].loaded = 1;
       }
     };
diff --git a/demo/public/js/islider_core.js b/demo/public/js/islider_core.js
index fa4ff45e..cb7ded4f 100644
--- a/demo/public/js/islider_core.js
+++ b/demo/public/js/islider_core.js
@@ -44,9 +44,9 @@ iSlider = function () {
     this.isOverspread = opts.isOverspread || false;
     // Play time gap
     this.duration = opts.duration || 2000;
-    // start from initIndex or 0 
+    // start from initIndex or 0
     this.initIndex = opts.initIndex || 0;
-    // touchstart prevent default to fixPage 
+    // touchstart prevent default to fixPage
     this.fixPage = opts.fixPage || true;
     if (this.initIndex > this.data.length - 1 || this.initIndex < 0) {
       this.initIndex = 0;
@@ -151,6 +151,11 @@ iSlider = function () {
     var item;
     var html;
     var len = this.data.length;
+    var self = this;
+    var insertImg = function () {
+      html = item.height / item.width > self.ratio ? '<img height="' + self.height + '" src="' + item.content + '">' : '<img width="' + self.width + '" src="' + item.content + '">';
+      el.innerHTML = html;
+    };
     // get the right item of data
     if (!this.isLooping) {
       item = this.data[i] || { empty: true };
@@ -170,15 +175,24 @@ iSlider = function () {
     }
     if (this.type === 'pic') {
       if (!this.isOverspread) {
-        html = item.height / item.width > this.ratio ? '<img height="' + this.height + '" src="' + item.content + '">' : '<img width="' + this.width + '" src="' + item.content + '">';
+        if (item.height & item.width) {
+          insertImg();
+        } else {
+          var currentImg = new Image();
+          currentImg.src = item.content;
+          currentImg.onload = function () {
+            item.height = currentImg.height;
+            item.width = currentImg.width;
+            insertImg();
+          };
+        }
       } else {
         el.style.background = 'url(' + item.content + ') 50% 50% no-repeat';
         el.style.backgroundSize = 'cover';
       }
     } else if (this.type === 'dom') {
-      html = item.content;
+      el.innerHTML = item.content;
     }
-    html && (el.innerHTML = html);
   };
   /**
    * render list html
@@ -223,6 +237,10 @@ iSlider = function () {
       if (!self.data[index].loaded) {
         var preloadImg = new Image();
         preloadImg.src = self.data[index].content;
+        preloadImg.onload = function () {
+          self.data[index].width = preloadImg.width;
+          self.data[index].height = preloadImg.height;
+        };
         self.data[index].loaded = 1;
       }
     };
diff --git a/src/islider_core.js b/src/islider_core.js
index 00e82826..f5685a48 100755
--- a/src/islider_core.js
+++ b/src/islider_core.js
@@ -167,6 +167,14 @@ define('iSlider', [], function () {
         var item;
         var html;
         var len = this.data.length;
+        var self = this;
+
+        var insertImg = function () {
+            html = item.height / item.width > self.ratio
+            ? '<img height="' + self.height + '" src="' + item.content + '">'
+            : '<img width="' + self.width + '" src="' + item.content + '">';
+            el.innerHTML = html;
+        };
 
         // get the right item of data
         if (!this.isLooping) {
@@ -189,18 +197,24 @@ define('iSlider', [], function () {
 
         if (this.type === 'pic') {
             if (!this.isOverspread) {
-                html = item.height / item.width > this.ratio
-                ? '<img height="' + this.height + '" src="' + item.content + '">'
-                : '<img width="' + this.width + '" src="' + item.content + '">';
+                if (item.height & item.width) {
+                    insertImg();
+                } else {
+                    var currentImg = new Image();
+                    currentImg.src = item.content;
+                    currentImg.onload = function () {
+                        item.height = currentImg.height;
+                        item.width = currentImg.width;
+                        insertImg();
+                    };
+                }
             } else {
                 el.style.background = 'url(' + item.content + ') 50% 50% no-repeat';
                 el.style.backgroundSize = 'cover';
             }
         } else if (this.type === 'dom') {
-            html = item.content;
+            el.innerHTML = item.content;
         }
-
-        html && (el.innerHTML = html);
     };
 
     /**
@@ -252,9 +266,14 @@ define('iSlider', [], function () {
             if (!self.data[index].loaded) {
                 var preloadImg = new Image();
                 preloadImg.src = self.data[index].content;
+                preloadImg.onload = function () {
+                    self.data[index].width = preloadImg.width;
+                    self.data[index].height = preloadImg.height;
+                };
                 self.data[index].loaded = 1;
             }
         };
+
         if (self.type !== 'dom') {
             var nextIndex = (idx + 2 > len - 1) ? ((idx + 2) % len) : (idx + 2);
             var prevIndex = (idx - 2 < 0) ? (len - 2 + idx) : (idx - 2);

From b2cd1fa7f096b59b901bd25e5e4ae0d61c1221d9 Mon Sep 17 00:00:00 2001
From: xieyu33333 <xieyu33333@gmail.com>
Date: Sat, 14 Mar 2015 23:46:53 +0800
Subject: [PATCH 2/2] update readme&demo

---
 README.md                             | 26 +++------------
 README_Chinese.md                     | 26 +++------------
 demo/picture/card.html                | 42 +++++-------------------
 demo/picture/default.html             | 46 ++------------------------
 demo/picture/picture_with_button.html | 47 +++++----------------------
 demo/picture/picture_with_dots.html   | 47 +++++----------------------
 demo/picture/zoom.html                | 47 +++++----------------------
 7 files changed, 48 insertions(+), 233 deletions(-)

diff --git a/README.md b/README.md
index 200c1450..69562d19 100755
--- a/README.md
+++ b/README.md
@@ -30,19 +30,11 @@ The best way to learn the iSlider is by looking at the demos. In the archive you
 Before you start, you need to prepare some data for iSlider:
 
 ````
-var data = [{
-	height: 414,
-	width: 300,
-	content: "imgs/1.jpg",
-},{
-	height: 414,
-	width: 300,
-	content: "imgs/2.jpg",
-},{
- 	height: 414,
-	width: 300,
- 	content: "imgs/3.jpg",
-}];
+var data = [
+{content: "imgs/1.jpg"},
+{content: "imgs/2.jpg"},
+{content: "imgs/3.jpg"}
+];
 ````
 
 HTML structure you only need to prepare is :
@@ -80,16 +72,10 @@ Besides the basic ways you can do with iSlider, you can customized the features
 
 ````
 var data = [{
-	'height' : '100%',
-	'width' : '100%',
 	'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
 },{
-	'height' : '100%',
-	'width' : '100%',
 	'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
 },{
-	'height' : '100%',
-	'width' : '100%',
 	'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
 }];
 ````
@@ -132,8 +118,6 @@ Here provides a clear description of what options you are able to manipulate:
 		<td>Picture data, for example:
 		<pre>
 [{
-	height: 377,
-	width: 600,
 	content:"pics/1.jpg"
 }]
 		</pre>
diff --git a/README_Chinese.md b/README_Chinese.md
index ae95f3dc..f2925804 100755
--- a/README_Chinese.md
+++ b/README_Chinese.md
@@ -26,19 +26,11 @@ iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑
 使用iSlider只需要准备好数据即可，无论是本地数据还是从接口获取的数据，例如：
 
 ``` javascript
-var data = [{
-	height: 414,
-	width: 300,
-	content: "imgs/1.jpg",
-},{
-	height: 414,
-	width: 300,
-	content: "imgs/2.jpg",
-},{
- 	height: 414,
-	width: 300,
- 	content: "imgs/3.jpg",
-}];
+var data = [
+{content: "imgs/1.jpg"},
+{content: "imgs/2.jpg"},
+{content: "imgs/3.jpg"}
+];
 ```
 
 HTML代码如下:
@@ -76,16 +68,10 @@ That's it.
 
 ``` javascript
 var data = [{
-	'height' : '100%',
-	'width' : '100%',
 	'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
 },{
-	'height' : '100%',
-	'width' : '100%',
 	'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
 },{
-	'height' : '100%',
-	'width' : '100%',
 	'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
 }];
 ```
@@ -126,8 +112,6 @@ var data = [{
 		<td>若是图片数据，格式如下:
 		<pre>
 [{
-	height: 377,
-	width: 600,
 	content:"pics/1.jpg"
 }]
 		</pre>
diff --git a/demo/picture/card.html b/demo/picture/card.html
index f8986cef..dcad3105 100755
--- a/demo/picture/card.html
+++ b/demo/picture/card.html
@@ -127,40 +127,14 @@
 
 	<script>
 		var list = [
-			{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/1.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/2.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/3.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/4.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/5.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/6.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/7.jpg",
-			},{
-				height: 2000,
-				width: 1333,
-				content: "./imgs/card/8.jpg",
-			}
-			];
+			{content: "./imgs/card/1.jpg"},
+			{content: "./imgs/card/2.jpg"},
+			{content: "./imgs/card/3.jpg"},
+			{content: "./imgs/card/4.jpg"},
+			{content: "./imgs/card/5.jpg"},
+			{content: "./imgs/card/6.jpg"},
+			{content: "./imgs/card/7.jpg"},
+			{content: "./imgs/card/8.jpg"}];
 		
 		var	islider = new iSlider({
 			type: 'pic',
diff --git a/demo/picture/default.html b/demo/picture/default.html
index 866ce4c4..cf00cc9d 100755
--- a/demo/picture/default.html
+++ b/demo/picture/default.html
@@ -56,57 +56,17 @@
 
 <script>
     var list = [
-        { content: "./imgs/random/1.jpg"}, 
-        { content: "./imgs/random/2.jpg"}, 
+        {content: "./imgs/random/1.jpg"}, 
+        {content: "./imgs/random/2.jpg"}, 
         {content: "./imgs/random/3.jpg"}, 
         {content: "./imgs/random/4.jpg"}, 
-        {content: "./imgs/random/5.jpg" }, 
+        {content: "./imgs/random/5.jpg"}, 
         {content: "./imgs/random/6.jpg"}, 
         {content: "./imgs/random/7.jpg"}, 
         {content: "./imgs/random/8.jpg"},
         {content: "./imgs/random/9.jpg"},
     ];
 
-    // var list = [
-    //     {
-    //         height: 475,
-    //         width: 400,
-    //         content: "./imgs/random/1.jpg",
-    //     }, {
-    //         height: 527,
-    //         width: 400,
-    //         content: "./imgs/random/2.jpg",
-    //     }, {
-    //         height: 800,
-    //         width: 536,
-    //         content: "./imgs/random/3.jpg",
-    //     }, {
-    //         height: 400,
-    //         width: 512,
-    //         content: "./imgs/random/4.jpg"
-    //     }, {
-    //         height: 400,
-    //         width: 458,
-    //         content: "./imgs/random/5.jpg"
-    //     }, {
-    //         height: 400,
-    //         width: 498,
-    //         content: "./imgs/random/6.jpg"
-    //     }, {
-    //         height: 377,
-    //         width: 600,
-    //         content: "./imgs/random/7.jpg"
-    //     }, {
-    //         height: 396,
-    //         width: 600,
-    //         content: "./imgs/random/8.jpg"
-    //     },
-    //     {
-    //         height: 374,
-    //         width: 600,
-    //         content: "./imgs/random/9.jpg"
-    //     },
-    // ];
     var islider = new iSlider({
         type: 'pic',
         data: list,
diff --git a/demo/picture/picture_with_button.html b/demo/picture/picture_with_button.html
index 6c231b9a..12a9b02b 100755
--- a/demo/picture/picture_with_button.html
+++ b/demo/picture/picture_with_button.html
@@ -51,44 +51,15 @@
 	<script src="../public/js/islider.js"></script>
 	<script>
 		var list = [
-			{
-				height: 414,
-				width: 300,
-				content: "./imgs/high/1.jpg",
-			},{
-				height: 414,
-				width: 300,
-				content: "./imgs/high/2.jpg",
-			},{
-			 	height: 414,
-				width: 300,
-			 	content: "./imgs/high/3.jpg",
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/high/4.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/high/5.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/high/6.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/high/7.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/high/8.jpg"
-			},
-			{
-				height: 414,
-				width: 300,
-				content:"./imgs/high/9.jpg"
-			},
+			{content: "./imgs/high/1.jpg"},
+			{content: "./imgs/high/2.jpg"},
+			{content: "./imgs/high/3.jpg"},
+			{content: "./imgs/high/4.jpg"},
+			{content: "./imgs/high/5.jpg"},
+			{content: "./imgs/high/6.jpg"},
+			{content: "./imgs/high/7.jpg"},
+			{content: "./imgs/high/8.jpg"},
+			{content: "./imgs/high/9.jpg"}
 			];
 				
 		var	islider = new iSlider({
diff --git a/demo/picture/picture_with_dots.html b/demo/picture/picture_with_dots.html
index 6d60c934..d3620b04 100755
--- a/demo/picture/picture_with_dots.html
+++ b/demo/picture/picture_with_dots.html
@@ -51,44 +51,15 @@
 	<script src="../public/js/islider.js"></script>
 	<script>
 		var list = [
-			{
-				height: 414,
-				width: 300,
-				content: "./imgs/long/1.jpg",
-			},{
-				height: 414,
-				width: 300,
-				content: "./imgs/long/2.jpg",
-			},{
-			 	height: 414,
-				width: 300,
-			 	content: "./imgs/long/3.jpg",
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/long/4.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/long/5.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/long/6.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/long/7.jpg"
-			},{
-				height: 414,
-				width: 300,
-				content:"./imgs/long/8.jpg"
-			},
-			{
-				height: 414,
-				width: 300,
-				content:"./imgs/long/9.jpg"
-			},
+			{content: "./imgs/long/1.jpg"},
+			{content: "./imgs/long/2.jpg"},
+			{content: "./imgs/long/3.jpg"},
+			{content: "./imgs/long/4.jpg"},
+			{content: "./imgs/long/5.jpg"},
+			{content: "./imgs/long/6.jpg"},
+			{content: "./imgs/long/7.jpg"},
+			{content: "./imgs/long/8.jpg"},
+			{content: "./imgs/long/9.jpg"},
 			];
 		
 		var opts = {
diff --git a/demo/picture/zoom.html b/demo/picture/zoom.html
index 41c118db..95a18f68 100644
--- a/demo/picture/zoom.html
+++ b/demo/picture/zoom.html
@@ -55,44 +55,15 @@
 
 <script>
     var list = [
-        {
-            height: 475,
-            width: 400,
-            content: "./imgs/random/1.jpg",
-        }, {
-            height: 527,
-            width: 400,
-            content: "./imgs/random/2.jpg",
-        }, {
-            height: 800,
-            width: 536,
-            content: "./imgs/random/3.jpg",
-        }, {
-            height: 400,
-            width: 512,
-            content: "./imgs/random/4.jpg"
-        }, {
-            height: 400,
-            width: 458,
-            content: "./imgs/random/5.jpg"
-        }, {
-            height: 400,
-            width: 498,
-            content: "./imgs/random/6.jpg"
-        }, {
-            height: 377,
-            width: 600,
-            content: "./imgs/random/7.jpg"
-        }, {
-            height: 396,
-            width: 600,
-            content: "./imgs/random/8.jpg"
-        },
-        {
-            height: 374,
-            width: 600,
-            content: "./imgs/random/9.jpg"
-        },
+        {content: "./imgs/random/1.jpg"}, 
+        {content: "./imgs/random/2.jpg"}, 
+        {content: "./imgs/random/3.jpg"}, 
+        {content: "./imgs/random/4.jpg"}, 
+        {content: "./imgs/random/5.jpg"}, 
+        {content: "./imgs/random/6.jpg"}, 
+        {content: "./imgs/random/7.jpg"}, 
+        {content: "./imgs/random/8.jpg"},
+        {content: "./imgs/random/9.jpg"}
     ];
 
     var islider = new iSlider({