https://github.com/cuth/dynamic-size-images
Change image src or background image path based on the size of the element
https://github.com/cuth/dynamic-size-images
Last synced: 7 months ago
JSON representation
Change image src or background image path based on the size of the element
- Host: GitHub
- URL: https://github.com/cuth/dynamic-size-images
- Owner: cuth
- Created: 2014-04-24T14:04:25.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-06-04T04:32:47.000Z (about 12 years ago)
- Last Synced: 2024-12-28T06:20:22.051Z (over 1 year ago)
- Language: JavaScript
- Size: 227 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Dynamic Size Images
===================
Use the size of the element to assign images from paths in attributes. This requires jQuery. Assign in javascript the attributes that will be used for each element width or height.
```javascript
new DynamicSizeImages('.selector', [
{
attrName: 'data-src-small',
size: 200
},
{
attrName: 'data-src-medium',
size: 350
},
{
attrName: 'data-src-large',
size: 500
},
{
attrName: 'data-src-xlarge'
}
], {
measure: 'width', // either 'width' or 'height'
operator: '<=', // '<', '>', '<=', or '>='
debounceTime: 150, // time it waits after browser resize
checkOnWinLoad: false // measure sizes after window onload
});
```
Helpful CSS
```css
img {
visibility: hidden;
}
img[src] {
visibility: visible;
}
```
jQuery Plugin
-------------
For extra convenience use this as a jQuery plugin. The plugin method returns a DynamicSizeImages instance rather than a jQuery object (chaining is not supported).
```js
var profile = $('.selector').DynamicSizeImages([
{
attrName: 'data-src-large',
size: 500
},
{
attrName: 'data-src-xlarge'
}
]);
```