Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

do not need to add image size in data #190

Merged
merged 3 commits into from
Mar 14, 2015
Merged

do not need to add image size in data #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
031660a
修改loader, 无需传入height&width
xieyu33333 Mar 9, 2015
b2cd1fa
update readme&demo
xieyu33333 Mar 14, 2015
7138ca2
Merge branch 'develop'
xieyu33333 Mar 14, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 5 additions & 21 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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