https://github.com/vedsmith92/image-wall
https://github.com/vedsmith92/image-wall
image-gallery jquery
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vedsmith92/image-wall
- Owner: vedsmith92
- License: mit
- Created: 2016-09-16T12:25:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-17T01:27:08.000Z (over 9 years ago)
- Last Synced: 2025-09-11T13:28:29.401Z (3 months ago)
- Topics: image-gallery, jquery
- Language: JavaScript
- Size: 129 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# image-wall
Turn this:
Into this:
## Example
[See demo here](https://rawgit.com/vedsmith92/image-wall/master/test/index.html)
## About Image-Wall
0. Require jQuery >= 1.12.4
0. Sequentially image order.
0. Auto re-render when window resize (full responsive) or image loaded.
0. Support any/custom data attributes.
0. Support CSS (with media queries).
## Getting started
### Installation
Bower
```
$ bower install image-wall
```
### Usage
Include files:
```
```
Call Method:
```
$(function() {
$('.image-wall').imageWall();
});
```
HTML:
```
...
```
Example CSS Styles:
```
body {
margin: 0;
padding: 0;
background-color: #000;
}
.image-wall .row {
height: 200px;
}
.image-wall, .image-wall .row .column {
padding: 8px;
}
.image-wall .row a {
border-radius: 2px;
background-color: #111;
}
.image-wall .row a:hover {
opacity: 0.5;
}
@media (max-width: 1024px) {
.image-wall, .image-wall .row .column {
padding: 4px;
}
.image-wall .row {
height: 100px;
}
}
```
### Methods
Call this to re-render the wall:
```
$('.image-wall').imageWall();
```
## Browser support
- Chrome 53+
- Firefox 48+
- Internet Explorer 11+
- Edge 14+
- Opera 10+
- Safari 9.1+
As a jQuery plugin, you also need to see the jQuery Browser Support.
## License
[MIT](http://opensource.org/licenses/MIT) © [Ved Smithiprechawongse](https://github.com/vedsmith92)