API [EN] | Slides3

Getting Started

You can embed Slides3 by includes these script and CSS files in you HTML code:

<head>
    <script type="module" crossorigin src="https://api.360ty.cloud/slides3/js/slides3.js"></script>
    <link rel="stylesheet" href="https://api.360ty.cloud/slides3/css/slides3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">  
</head>

Now there's a class "Slides3" available. Now create a div and give it a unique ID. This ID needs to be the parameter in the class instantiation. The slides will be created in the div with the ID.

You can optionally add options, such as colors, as the second parameter.
You can create an instance of this class with:

options : {
	colors? : {
		primary : string,
      	secondary : string,
	},
    socials? : {
		social :  "facebook" | "instagram" | "twitter" | "google-plus" | "linkedin" | "tumblr" | "youtube" | "tiktok" | "pinterest" | "flickr" | "reddit" | "quora" | "vimeo";
		link: string;
	}[],
}
var slides3 = new Slides3("myContainer",options?);
                          
//example
var options = {
	colors: {
		primary : "#f40000",
  		secondary : "#ffffff",
	},
	socials: [
      {
        social:"facebook",
        link:"https://www.facebook.com/360ty.world/"
      },
      {
      	social:"instagram",
        link:"https://www.instagram.com/360ty.world_mmf/"
      },
      {
        social:"youtube",
        link:"https://www.youtube.com/channel/UCCiyXizlQQQc_-XC9KcEYiw"
      },
  	],
}
var slides3 = new Slides3("myContainer",options);

The name of the variable doesn't need to be slides3, you can choose any name.

Creating the Homeslide

The Homeslide is optional!

The Homeslide is created with the "createHomeslide" method:

returns the Homeslide instance
The first parameter is the type of background you want the Homeslide to have. You can choose between an image (URL), a Video (URL) or a tour (PanoParams).
The second parameter is the Content of the Homeslide, which is optional.
There can only be 1 Homeslide. Creating another one will overwrite it.

//types

SkinVariable : {
  [key : string] : string | boolean; /* set skin Variables -> key - name of the variable, value - value of the variable. e.g. to set the hotspot pulse color : {hotspotFarbe : "#fffff"} */;
}

tourParams: {
    basepath : string /* -> URL where the tourfiles are located */;
	node : number /* -> The Node ID without the "node" in front of it */;
	fov? : number [~5 - ~90] /* -> the Zoom value of the 360° Image in ° */;
	tilt? : number [-90 - 90] /* -> the vertical position of the 360° Image in ° (-90 -> looking into the floor, 0 -> looking straight, 90 -> looking in the sky */;
	pan? : number [-360 - 360] /* -> the horizontal position of the 360° Image in ° (the algebraic sign determines the direction -> - = left, + = right | -90 -> quarter turn to the left, 45 -> eigth of a turn to the right)*/;
 	skin? : instanceof pano2vrSkin /* -> to use a custom skin. Sometimes a tour has a custom skin (basepath/skin.js). Importing this script into your HTML will create a global class "pano2vrSkin", which can be passed here */; 
    skinVariables? : SkinVariable[]; /* -> a list of skin variables */;
}

background : string | tourParams;

content : {
  	headline?: string;
    caption?: string;
    logo?: {
        src : string;
        href : string;
    }
    startButtonText?: string;
    hideStartButton? : boolean;
}

//template

var homeslide = Slide3.prototype.createHomeslide(background, content?);
                        
//examples
                                        
var homeslideContent = {
	headline : "my Headline",
	caption : "my Caption",
	logo : {
		src : "path/to/image.jpg",
		href : "https://my.site.com/,
	},
  	startButtonText : "start Sliding!",
    hideStartButton? : false,
}
    
//image background
    
var homeslide = slides3.createHomeslide("path/to/homeslide_background/image.jpg", homeslideContent);

//video background

var homeslide = slides3.createHomeslide("path/to/homeslide_background/video.mp4", homeslideContent);

//tour background

