Skip to content

Commit

Permalink
Merge pull request #190 from xieyu33333/master
Browse files Browse the repository at this point in the history 
do not need to add image size in data
  • Loading branch information
@xieyu33333
xieyu33333 committed Mar 14, 2015
2 parents c70bbf5 + 7138ca2 commit 4a14dff
Show file tree
Hide file tree
Showing 12 changed files with 171 additions and 254 deletions.
26 changes: 5 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 :
Expand Down Expand Up @@ -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>'
}];
````
Expand Down Expand Up @@ -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>
Expand Down
26 changes: 5 additions & 21 deletions README_Chinese.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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代码如下:
Expand Down Expand Up @@ -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>'
}];
```
Expand Down Expand Up @@ -126,8 +112,6 @@ var data = [{
<td>若是图片数据，格式如下:
<pre>
[{
height: 377,
width: 600,
content:"pics/1.jpg"
}]
</pre>
Expand Down
28 changes: 23 additions & 5 deletions build/islider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 };
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
};
Expand Down
28 changes: 23 additions & 5 deletions build/islider_core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 };
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
};
Expand Down
42 changes: 8 additions & 34 deletions demo/picture/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
47 changes: 9 additions & 38 deletions demo/picture/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,44 +56,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({
Expand Down
47 changes: 9 additions & 38 deletions demo/picture/picture_with_button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Loading

0 comments on commit 4a14dff

Please sign in to comment.