PanoCloud 360° Image Slider

Options

Autoscrolling

Scrollwidth

Scrollheight

Buttons

Control

Zoom Autorotation Video Viewer

additional Settings

autoScrollingDirection

autoScrollingStep

autoScrollingInterval

videoLink

Header Text

Example

Technology

HTML5
jQuery
CSS
Responsive
Works in IE>8, Firefox, Google Chrome, Safari, Opera

Features

Zoom in
Zoom out
Start rotation / stop rotation
Link to Video clip
Link to PanoCloud Viewer

How to use it

Dependencies

PanoCloud 360° Image Slider is not a stand-alone script. It depends on a couple of other jQuery libraries to work.
These are:

1. jQuery

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>

2. jQuery UI (widget and effects)

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>

3. jQuery Mouse Wheel by Brandon Aaron

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="//seeboden.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.mousewheel.min.js" type="text/javascript"></script>

4. jQuery Kinetic by Dave Taylor

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="//seeboden.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.kinetic.js" type="text/javascript"></script>

CSS

In the <head> of your html, reference the location to your wmsImageSlider.css.


                        <link href="//seeboden.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%;
}

jQuery

Before close the </body> of your html, reference the location to your wms_scroll.min.js.


                        <script
                        src="//seeboden.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:true,
			videoLink:"//seeboden.it-wms.com/clip_current_720p.mp4",
			btnViewer:true,
			viewerLink:"//seeboden.it-wms.com",
			mouseZooming:true,
			sliderModalHeaderDescription:"Seeboden / Millstätter See"
		});
	});
	</script>

HTML

	<!DOCTYPE html>
	<html lang="en">
	<head>

    <!-- Include font awesome for the buttons icons -->
	<link href="//seeboden.it-wms.com/common/1.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- Include the PanoCloud 360° Image Slider CSS -->
	<link href="//seeboden.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="//seeboden.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.mousewheel.min.js" type="text/javascript"></script>
	<script src="//seeboden.it-wms.com/common/1.0/js/panocloudImageSlider/jquery.kinetic.js" type="text/javascript"></script>

    <!-- Include the PanoCloud Image Slider JS -->
	<script src="//seeboden.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="//seeboden.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:true,
			videoLink:"//seeboden.it-wms.com/clip_current_720p.mp4",
			btnViewer:true,
			viewerLink:"//seeboden.it-wms.com",
			mouseZooming:true,
			sliderModalHeaderDescription:"Seeboden / Millstätter See"
		});
	});
	</script>
	</body>
	</html>

Options

Name	Type	Default	Description
autoScrollingMode	string	onStart	This controls the overall functionality of the autosrcolling. "" (empty string) - Leave it out or supply an empty string if you don't want any auto scrolling. "onStart" - Using onStart the scrolling will start automatically after the page has loaded and scroll according to the method you've selected using the autoScrollDirection option. When the user moves the mouse over the left or right hot spot or uses the mousewheel the auto scroll will stop. After that the scrolling will only be triggered by the hot spots or the mousewheel. "always" - If set to "always" - the hot spots are disabled alltogether and the scrollable area will only scroll automatically.
autoScrollingDirection	string	endlessLoopLeft	This option controls the direction and behavior of the auto scrolling and is only used if auto scrolling is activated. "pendulum" - If you set the value to backAndForth PanoCloud Image Slider starts auto scrolling right and when it reaches the end, switches to auto scrolling left and so on - ping-pong style. "endlessLoopRight" - This option will give you continuous auto scrolling right. "endlessLoopLeft" - This will give you continuous auto scrolling left.
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. number (of pixels)
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.