var homeslidePanoParams = {
  basepath: "https://lechwinter.360ty.cloud/",
  node: 45,
  fov: 70,
  tilt: -20,
  pan: 180,
  skinVariables : [{
  	hotspotFarbe : "#f40000"
  }],
}
var homeslide = slides3.createHomeslide(homeslidePanoParams, homeslideContent);

Adding content to the Homeslide

You can also use the methods to add content instead of passing the content as a parameter. With these methods, you can also dynamically change content.

Add a Headline

to add a headline to the Homeslide, use the "addHeadline" method:

Homeslide.prototype.addHeadline(text:String)

//example
homeslide.addHeadline("my Headline")

Add some Text

to add text to the Homeslide, use the "addParagraph" method:

Homeslide.prototype.addParagraph(text:String)

//example:
homeslide.addParagraph("paragraph content")

Add custom Elements EXPERIMENTAL

to add custom Elements to the Homeslide, use the "addToTextContainer" method:

Homeslide.prototype.addToTextContainer(element:HTMLElement) 
//the element parameter is an HTML element. you can use e.g "document.getElementById("myId")" to append an existing element to the homeslide

//example:
let paragraph = document.createElement("p");
paragraph.innerText = "Paragraph content";

homeslide.addToTextContainer(paragraph)

This is an experimental feature. Use it at your own risk!
The container is a flexbox

Add a Logo

to add a Logo to the Homeslide, use the "addLogo" method:

Homeslide.prototype.addLogo(imgURL:String,link:String) 
//imgURL: the src of the image
//link: where to refer, when the logo is clicked

//example:
homeslide.addLogo("https://wiki.360ty.world/favicon.ico","https://wiki.360ty.world/")

Creating Slide

to create a Slide/vertical Slide, use the "createSlide" method:

returns a Slide instance
takes tourParams as the first parameter. These will set the background tour of the Slide.
Optionally takes content as the second parameter. This will create Elements/Content on the Slide.

//types

SkinVariable : {
  [key : string] : string | boolean; /* set skin Variables -> key - name of the variable, value - value of the variable. e.g. to set the hotspot pulse color : {hotspotFarbe : "#fffff"} */;
}

tourParams: {
    basepath : string /* -> URL where the tourfiles are located */;
	node : number /* -> The Node ID without the "node" in front of it */;
	fov? : number [~5 - ~90] /* -> the Zoom value of the 360° Image in ° */;
	tilt? : number [-90 - 90] /* -> the vertical position of the 360° Image in ° (-90 -> looking into the floor, 0 -> looking straight, 90 -> looking in the sky */;
	pan? : number [-360 - 360] /* -> the horizontal position of the 360° Image in ° (the algebraic sign determines the direction -> - = left, + = right | -90 -> quarter turn to the left, 45 -> eigth of a turn to the right)*/;
 	skin? : instanceof pano2vrSkin /* -> to use a custom skin. Sometimes a tour has a custom skin (basepath/skin.js). Importing this script into your HTML will create a global class "pano2vrSkin", which can be passed here */; 
    skinVariables? : SkinVariable[]; /* -> a list of skin variables */;
}

content : {
	facebookButtonLink? : string;
    headline?: string;
    description?: string;
    photographer?:string;
    location?: string;
    startButtonLabel?: string;
}

//template

var slide = Slides3.prototype.createSlide(tourParams,content?);

//Example:
                                 
var slide = slides3.createSlide({
    basepath : "https://lechwinter.360ty.cloud/",
	node : 45,
	fov : 60,
	tilt : -10,
	pan : -45,
},{
	facebookButtonLink : "https://www.facebook.com/360ty.world/photos/4481435151872107",
    headline : "Slide Headline",
    description : "Slide description",
    photographer : "Rene",
    location : "360ty World",
    startButtonLabel : "start 360° Tour"
});

Adding Content to a Slide

You can also use the methods to add content instead of passing the content as a parameter. With these methods, you can also dynamically change content.

Adding Buttons

