formstone
Version:
Library of modular front end components.
1 lines • 10.7 kB
JSON
{"main":["viewer.js","viewer.css"],"options":[{"name":"controls","type":"boolean or object","default":"true","description":"Flag to draw controls OR object containing container, next, previous, zoom_in and zoom_out control selectors (Must be fully qualified selectors)"},{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"labels.count","type":"string","default":"'of'","description":"Gallery count separator text"},{"name":"labels.next","type":"string","default":"'Next'","description":"Gallery control text"},{"name":"labels.previous","type":"string","default":"'Previous'","description":"Gallery control text"},{"name":"labels.zoom_in","type":"string","default":"'Zoom In'","description":"Image zoom text"},{"name":"labels.zoom_out","type":"string","default":"'Zoom Out'","description":"Image zoom text"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"zoomDelta","type":"int","default":"100","description":"Max zoom change"},{"name":"zoomEnertia","type":"float","default":"0.2","description":"Enertia for zoom"},{"name":"zoomIncrement","type":"float","default":"0.01","description":"Increment for zoom buttons"}],"events":[{"name":"loaded.viewer","description":"Image loaded"},{"name":"ready.viewer","description":"Image ready"}],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.viewer(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").viewer(\"destroy\");"]},{"name":"load","description":"Loads source image","params":[{"name":"source","type":"string OR array","description":"Source image (string) or array of images (array)"}],"examples":["$(\".target\").viewer(\"load\", \"path/to/image.jpg\");","$(\".target\").viewer(\"load\", [\"path/to/image-1.jpg\",\"path/to/image-2.jpg\"]);"]},{"name":"unload","description":"Unloads current image","examples":["$(\".target\").viewer(\"unload\");"]}],"name":"Viewer","type":"widget","description":"A jQuery plugin for image exploration.","dependencies":["jQuery","core.js","touch.js","transition.js"],"css":[{"name":".fs-viewer-element","type":"element","description":"Target elmement"},{"name":".fs-viewer","type":"element","description":"Base widget class"},{"name":".fs-viewer-source","type":"element","description":"Source image element"},{"name":".fs-viewer-wrapper","type":"element","description":"Viewer wrapper"},{"name":".fs-viewer-viewport","type":"element","description":"Viewer viewport"},{"name":".fs-viewer-container","type":"element","description":"Image container"},{"name":".fs-viewer-image","type":"element","description":"Image element"},{"name":".fs-viewer-controls","type":"element","description":"Controls container"},{"name":".fs-viewer-control","type":"element","description":"Control element"},{"name":".fs-viewer-control_previous","type":"element","description":"Previous control"},{"name":".fs-viewer-control_next","type":"element","description":"Next control"},{"name":".fs-viewer-control_zoom_in","type":"element","description":"Zoom in control"},{"name":".fs-viewer-control_zoom_out","type":"element","description":"Zoom out control"}],"use":"### Basic\n\nViewer will create a zoomable image based on the child image of it's target:\n\n```javascript\n$(\".target\").viewer();\n```\n\n```markup\n<div class=\"target\">\n <img src=\"one.jpg\" alt=\"\">\n</div>\n```\n\n### Basic\n\nViewer will create a gallery if multiple child images are found:\n\n```javascript\n$(\".target\").viewer();\n```\n\n```markup\n<div class=\"target\">\n <img src=\"one.jpg\" alt=\"\">\n <img src=\"two.jpg\" alt=\"\">\n <img src=\"three.jpg\" alt=\"\">\n</div>\n```\n","demo":"<h3>Basic</h3>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<style>\r\n .viewer {\n width: 100%;\r\n /*height: 300px;*/\n\r\n margin: 0 0 20px;\r\n }\r\n\r\n @media screen and (min-width: 740px) {\n .viewer {\n /*height: 500px;*/\n }\r\n }\r\n</style>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\n <div class=\"viewer js-viewer\" data-viewer-options='{}'>\r\n <img src=\"https://spacehold.it/900x1600/1.jpg\" alt=\"\">\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class=\"viewer\">\n	<img src="thumbnail.jpg" alt="">\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".viewer\").viewer();</code></pre>\n </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\n\n<h3>Gallery</h3>\n\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"viewer js-viewer\" data-viewer-options='{}'>\n <img src=\"https://spacehold.it/1600x900/1.jpg\" alt=\"\">\n <img src=\"https://spacehold.it/900x1600/2.jpg\" alt=\"\">\n <img src=\"https://spacehold.it/1000x1000/3.jpg\" alt=\"\">\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class=\"viewer\">\n	<img src="thumbnail_1.jpg" alt="">\n	<img src="thumbnail_2.jpg" alt="">\n	<img src="thumbnail_3.jpg" alt="">\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".viewer\").viewer();</code></pre>\n </div>\n</div>\n\n<h3>No Theme</h3>\n\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"viewer js-viewer\" data-viewer-options='{\"theme\":\"\"}'>\n <img src=\"https://spacehold.it/1600x900/1.jpg\" alt=\"\">\n <img src=\"https://spacehold.it/900x1600/2.jpg\" alt=\"\">\n <img src=\"https://spacehold.it/1000x1000/3.jpg\" alt=\"\">\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class=\"viewer\">\n	<img src="thumbnail_1.jpg" alt="">\n	<img src="thumbnail_2.jpg" alt="">\n	<img src="thumbnail_3.jpg" alt="">\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".viewer\").viewer({\n theme: \"\",\n});</code></pre>\n </div>\n</div>\n","document":"# Viewer\n\nA jQuery plugin for image exploration.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Viewer\n\n\n#### Main\n\n```markup\nviewer.js\nviewer.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\ntouch.js\ntransition.js\n```\n\n### Basic\n\nViewer will create a zoomable image based on the child image of it's target:\n\n```javascript\n$(\".target\").viewer();\n```\n\n```markup\n<div class=\"target\">\n <img src=\"one.jpg\" alt=\"\">\n</div>\n```\n\n### Basic\n\nViewer will create a gallery if multiple child images are found:\n\n```javascript\n$(\".target\").viewer();\n```\n\n```markup\n<div class=\"target\">\n <img src=\"one.jpg\" alt=\"\">\n <img src=\"two.jpg\" alt=\"\">\n <img src=\"three.jpg\" alt=\"\">\n</div>\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-viewer-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| `controls` | `boolean or object` | `true` | Flag to draw controls OR object containing container, next, previous, zoom_in and zoom_out control selectors (Must be fully qualified selectors) |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `labels.count` | `string` | `'of'` | Gallery count separator text |\n| `labels.next` | `string` | `'Next'` | Gallery control text |\n| `labels.previous` | `string` | `'Previous'` | Gallery control text |\n| `labels.zoom_in` | `string` | `'Zoom In'` | Image zoom text |\n| `labels.zoom_out` | `string` | `'Zoom Out'` | Image zoom text |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `zoomDelta` | `int` | `100` | Max zoom change |\n| `zoomEnertia` | `float` | `0.2` | Enertia for zoom |\n| `zoomIncrement` | `float` | `0.01` | Increment for zoom buttons |\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.viewer` | Image loaded |\n| `ready.viewer` | Image ready |\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### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.viewer(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").viewer(\"destroy\");\n```\n\n### load\n\nLoads source image\n\n```javascript\n$(\".target\").viewer(\"load\", \"path/to/image.jpg\");\n```\n```javascript\n$(\".target\").viewer(\"load\", [\"path/to/image-1.jpg\",\"path/to/image-2.jpg\"]);\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `source` | `string OR array` | | Source image (string) or array of images (array) |\n\n### unload\n\nUnloads current image\n\n```javascript\n$(\".target\").viewer(\"unload\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-viewer-element` | `element` | Target elmement |\n| `.fs-viewer` | `element` | Base widget class |\n| `.fs-viewer-source` | `element` | Source image element |\n| `.fs-viewer-wrapper` | `element` | Viewer wrapper |\n| `.fs-viewer-viewport` | `element` | Viewer viewport |\n| `.fs-viewer-container` | `element` | Image container |\n| `.fs-viewer-image` | `element` | Image element |\n| `.fs-viewer-controls` | `element` | Controls container |\n| `.fs-viewer-control` | `element` | Control element |\n| `.fs-viewer-control_previous` | `element` | Previous control |\n| `.fs-viewer-control_next` | `element` | Next control |\n| `.fs-viewer-control_zoom_in` | `element` | Zoom in control |\n| `.fs-viewer-control_zoom_out` | `element` | Zoom out control |\n\n"}