diff options
Improve 360-Degree Viewer again
1 files changed, 4 insertions, 4 deletions
| -rw-r--r-- | docs/experimentals/viewer-360.html | 8 |
diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html index fc42330..9757132 100644 --- a/docs/experimentals/viewer-360.html +++ b/docs/experimentals/viewer-360.html @@ -225,19 +225,19 @@ <div class="docs-demo columns"> <div class="column col-12"> <div class="viewer-360"> - <input class="viewer-slider slider" type="range" min="1" max="30" value="1" oninput="this.setAttribute('value', this.value);"> - <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfaa0b4ba850.jpg');padding-bottom:37.5%;width:100%;"></figure> + <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);"> + <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;"></figure> </div> </div> </div> - <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.xbox.com/en-us/xbox-one-x" target="_blank">Microsoft Xbox One X</a></p> + <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank">Microsoft Xbox One X</a></p> <p>You will need to use your own product image sprite (all angle of photos in one image) and set the attribute <code>max</code> to the image numbers to use this component.</p> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-360"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>></span> <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <p>The default image numbers in CSS are <code>36</code> and <code>30</code>. You can copy the mixin and add more numbers in <code>_viewer-360.scss</code> and re-compiling the CSS.</p> + <p>The default image numbers in CSS are <code>36</code>. You can copy the mixin and add more numbers in <code>_viewer-360.scss</code> and re-compiling the CSS.</p> <pre class="code" data-lang="SCSS"><code>@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">36</span>); @<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">30</span>); </code></pre> |