to add buttons to a Slide, use the "addToButtonContainer" method:

//template
Slide.prototype.addToButtonContainer(element:HTMLElement);

//example:
var newButton = document.createElement("a");
newButton.href = "https://360ty.world/";
newbutton.target = "_blank";
newButton.innerText = "buttonText";

slide.addToButtonContainer(newButton);

You can add any Element to this.
The Element automatically will get the "slide-button" CSS class to match the style.
Use an "<a>" Element to better fit in with the style.

Adding a Headline

to add a headline to a Slide, use the "addHeadline" method:

Slide.prototype.addHeadline(text:String);

//example:
slide.addHeadline("My Headline");

adding a Description

to add a description to a Slide, use the "addDescription" method:

Slide.prototype.addDescription(text:string);

//example:
slide.addDescription("This Slide was brought to you by 360ty.world");

adding a Photographer

to add a photographer to a Slide, use the "addPhotographer" method:

Slide.prototype.addPhotographer(text:string);

//example:
slide.addFotographer("Rene");

adding a Location

to add a location to a Slide, use the "addLocation" method:

Slide.prototype.addLocation(text:String);

//example:
slide.addLocation("Altach, Vorarlberg");

adding the Facebook share Button

to add the Facebook share-button, use the "addFacebookButton" method:

Slide.prototype.addFacebookButton(link:String);

//example:
slide.addFacebookButton("https://www.facebook.com/360ty.world/photos/4481435151872107");

creating Subslides

to create a Subslide/horizontal slide, use the "createSubslide" method on a Slide:

//types

SkinVariable : {
  [key : string] : string | boolean; /* set skin Variables -> key - name of the variable, value - value of the variable. e.g. to set the hotspot pulse color : {hotspotFarbe : "#fffff"} */;
}

tourParams: {
    basepath : string /* -> URL where the tourfiles are located */;
	node : number /* -> The Node ID without the "node" in front of it */;
	fov? : number [~5 - ~90] /* -> the Zoom value of the 360° Image in ° */;
	tilt? : number [-90 - 90] /* -> the vertical position of the 360° Image in ° (-90 -> looking into the floor, 0 -> looking straight, 90 -> looking in the sky */;
	pan? : number [-360 - 360] /* -> the horizontal position of the 360° Image in ° (the algebraic sign determines the direction -> - = left, + = right | -90 -> quarter turn to the left, 45 -> eigth of a turn to the right)*/;
 	skin? : instanceof pano2vrSkin /* -> to use a custom skin. Sometimes a tour has a custom skin (basepath/skin.js). Importing this script into your HTML will create a global class "pano2vrSkin", which can be passed here */; 
    skinVariables? : SkinVariable[]; /* -> a list of skin variables */;
}

content : {
	facebookButtonLink? : string;
    headline?: string;
    description?: string;
    photographer?:string;
    location?: string;
    startButtonLabel?: string;
}

//template

var subslide = Slide.prototype.createSubslide(tourParams,content?);

//Example:
                                 
var subslide = slide.createSubslide({
    basepath : "https://lechsommer.360ty.cloud/",
	node : 15,
	fov : 50,
	tilt : -10,
	pan : -45,
},{
	facebookButtonLink : "https://www.facebook.com/360ty.world/photos/4481435151872107",
    headline : "Subslide Headline",
    description : "Subslide description",
    photographer : "Rene",
    location : "360ty World",
    startButtonLabel : "start 360° Tour"
});

A Subslide is identical to a Slide, except you can't add more Subslides to them. All methods of the Slide also apply to the Subslide.

About us

to add the "About us" and "Partner" buttons in the Navbar, use the "createAboutUs" method:

returns the AboutUs instance
optionally add content as the first paragraph

//types

AboutPartner {
   imgURL: String /* the URL of the image of the partner */,
   link: String /* the URL to refer to, when the partner is clicked on */,
}

content: {
 	headline?: string;
    caption?: string;
    image?: string;
    descriptionParagraphs? : string[];
    partners? : AboutPartner[];
}

