formstone

Version:

Library of modular front end components.

1 lines • 13.9 kB

JSON

{"main":["background.js","background.css"],"options":[{"name":"alt","type":"string","default":"''","description":"Image `alt` attribute"},{"name":"autoPlay","type":"boolean","default":"true","description":"Autoplay video"},{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"embedRatio","type":"number","default":"1.777777","description":"Video / embed ratio (16/9)"},{"name":"lazy","type":"boolean","default":"false","description":"Lazy load with scroll"},{"name":"lazyEdge","type":"int","default":"100","description":"Lazy load edge"},{"name":"loop","type":"boolean","default":"true","description":"Loop video"},{"name":"mute","type":"boolean","default":"true","description":"Mute video"},{"name":"source","type":"string OR object","default":"null","description":"Source image (string or object) or video (object)"}],"events":[{"name":"loaded.background","description":"Background media loaded"},{"name":"ready.background","description":"Background media ready"},{"name":"error.background","description":"Background media error"}],"methods":[{"name":"load","description":"Loads source media","params":[{"name":"source","type":"string OR object","description":"Source image (string or object) or video (object)"}],"examples":["$(\".target\").background(\"load\", \"path/to/image.jpg\");","$(\".target\").background(\"load\", { \"0px\": \"path/to/image-small.jpg\", \"980px\": \"path/to/image-large.jpg\" });","$(\".target\").background(\"load\", { \"poster\": \"path/to/image.jpg\", \"webm\": \"path/to/video.webm\", \"mp4\": \"path/to/video.mp4\", \"ogg\": \"path/to/video.ogv\" });"]},{"name":"mute","description":"Mutes target video","examples":["$(\".target\").background(\"mute\");"]},{"name":"pause","description":"Pauses target video","examples":["$(\".target\").background(\"pause\");"]},{"name":"play","description":"Plays target video","examples":["$(\".target\").background(\"play\");"]},{"name":"unload","description":"Unloads current media","examples":["$(\".target\").background(\"unload\");"]},{"name":"unmute","description":"Unmutes target video","examples":["$(\".target\").background(\"unmute\");"]}],"name":"Background","type":"widget","description":"A jQuery plugin for full-frame image and video backgrounds.","dependencies":["jQuery","core.js","transition.js"],"css":[{"name":".fs-background-element","type":"element","description":"Target elmement"},{"name":".fs-background","type":"element","description":"Base widget class"},{"name":".fs-background-container","type":"element","description":"Container element"},{"name":".fs-background-media","type":"element","description":"Media element"},{"name":".fs-background-media.fs-background-animated","type":"modifier","description":"Indicates animated state"},{"name":".fs-background-media.fs-background-navtive","type":"modifier","description":"Indicates native support"},{"name":".fs-background-media.fs-background-fixed","type":"modifier","description":"Indicates fixed positioning"},{"name":".fs-background-embed","type":"element","description":"Embed/iFrame element"},{"name":".fs-background-embed.fs-background-embed-ready","type":"modifier","description":"Indicates ready state"}],"use":"### Basic\n\nCreate a new Background by passing the source image URL at initialization:\n\n```javascript\n$(\".target\").background({\n source: \"http://example.com/image.jpg\"\n});\n```\n\n```markup\n<div class=\"target\">\n ...\n</div>\n```\n\nNote: You will need to push any content above the background elements by setting the z-index.\n\n### Responsive\n\nCreate a responsive-friendly Background by defining key/value pairs containing the `min-width` image URLs:\n\n\n```javascript\n$(\".target\").background({\n source: {\n \"0px\": \"http://example.com/image-small.jpg\",\n \"980px\": \"http://example.com/image-large.jpg\"\n }\n});\n```\n\n### HTML5 Video\n\nCreate a video Background by defining proper browser-specific source video URLs, as well as a poster image URL:\n\n```javascript\n$(\".target\").background({\n source: {\n poster: \"http://example.com/poster.jpg\",\n webm: \"http://example.com/video.webm\",\n mp4: \"http://example.com/video.mp4\",\n ogg: \"http://example.com/video.ogv\"\n }\n});\n```\n\nNote: Mobile browsers do not allow videos to auto play due to bandwidth concerns. Background will not attempt to load videos on mobile devices, instead the poster image will be displayed.\n\n\n","demo":"<h3>Basic</h3>\r\n\r\n\r\n\r\n<style>\r\n .background {\r\n width: 100%;\r\n\r\n background: #CFD8DC;\r\n margin: 0 0 20px;\r\n padding-top: 50%;\r\n }\r\n</style>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"background js-background\" data-background-options='{\"source\":\"https://spacehold.it/1600x900/1.jpg\",\"alt\":\"Background Image\"}'></div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class=\"background\"></div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".background\").background({\r\n source: \"http://example.com/image.jpg\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<h3>Responsive</h3>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"background js-background\" data-background-options='{\"source\":{\"0px\":\"https://spacehold.it/800x450/2.jpg\",\"980px\":\"https://spacehold.it/1600x900/2.jpg\"},\"alt\":\"Background Image\"}'></div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class=\"background\"></div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".background\").background({\r\n source: {\r\n \"0px\": \"http://example.com/image-small.jpg\",\r\n \"980px\": \"http://example.com/image-large.jpg\"\r\n }\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h3>Video</h3>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"background js-background\" data-background-options='{\"source\":{\"webm\":\"https://spacehold.it/video/video.webm\",\"mp4\":\"https://spacehold.it/video/video.mp4\",\"ogg\":\"https://spacehold.it/video/video.ogv\",\"poster\":\"https://spacehold.it/video/poster.jpg\"},\"alt\":\"Background Image\"}'></div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class=\"background\"></div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".background\").background({\r\n source: {\r\n poster: \"http://example.com/poster.jpg\",\r\n webm: \"http://example.com/video.webm\",\r\n mp4: \"http://example.com/video.mp4\",\r\n ogg: \"http://example.com/video.ogv\"\r\n }\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n\n\r\n<h4>Lazy Load</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"background js-background\" data-background-options='{\"source\":\"https://spacehold.it/1600x900/3.jpg\",\"lazy\":true,\"alt\":\"Background Image\"}'></div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class=\"background\"></div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".background\").background({\r\n lazy: true,\r\n source: \"http://example.com/image.jpg\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Background\n\nA jQuery plugin for full-frame image and video backgrounds.\n\n\n\n\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n\n\n\n\n<a name=\"use\"></a>\n\n## Using Background\n\n\n#### Main\n\n```markup\nbackground.js\nbackground.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\ntransition.js\n```\n\n### Basic\n\nCreate a new Background by passing the source image URL at initialization:\n\n```javascript\n$(\".target\").background({\n source: \"http://example.com/image.jpg\"\n});\n```\n\n```markup\n<div class=\"target\">\n ...\n</div>\n```\n\nNote: You will need to push any content above the background elements by setting the z-index.\n\n### Responsive\n\nCreate a responsive-friendly Background by defining key/value pairs containing the `min-width` image URLs:\n\n\n```javascript\n$(\".target\").background({\n source: {\n \"0px\": \"http://example.com/image-small.jpg\",\n \"980px\": \"http://example.com/image-large.jpg\"\n }\n});\n```\n\n### HTML5 Video\n\nCreate a video Background by defining proper browser-specific source video URLs, as well as a poster image URL:\n\n```javascript\n$(\".target\").background({\n source: {\n poster: \"http://example.com/poster.jpg\",\n webm: \"http://example.com/video.webm\",\n mp4: \"http://example.com/video.mp4\",\n ogg: \"http://example.com/video.ogv\"\n }\n});\n```\n\nNote: Mobile browsers do not allow videos to auto play due to bandwidth concerns. Background will not attempt to load videos on mobile devices, instead the poster image will be displayed.\n\n\n\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-background-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `alt` | `string` | `''` | Image `alt` attribute |\n| `autoPlay` | `boolean` | `true` | Autoplay video |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `embedRatio` | `number` | `1.777777` | Video / embed ratio (16/9) |\n| `lazy` | `boolean` | `false` | Lazy load with scroll |\n| `lazyEdge` | `int` | `100` | Lazy load edge |\n| `loop` | `boolean` | `true` | Loop video |\n| `mute` | `boolean` | `true` | Mute video |\n| `source` | `string OR object` | `null` | Source image (string or object) or video (object) |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `loaded.background` | Background media loaded |\n| `ready.background` | Background media ready |\n| `error.background` | Background media error |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### load\n\nLoads source media\n\n```javascript\n$(\".target\").background(\"load\", \"path/to/image.jpg\");\n```\n```javascript\n$(\".target\").background(\"load\", { \"0px\": \"path/to/image-small.jpg\", \"980px\": \"path/to/image-large.jpg\" });\n```\n```javascript\n$(\".target\").background(\"load\", { \"poster\": \"path/to/image.jpg\", \"webm\": \"path/to/video.webm\", \"mp4\": \"path/to/video.mp4\", \"ogg\": \"path/to/video.ogv\" });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `source` | `string OR object` |   | Source image (string or object) or video (object) |\n\n### mute\n\nMutes target video\n\n```javascript\n$(\".target\").background(\"mute\");\n```\n\n### pause\n\nPauses target video\n\n```javascript\n$(\".target\").background(\"pause\");\n```\n\n### play\n\nPlays target video\n\n```javascript\n$(\".target\").background(\"play\");\n```\n\n### unload\n\nUnloads current media\n\n```javascript\n$(\".target\").background(\"unload\");\n```\n\n### unmute\n\nUnmutes target video\n\n```javascript\n$(\".target\").background(\"unmute\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-background-element` | `element` | Target elmement |\n| `.fs-background` | `element` | Base widget class |\n| `.fs-background-container` | `element` | Container element |\n| `.fs-background-media` | `element` | Media element |\n| `.fs-background-media.fs-background-animated` | `modifier` | Indicates animated state |\n| `.fs-background-media.fs-background-navtive` | `modifier` | Indicates native support |\n| `.fs-background-media.fs-background-fixed` | `modifier` | Indicates fixed positioning |\n| `.fs-background-embed` | `element` | Embed/iFrame element |\n| `.fs-background-embed.fs-background-embed-ready` | `modifier` | Indicates ready state |\n\n"}