Skip to content

Commit

Permalink
fix stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
jmartsch committed Jun 7, 2021
1 parent 19ad0ef commit 06806b8
Show file tree
Hide file tree
Showing 10 changed files with 842 additions and 565 deletions.
39 changes: 23 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,30 +56,36 @@ npm install lazyframe-advanced

### Import

JavaScript ES6 imports
JavaScript ES6 import

```js
import lazyframe from 'lazyframe-advanced';
import 'lazyframe-advanced/style.css'
import 'lazyframe-advanced/lazyframe.css'
```

Include the library directly. Currently does not work because there is no minified standalone version.
[comment]: <> (Include the library directly. Currently does not work because there is no minified standalone version. )

```html
<script src="dist/lazyframe.min.js"></script>
```
[comment]: <> (```html)

Sass import
[comment]: <> (<script src="dist/lazyframe.min.js"></script>)

```sass
@import 'src/scss/lazyframe';
```
[comment]: <> (```)

Include CSS in HTML
[comment]: <> (Sass import)

```html
<link rel="stylesheet" href="dist/style.css">
```
[comment]: <> (```sass)

[comment]: <> (@import 'src/scss/lazyframe';)

[comment]: <> (```)

[comment]: <> (Include CSS in HTML)

[comment]: <> (```html)

[comment]: <> (<link rel="stylesheet" href="dist/lazyframe.css">)

[comment]: <> (```)

### Initialize

Expand All @@ -105,7 +111,7 @@ General options and corresponding defaults
```js
lazyframe(elements, {
apikey: enterYourApiKeyHere,
lazyload: true,
lazyload: false,
// Callbacks
onLoad: (lazyframe) => console.log(lazyframe),
onAppend: (iframe) => console.log(iframe),
Expand All @@ -117,7 +123,7 @@ lazyframe(elements, {
| option name | default value | description |
|---|---|---|
| apikey | string: empty | If you want to load a thumbnail and title for a YouTube video you'll have to have an API key with the YouTube data API library enabled. Get it from [here](https://console.developers.google.com/). _If you don't feel like getting a key, just use your own thumbnail and title in data-thumbnail and data-title attribute_
| lazyload | boolean: true | Set this to `false` if you want all API calls and local images to be loaded on page load (instead of when the element is in view).
| lazyload | boolean: false | This setting does not work right now. Set this to `false` if you want all API calls and local images to be loaded on page load (instead of when the element is in view).
| onLoad | function: empty | Callback function for when a element is initialized.
| onAppend | function: empty | Callback function for when the iframe is appended to DOM.
| onThumbnailLoad | function: empty | Callback function with the thumbnail URL.
Expand Down Expand Up @@ -149,6 +155,7 @@ Use these attributes on your HTML element like this:
| data-initinview | boolean: true | Set this to true if you want the resource to execute (for example video to play) when the element is in view.

## Changelog
* v1.2.3 set lazyload to false, as IntersectionObserver is not working yet
* v1.2.0 release on npm, moved to vitejs from webpack
* v1.1.901 betterify example page
* v1.1.9 remove gulp and rollup and use webpack instead
Expand Down
2 changes: 1 addition & 1 deletion dist/lazyframe-advanced.es.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 06806b8

Please sign in to comment.