Skip to content

Commit

Permalink
update demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@dzmitry-stramavus
dzmitry-stramavus committed Jul 15, 2019
1 parent ecb9178 commit 7052264
Show file tree
Hide file tree
Showing 3 changed files with 479 additions and 76 deletions.
76 changes: 0 additions & 76 deletions examples/src/home.html
View file

This file was deleted.

239 changes: 239 additions & 0 deletions examples/src/indoor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/fonts/helvetica-neue.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="./style.css">
<style>.on-load {
display: none
}

.spinner-grow {
color: #343a40 !important;
display: inline-block;
vertical-align: text-bottom;
background-color: currentColor;
border-radius: 50%;
opacity: 0;
-webkit-animation: spinner-grow .75s linear infinite;
animation: spinner-grow .75s linear infinite;
width: 100px;
height: 100px;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

.github-button {
color: transparent;
}
</style>
<style>
.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
padding: 8px;
background: rgb(244, 244, 244);
border: none;
border-radius: 4px;
}

.cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
outline: none;
}

.cloudimage-360 .cloudimage-360-prev {
display: none;
position: absolute;
z-index: 100;
top: calc(50% - 15px);
left: 20px;
}

.cloudimage-360 .cloudimage-360-next {
display: none;
position: absolute;
z-index: 100;
top: calc(50% - 15px);
right: 20px;
}

.cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
content: '';
display: block;
width: 30px;
height: 30px;
background: 50% 50% / cover no-repeat;
}

.cloudimage-360 .cloudimage-360-prev:before {
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
}

.cloudimage-360 .cloudimage-360-next:before {
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
}

.cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
opacity: 0.4;
cursor: default;
}
</style>
<title>JS-cloudimage-360-view home addition</title>
</head>

<body>
<!-- simply iniatialize it with class name "cloudimage-360", server folder path, file name and amount of images -->
<div id="spinner" class="spinner-grow text-dark" role="status"></div>

<section id="main" class="wrapper" style="visibility: hidden;overflow: hidden;">
<section class="home">
<div class="container">
<a class="logo" href="https://scaleflex.github.io/js-cloudimage-360-view/">js-cloudimage-360-view</a>
<div style="margin-top: 10px;">
<a class="github-button" target="_blank"
href="https://github.com/Scaleflex/js-cloudimage-360-view/subscription" data-icon="octicon-eye"
aria-label="Watch Scaleflex/js-cloudimage-360-view on GitHub">Watch</a>
<a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view"
data-show-count="true" data-icon="octicon-star" aria-label="Star Scaleflex/js-cloudimage-360-view on GitHub"
>Star</a>
<a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view/fork"
data-icon="octicon-repo-forked" aria-label="Fork Scaleflex/js-cloudimage-360-view on GitHub">Fork</a>
<a class="twitter-share-button btn btn-info" target="_blank"
href="https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage">
<i> </i>
<span>Tweet</span>
</a>
<!--<a class="github-button" href="https://github.com/Scaleflex/filerobot-uploader/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download Scaleflex/filerobot-uploader on GitHub">Download</a>-->
</div>
<h1>Show every detail from any angle</h1>
<h2>Home addition: Indoor view</h2>

<div class="actions-wrapper">
<a
id="view-github-btn"
href="https://github.com/scaleflex/js-cloudimage-360-view"
class="btn btn-primary"
target="_blank"
>View on GitHub</a>
<a
href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"
class="btn btn-light"
target="_blank"
>Edit on CodeSandbox</a>
<!--<a href="#" class="btn btn-light btn-lg">Read on Medium</a>-->
</div>
</div>

<a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">
<img
class="fork-me-on-github"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
alt="Fork me on GitHub">
</a>

<a href="https://www.filerobot.com/" class="robot-icon">
<img style="width:100%;" id="robot-icon"
src="https://demo.cloudimg.io/width/800/q35.foil1/https://scaleflex.airstore.io/filerobot/assets/robot-icon-left.png"
alt="">
</a>
</section>

<section>
<div
class="cloudimage-360"
data-folder="https://scaleflex.airstore.io/demo/indoor/"
data-filename="{index}.jpeg"
data-amount="30"
data-magnifier="3"
data-responsive="scaleflex"
data-ratio="0.5"
data-stop-at-edges
data-spin-reverse
data-control-reverse
>
<button class="cloudimage-360-prev"></button>
<button class="cloudimage-360-next"></button>
</div>
</section>
</section>

<section style="text-align: center;">
<div class="container ready-to-start">
<h2>Any questions?</h2>
<p>
Contact us at <a href="mailto:[email protected]">[email protected]</a>, our experts will be happy to help!
</p>
</div>
</section>

<footer>
<div style="background: #fff">
<section class="container ready-to-start filerobot-ui-family">
<div class="row">
<div class="col-sm-3 filerobot-ui-family-label" style="max-width: 200px; min-width: 200px;">
<h5>Filerobot UI family:</h5>
</div>
<div class="col-sm-9 filerobot-ui-family-libs" style="max-width: calc(100% - 200px);">
<ul>
<li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">JS Cloudimage
Responsive</a></li>
<li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage
Responsive</a></li>
<li><a target="_blank" href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage
Responsive</a></li>
<li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Uploader</a></li>
<li><a target="_blank" href="https://github.com/scaleflex/filerobot-image-editor">Image Editor</a></li>
</ul>
</div>
</div>
</section>
</div>
<hr/>
<div class="copyright">
<div class="container">
<div class="row">
<div class="team-desc col-sm-8">
<div>Made with ❤ in 2019 in Paris, Munich and Sofia by the Scaleflex team, the guys behind <a
href="https://www.cloudimage.io/en/home" target="_blank">Cloudimage.io</a>.
</div>
<div style="margin-top: 10px;">Powered by <a href="https://www.scaleflex.it/en/home" target="_blank">Scaleflex
team</a>.
All rights reserved.
</div>
</div>
<div class="footer-menu col-sm-4">
<ul>
<li><a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">View GitHub</a></li>
<li><a href="https://github.com/scaleflex/js-cloudimage-360-view/issues" target="_blank">Current
Issues</a>
</li>
<li><a href="https://github.com/scaleflex/js-cloudimage-360-view#table-of-contents" target="_blank">Documentation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>


<!-- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag -->
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.1.0/js-cloudimage-360-view.min.js"></script>
<!--<script src="../../build/js-cloudimage-360-view.min.js"></script>-->
<script>
const spinner = document.getElementById('spinner');
const wrapper = document.getElementById('main');

wrapper.classList.add('active');
spinner.style.display = 'none';
</script>
</body>
</html>
Loading

0 comments on commit 7052264

Please sign in to comment.