With the PanoCloud 360° Image Slider, you can display your panorama image and easily integrate it into your website.
PanoCloud 360° Image Slider is not a stand-alone script. It depends on a
couple of other jQuery libraries to work.
These are:
For the PanoCloud 360° Image Slider you need
JQuery because it is a JQuery plugin. Here we provide the link to the Google Library API CDN
(Content Delivery Network). You can also save them directly locally on your web host.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here you can choose if you want to load the full jQuery UI library
from Google's library API or make a slimmer custom version of that contains only widget and effects,
that you'd host on your own server.
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"
type="text/javascript"></script>
This plugin is used for the mousewheel scrolling. Even if you don't
plan on enabling mousewheel scrolling, you need this plugin. Otherwise PanoCloud 360° Image
Slider won't work. Download it from https://github.com/brandonaaron/jquery-mousewheel.
Brandon Aaron also has a demo page if you want to know more about jQuery Mouse Wheel.
<script src="//gerlitzen5.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.mousewheel.min.js" type="text/javascript"></script>
This plugin is used for the touch scrolling. Even if you don't plan
on enabling mousewheel scrolling, I think you need to add this plugin. Download it from https://github.com/davetayls/jquery.kinetic.
Dave Taylor also has a demo page if you want to know more about jQuery Kinetic.
<script src="//gerlitzen5.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.kinetic.js" type="text/javascript"></script>
In the <head> of your html, reference the location to your wmsImageSlider.css.
<link href="//gerlitzen5.it-wms.com/common/1.0/css/pancloudImageSlider/wms_scroll.css" rel="stylesheet" type="text/css" />
.container-wms{ visibility:hidden; } .im2 { max-width:100%; -moz-transition: all .9s; -webkit-transition: all .9s; transition: all .9s; } .wmsBtnGroup button { z-index: 100; font-size:15px; font-weight:400; margin-left:1px; background-color: rgba(37, 38, 39, 0.78); border: none; color: white; padding: 10px 15px; cursor: pointer; float:none; transform:translateY(-43px); } .wmsBtnGroup button:not(:last-child) { border-right: none; } .wmsBtnGroup:after { content: ""; clear: both; display: table; } .wms-center { overflow:visible; position:relative; /*background-color: #f5f5f5;*/ color: #000; font-size: 16px; margin:-40px; border: none; cursor: pointer; text-align: center; margin-left: auto; margin-right: auto; } .wms-modal { display: none; position: fixed; z-index: 3000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: none; background-color: none; background-color: none; /*transform:translateY(-350px);*/ } .wms-modal-content { position: relative; background-color: rgba(55, 63, 70, 0.78); margin: auto; padding: 0; width:50%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.3s } @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } .close { color:#f1f1f1; float: right; font-size: 30px; font-weight: bold; max-width: 30px; } .close:hover, .close:focus { color: #f10a0a; text-decoration: none; cursor: pointer; } .wms-modal-header { padding: 0px 16px; background-color: rgba(37, 38, 39, 0.86); } .video-responsive{ width:100%; margin-bottom:-5px; } .vhead{ color:#f1f1f1; float: left; font-size: 16px; font-weight: bold; margin-bottom:0px; margin-top:8px; } div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } div.scrollableArea { position: relative; width: auto; height: 100%; }
Before close the </body> of your html, reference the location to your wms_scroll.min.js.
<script
src="//gerlitzen5.it-wms.com/common/1.0/js/pancloudImageSlider/wms_scroll.min.js"
type="text/javascript"></script>
Copy this code and paste it before the closing </body> tag
<script type="text/javascript"> $(window).on('load',function() { $("#panoCloudImgSlider-1").wmsSCROLL({ autoScrollingMode:"onStart", autoScrollingDirection:"pendulum", autoScrollingStep:1, autoScrollingInterval:50, manualContinuousScrolling:false, touchScrolling:true, scrollWidth:3100, scrollHeight:400, btnControl:true, btnZoom:true, btnAutorotation:true, btnVideo:false, videoLink:"//", btnViewer:true, viewerLink:"//gerlitzen5.it-wms.com", mouseZooming:true, sliderModalHeaderDescription:"Gerlitzen - Mittelstation" }); }); </script>
<!DOCTYPE html> <html lang="en"> <head> <!-- Include font awesome for the buttons icons --> <link href="//gerlitzen5.it-wms.com/common/1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Include the PanoCloud 360° Image Slider CSS --> <link href="//gerlitzen5.it-wms.com/common/1.0/css/panocloudImageSlider/wms_scroll.css" rel="stylesheet" type="text/css" /> <!-- Include the jQuery and jQuery plugins --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> <script src="//gerlitzen5.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.mousewheel.min.js" type="text/javascript"></script> <script src="//gerlitzen5.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.kinetic.js" type="text/javascript"></script> <!-- Include the PanoCloud Image Slider JS --> <script src="//gerlitzen5.it-wms.com/common/1.0/js/panocloudImageSlider/wms_scroll.min.js" type="text/javascript"></script> </head> <body> <!-- Initialize via HTML --> <div class="wmsSliderContainer"> <div id="panoCloudImgSlider-1"> <img src="//gerlitzen5.it-wms.com/panorama1_raw.jpg" alt="" /> </div> <br /> </div> <!-- Initialize via javascript --> <script type="text/javascript"> $(window).on('load',function() { $("#panoCloudImgSlider-1").wmsSCROLL({ autoScrollingMode:"onStart", autoScrollingDirection:"pendulum", autoScrollingStep:1, autoScrollingInterval:50, manualContinuousScrolling:false, touchScrolling:true, scrollWidth:3100, scrollHeight:400, btnControl:true, btnZoom:true, btnAutorotation:true, btnVideo:false, videoLink:"//", btnViewer:true, viewerLink:"//gerlitzen5.it-wms.com", mouseZooming:true, sliderModalHeaderDescription:"Gerlitzen - Mittelstation" }); }); </script> </body> </html>
Name | Type | Default | Description |
---|---|---|---|
autoScrollingMode | string | onStart | This controls the overall functionality of the
autosrcolling.
|
autoScrollingDirection | string | endlessLoopLeft | This option controls the direction and behavior of the
auto scrolling and is only used if auto scrolling is activated.
|
autoScrollingStep | pixel | 1 | Sets the step length for the auto scrolling. A larger
number will make the auto scrolling faster but also make it appear as less
smooth.
|
autoScrollingInterval | number (of milliseconds) | 30 | If this parameter is set to true, manual scrolling will be
continuous/endless and scroll in i big loop left or right. This works for
all types of manual scrolling: using the hot spots, the mousewheel or touch. |
touchScrolling | boolean (true/false) | true | Set this option to true if you want scrolling for touch
devices such as iPhone, iPad, Android phones etc. When you activate touch
scrolling the user can swipe with their finger to scroll. It's also possible
to click-drag the scroller with the mouse. |
scrollWidth | pixels | 1000 | Set the width of the PanoCloud Image Slider |
scrollHeight | pixels | 360 | Set the height of the PanoCloud Image Slider |
btnControl | boolean (true/false) | true | If the option is set to true, the individual buttons are
displayed |
btnAutorotation | boolean (true/false) | true | If the option is set to false, the button to enable/disable autorotation is hidden |
btnZoom | boolean (true/false) | true | If the option is set to false, the zoom +/- buttons are hidden |
btnVideo | boolean (true/false) | false | If set to true, the video button will be displayed. This
works only if there is a video clip to the panorama. |
videoLink | string | This option defines the link to the video clip |
|
btnViewer | boolean (true/false) | true | With this option the button for enlarging the PanoCloud
Viewer is set |
viewerLink | boolean (true/false) | true | This option sets the button for opening the PanoCloud
Viewer |
mouseZooming | boolean (true/false) | true | This option sets the button for zooming the image |
sliderModalHeaderDescription | string | This option sets the name of the site |
There is also the possibility to download the resources to save them on a web server. However, then the version of the PanoCloud Viewer is not up to date.