//template

Slides3.prototype.createAboutUs(content?);

//example
var aboutContent = {
	headline : "About 360ty",
	caption : "360ty-fy your world",
	image : "https://logos.360ty.cloud/360ty_world_extern.png",
	descriptionParagraphs : [
	"paragraph 1",
	"paragraph 2",
	],
	partners : [{
    	link : "https://360ty.world/",
      	imgURL : "https://logos.360ty.cloud/360ty_world_extern.png"
    }],
}
slides3.createAboutUsContainer(aboutContent);

Adding Content to "About us"

Adding a Headline

to add a Headline to the "about us" panel, use the "addHeadline" method:

//template

AboutUs.prototype.addHeadline(text:string);

//example

aboutUs.addHeadline("About 360ty");

Adding a caption

to add a caption to the "about us" panel, use the "addSubHeadline" method:

AboutUs.prototype.addSubHeadline(text:string);

//example
aboutUs.addSubHeadline("360ty-fy your world");

Adding an image

to add an Image to the "about us" panel, use the "addImage" method:

AboutUs.prototype.addImage(src:string);

//example
aboutUs.addImage("https://wiki.360ty.world/favicon.ico");

Adding a Paragraph

to add a paragraph to the "about us" panel, use the "addParagraph" method:

AboutUs.prototype.addParagraph(paragraph:string);

