readme

Mefistosss · Apr 1, 2022 · f79fcf5 · f79fcf5
1 parent 5565df1
commit f79fcf5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -14,12 +14,46 @@ or you can use [npm module](https://www.npmjs.com/package/sirv-media-viewer-scri
 ```
 npm install --save vue-js-sirv-viewer
 ```
-## usage
+## register as plugin
 ```
 import SirvViewer from 'vue-js-sirv-viewer';
+
 Vue.use(SirvViewer);
 ```
+## basic usage
+```
+<sirv-media-viewer
+    :id='...'
+    :data-src='...'
+    data-options="fullscreen.enable:false;"
+    :slides="[
+        'https://demo.sirv.com/demo/snug/teal-b-throw.jpg',
+        'https://demo.sirv.com/demo/snug/teal.spin',
+        {
+            src: 'https://demo.sirv.com/demo/snug/unpacked.jpg',
+            type: 'image'
+        }
+    ]"
+></sirv-media-viewer>
+```
+- `:id` - viewer id
+- `:data-src` - using for `*.view` files, overrides `:slides`
+- `data-options` - [viewer options](https://sirv.com/help/articles/sirv-media-viewer/)
+- `:slides` - Array with slide sources. Sources can be String or Object.
+String can be just url link
+Object has additional props:
+  * `id` - Slide id [String]
+  * `src` - Source [String]
+  * `dataOptions` - Local slide options [Object]
+  * `type` - Type of slide [String]. The available props are: `spin`, `zoom`, `image`, `youtube`, `vimeo`, `video`, `html`
+  * `dataThumbnailImage` - Custom thumbnail image [String]
+  * `dataThumbnailHtml` - Custom thumbnail html [String]
+  * `dataDisabled` - Disable slide [Boolean]
+  * `dataSwipeDisabled` - Disable slide swipe [Boolean]
+  * `dataHiddenSelector` - Hide selector [Boolean]
+  * `dataPinned` - Pinned selector [String]. The available props are: `left`, `right`
+  * `staticImage` - Static image [Boolean].
 
-[Examples](https://test1.sirv.com/sergey/test/index.html)
+[Examples](https://test1.sirv.com/sergey/vue/index.html)
 
-[Documentation](https://sirv.com/help/articles/sirv-media-viewer/)
+[Sirv Media Viewer documentation](https://sirv.com/help/articles/sirv-media-viewer/)
diff --git a/demo/src/components/Example3.vue b/demo/src/components/Example3.vue
@@ -70,13 +70,13 @@
                 <li><pre class="string">id</pre> - Slide id [String]</li>
                 <li><pre class="string">src</pre> - Source [String]</li>
                 <li><pre class="string">dataOptions</pre> - Local slide options [Object]</li>
-                <li><pre class="string">type</pre> - Type of slide [String]. All types <pre class="string">spin, zoom, image, 'youtube', 'vimeo', 'video', 'html'</pre></li>
+                <li><pre class="string">type</pre> - Type of slide [String]. The available props are: <pre class="string">spin, zoom, image, 'youtube', 'vimeo', 'video', 'html'</pre></li>
                 <li><pre class="string">dataThumbnailImage</pre> - Custom thumbnail image [String]</li>
                 <li><pre class="string">dataThumbnailHtml</pre> - Custom thumbnail html [String]</li>
                 <li><pre class="string">dataDisabled</pre> - Disable slide [Boolean]</li>
                 <li><pre class="string">dataSwipeDisabled</pre> - Disable slide swipe [Boolean]</li>
                 <li><pre class="string">dataHiddenSelector</pre> - Hide selector [Boolean]</li>
-                <li><pre class="string">dataPinned</pre> - Pinned selector [String]. <pre class="string">left, right</pre></li>
+                <li><pre class="string">dataPinned</pre> - Pinned selector [String]. The available props are: <pre class="string">left, right</pre></li>
                 <li><pre class="string">staticImage</pre> - Static image [Boolean].</li>
             </ul>
         </p>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-js-sirv-viewer",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "Sirv Media Viewer for Vue.js",
   "author": "sergey <sergeypo@protonmail.com>",
   "scripts": {