https://github.com/zicht/jquery.fullsize-element
Library - jQuery - Render images as a fullsize element
https://github.com/zicht/jquery.fullsize-element
Last synced: 11 months ago
JSON representation
Library - jQuery - Render images as a fullsize element
- Host: GitHub
- URL: https://github.com/zicht/jquery.fullsize-element
- Owner: zicht
- License: mit
- Created: 2016-10-20T06:50:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-04T10:44:11.000Z (over 8 years ago)
- Last Synced: 2025-03-17T05:32:47.203Z (about 1 year ago)
- Language: JavaScript
- Size: 13.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zicht Full Size Element
This is a plugin to create full size elements.
An element will size itself according to a provided viewport.
## Options
- fullWidth, boolean default to true,
- fullHeight: boolean default to true
- valign: string default to `center`. Possibilities `top`, `center` or `bottom`
- halign: string default to `center`. Possibilities `left`, `center` or `right`
The element where the plugin is applied to should have a data-viewport property. This is a css selector that is used
with the jQuery function [.closest()](http://api.jquery.com/closest/). When no viewport is defined the window object
will be used.
## Required CSS
### Import the included Sass file
Import the Sass file that's installed with this package into your project. It’s located at `~/scss/objects/_fullsize-element.scss`.
### Or, apply it manually
```css
img {
position: absolute;
visibility: hidden;
}
```
The image will be visible when finished preloading.
The viewport should have the following css:
```css
.viewport {
position: relative;
overflow: hidden;
}
```
## Usage
```javascript
jQuery(function ($) {
$('.js-fullsize-element').fullSizeElement();
});
```
# Maintainer
* Boudewijn Schoon