//example
aboutUs.addParagraph(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid.`);

Adding Partners

to add partners to the "about us" panel, use the "addPartners" method:

//types

partner{
   imgURL: String /* the URL of the image of the partner */,
   link: String /* the URL to refer to, when the partner is clicked on */,
}

//prototype

AboutUs.prototype.addPartners(partner[]);

//example
aboutUs.addPartners(
[
  {
    imgURL:"https://storage.googleapis.com/logos.360ty.cloud/360ty_world_extern.png",
    link:"https://360ty.world/",
  },
  {
    imgURL:"https://multimedia-fabrik.com/wp-content/uploads/2019/02/cropped-Logo_MMF_300.png",
    link:"https://multimedia-fabrik.com",
  }
]
);

General Settings

Screenshot Studio Button

to add a button next to the "back" button, when the tour is active, which opens the 360ty Screenshot Studio at the current position, use the "setShowScreenshotButton" method and set it to "true":

//template

Slides3.prototype.setShowScreenshotButton(show:Boolean)

//example:

slides3.setShowScreenshotButton(true);

Tour loading

setting Tour loading to "false", will prevent the tour from loading. To set this variable, use the "setTourLoad" method:

//template

Slides3.prototype.setTourLoad(load:Boolean)

//example:

slides3.setTourLoad(false);

This is mostly used for debugging purposes or for frameworks that re-render the tour on input changes, like Elementor. Re-rendering the tour too many times will overload the WebGL Context and significantly slows down your browser or even crash it.

Initialize Slides

after setting the options and creating the slides, you can initialize the Slides with the "init" method:

slides3.init()

Example

<html>
<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="https://storage.googleapis.com/api.360ty.cloud/slides3/css/slides3.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <script src="https://api.360ty.cloud/slides3/js/slides3.js"></script>
  <style>
    body{
      min-height: -webkit-fill-available;
      min-height: 100vh;
      margin:0;
    }
    #slides_container{
      height:100%;
      width:100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <!-- creating the Slides container -->
  <div id="slides_container"></div>

  <!-- creating the Slides -->
  <script>

    var options = {
	colors: {
		primary : "#f40000",
  		secondary : "#ffffff",
	},
	socials: [
      {
        social:"facebook",
        link:"https://www.facebook.com/360ty.world/"
      },
      {
      	social:"instagram",
        link:"https://www.instagram.com/360ty.world_mmf/"
      },
      {
        social:"youtube",
        link:"https://www.youtube.com/channel/UCCiyXizlQQQc_-XC9KcEYiw"
      },
  	],
}
	var slides3 = new Slides3("slides_container",options); //instanciating    
    //About us
    var aboutUsContent = {
     	headline: "About 360ty",
      	caption : "360ty-fy your world",
		image : "https://multimedia-fabrik.com/wp-content/uploads/2019/02/cropped-Logo_MMF_300.png",
      	descriptionParagraphs : [
		"paragraph 1",
		"paragraph 2",
		],
      	partners : [
          {
            imgURL:"https://multimedia-fabrik.com/wp-content/uploads/2019/02/cropped-Logo_MMF_300.png",
            link:"https://multimedia-fabrik.com"
          },
          {
            imgURL:"https://storage.googleapis.com/logos.360ty.cloud/360ty_world_extern.png",
            link:"https://360ty.world"
          },
        ],
    };
  	var aboutUs = slides3.createAboutUs(aboutUsContent);  
    //Homeslide
    var homeslideBackground = {
    	basepath:"https://altach.360ty.world/",
    	node:1,
    	fov:20,
      	tilt:-20,
      	pan:21
    };
    var homeslideContent = {
      headline : "360ty",
      caption : "Experience 360° Photography",
      startButtonText : "start Slidin'",
      logo : {
      	src:"https://logos.360ty.cloud/360ty_world_extern.png",
        href:"https://360ty.world/",
      },
    };
    var homeslide = slides3.createHomeslide(homeslideBackground,homeslideContent);
   
    //Slide 1
    let slide1 = slides3.createSlide({
        basepath: "https://lechwinter.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
        pan: -10
    },{
    	headline : "Mainproject: Lech",
      	description : "Lech - Winter",
      	photographer : "Rene",
      	location : "Lech am Arlberg | 47°13'N 10°08'",
      	facebookButtonLink: "https://www.facebook.com/lechzuers/photos/a.10157076246188447/10157076247643447/?type=3&theater"
    });

    //Subslide 1 - 1
    let slide1_1 = slide1.createSubslide({
        basepath: "https://lechsommer.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
       	pan: -10
      },{
    	headline : "Mainproject: Lech",
      	description : "Lech - Summer",
      	photographer : "Rene",
      	location : "Lech am Arlberg | 47°13'N 10°08'",
    });

    //Subslide 1 - 2
    
    let slide1_2 = slide1.createSubslide({
        basepath: "https://lechbynight.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
       	pan: -10
      },{
    	headline : "Mainproject: Lech",
      	description : "Lech - Night",
      	photographer : "Rene",
      	location : "Lech am Arlberg | 47°13'N 10°08'",
    });
    
    //Slide 2
    let slide2 = slides3.createSlide({
        basepath: "https://burgiswinter.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
        pan: -10
      },{
    	headline : "Customer Project: Burgis",
      	description : "Burgis - Winter",
      	photographer : "Rene",
    });
   
    //Subslide 2 - 1
    let slide2_1 = slide2.createSubslide({
        basepath: "https://burgissommer.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
       	pan: -10
      },{
    	headline : "Customer Project: Burgis",
      	description : "Burgis - Summer",
      	photographer : "Rene",
    });
    //init slides3
    slides3.init()
  </script>
</body>
</html>

Revision #12
Created Tue, Apr 27, 2021 1:15 PM by Jonas
Updated Wed, Oct 6, 2021 7:56 AM by Jonas

API [EN] | Slides3

Getting Started

Creating the Homeslide

Adding content to the Homeslide

Add a Headline

Add some Text

Add custom Elements *EXPERIMENTAL*

Add a Logo

Creating Slide

Adding Content to a Slide

Adding Buttons

Adding a Headline

adding a Description

adding a Photographer

adding a Location

adding the Facebook share Button

creating Subslides

About us

Adding Content to "About us"

Adding a Headline

Adding a caption

Adding an image

Adding a Paragraph

Adding Partners

General Settings

Screenshot Studio Button

Tour loading

Initialize Slides

Example

Add custom Elements EXPERIMENTAL