# jquery-postify

> A jquery plugin to load images after the main part of the page has been loaded

Latest version **0.9.5** (published 2019-09-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install jquery-postify
pnpm add jquery-postify
yarn add jquery-postify
bun add jquery-postify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.5 |
| Published | 2019-09-10 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marius Butz |
| Maintainers | mbpictures |
| Keywords | jquery, postify, images, image, load, postload, ajax, jquery-plugin |

## Links

- npm: https://www.npmjs.com/package/jquery-postify
- Repository: https://github.com/mbpictures/jquery-postify
- Homepage: https://github.com/mbpictures/jquery-postify#readme
- Issues: https://github.com/mbpictures/jquery-postify/issues
- npm.io page: https://npm.io/package/jquery-postify

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.9.5 (latest) — 2019-09-10
- 0.9.4 — 2019-08-19
- 0.9.3 — 2019-08-19
- 0.9.2 — 2019-08-19
- 0.9.1 — 2019-08-08
- 0.9.0 — 2019-08-05

## README

# jquery-postify
[![npm](https://img.shields.io/npm/v/jquery-postify?color=green)](https://www.npmjs.com/package/jquery-postify)

Postify is a jQuery plugin that allows you to load images after the main part of the page has been loaded. It works by some kind of AJAX calls and has several possibilties to customize. [Live Preview](http://projects.marius-butz.de/postify/)

## usage
The only thing you have to do is to create a new, empty div container with the tag ```data-postify``` which contains the url of the image. After that, simply call the ```postify()``` method and provide some options:
```JavaScript
$(document).ready(function() {
    $('div.postify').postify({...});
});
```

## options
* url (```undefined```): url to override the ```data-postify``` tag
* animation (```default: fade```): how should the images be shown up?
  * slideUp
  * slideDown
  * slideLeft
  * slideRight
  * fade
  * scale
  * flip
  * custom animation
* delay (```0```ms): wait some time to load images
* priority (```0```): Load images in a certain order
* showLoading (```true```): display loading animations while image is loading?
* loadingClass (```postify-loading```): which class has the surrounding container element?
* loadingElements (```<div></div><div></div><div></div><div></div>```): which elements should be added to use the css loading animation?
* adjustSize (```parent```): how should the size of image or parent be adjusted?
  * parent: adjust parent size to match image
  * cover: scale image to fill whole parent
  * auto: scale image to fit parent best so it won't get cut
  * childHeight: force image to scale by height, that it fits parent (width gets calculated automatically)
  * childWidth: force image to scale by width, that it fits parent (height gets calculated automatically)
  
## tips and tricks
If you have some problems with scaling when using ```adjustSize: 'parent'``` try to surround it with an additional div container and assign height and width to that, especially when working with bootstrap:
```HTML
<div class="col col-4">
	<div style="height: 400px; width: 100%;">
		<div class="postify postify-test1" data-postify="img/img-1.jpg"></div>
	</div>
</div>
```

## contribute
Feel free to add some new features, write issues or contact me in a way you prefer: [my website](http://marius-butz.de)

---
_Source: https://npm.io/package/jquery-postify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._