diff options
Add 360-Degree Viewer
12 files changed, 284 insertions, 0 deletions
| -rw-r--r-- | docs/experimentals/autocomplete.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/calendars.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/carousels.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/comparison.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/filters.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/meters.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/off-canvas.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/parallax.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/progress.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/sliders.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/timelines.html | 2 | ||||
| -rw-r--r-- | docs/experimentals/viewer-360.html | 262 |
diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html index 18e2f7a..c4acee8 100644 --- a/docs/experimentals/autocomplete.html +++ b/docs/experimentals/autocomplete.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html index 91c4500..5d12ca0 100644 --- a/docs/experimentals/calendars.html +++ b/docs/experimentals/calendars.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html index 7ec0e21..be88354 100644 --- a/docs/experimentals/carousels.html +++ b/docs/experimentals/carousels.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html index db3ca79..e351e04 100644 --- a/docs/experimentals/comparison.html +++ b/docs/experimentals/comparison.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html index 72b2399..d87a0bf 100644 --- a/docs/experimentals/filters.html +++ b/docs/experimentals/filters.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html index 24118dc..b449c33 100644 --- a/docs/experimentals/meters.html +++ b/docs/experimentals/meters.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html index 703fca0..b5b7636 100644 --- a/docs/experimentals/off-canvas.html +++ b/docs/experimentals/off-canvas.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html index 1ffa6e3..bb590c2 100644 --- a/docs/experimentals/parallax.html +++ b/docs/experimentals/parallax.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html index 686dcf2..ad96664 100644 --- a/docs/experimentals/progress.html +++ b/docs/experimentals/progress.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html index cd979a6..30a2768 100644 --- a/docs/experimentals/sliders.html +++ b/docs/experimentals/sliders.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html index b69413f..a1c0599 100644 --- a/docs/experimentals/timelines.html +++ b/docs/experimentals/timelines.html @@ -166,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html new file mode 100644 index 0000000..83882f1 --- /dev/null +++ b/docs/experimentals/viewer-360.html @@ -0,0 +1,262 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>360-Degree Viewer - Experimentals - Spectre.css CSS Framework</title> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/viewer-360.html"> + <meta property="og:title" content="360-Degree Viewer - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> + <link rel="shortcut icon" href="../img/favicons/favicon.ico"> + <link rel="icon" href="../img/favicons/favicon.png"> + <link rel="stylesheet" href="../dist/spectre.min.css"> + <link rel="stylesheet" href="../dist/spectre-icons.min.css"> + <link rel="stylesheet" href="../dist/spectre-exp.min.css"> + <link rel="stylesheet" href="../dist/docs.min.css"> + <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/viewer-360.html"> + </head> + <body> + <div class="docs-container off-canvas off-canvas-sidebar-show"> + <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a> + <div class="btns d-flex"> + <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> + </div> + </div> + <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> + <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>SPECTRE</h2></a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../getting-started/installation.html">Installation</a> + </li> + <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a> + </li> + <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a> + </li> + <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-elements">Elements</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../elements/typography.html">Typography</a> + </li> + <li class="menu-item"><a href="../elements/tables.html">Tables</a> + </li> + <li class="menu-item"><a href="../elements/buttons.html">Buttons</a> + </li> + <li class="menu-item"><a href="../elements/forms.html">Forms</a> + </li> + <li class="menu-item"><a href="../elements/icons.html">Icons</a> + </li> + <li class="menu-item"><a href="../elements/labels.html">Labels</a> + </li> + <li class="menu-item"><a href="../elements/code.html">Code</a> + </li> + <li class="menu-item"><a href="../elements/media.html">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-layout">Layout</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a> + </li> + <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> + </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> + <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-components">Components</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="../components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="../components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="../components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="../components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="../components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="../components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="../components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="../components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="../components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="../components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="../components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="../components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="../components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="../components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="../components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="../components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="../utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="../utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="../utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="../utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="../utilities/text.html">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/> + <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> + <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> + </li> + <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> + </li> + <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a> + </li> + <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/filters.html">Filters</a> + </li> + <li class="menu-item"><a href="../experimentals/meters.html">Meters</a> + </li> + <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="../experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> + <div class="container" id="viewer-360"> + <h3 class="s-title">360-Degree Viewer<a class="anchor" href="#viewer-360" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> + <p>360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. </p> + <div class="docs-demo columns"> + <div class="column col-12"> + <div class="viewer-360"> + <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/25/5bfa45b4b3f27.jpg');"></figure> + </div> + </div> + </div> + <p> + Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p> + <p>You will need to use your own product image sprite (all angle of photos in one image) and define variables to use this component. The default image number is <code>36</code>.</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> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> + </div> + <div class="docs-footer container grid-lg" id="copyright"> + <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </div> + </div> + </div> + </div> + <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + <script> + docsearch({ + apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', + indexName: 'picturepan2_spectre', + inputSelector: '.docs-search', + debug: true + }); + </script> + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> + </body> +</html>
\ No newline at end of file |