JSFiddle - React, Tailwind, and code Playground
by kougiland
JavaScript
http://www.netmagazine.com/tutorials/create-interactive-street-view-jquery
Written by Severin Klaus from Hinderling Volkart, we decided to create a
site in the spirit of 360strasse.
So if you feel like making a website like ours, then do yourself a favor,
and go to the tutorial and start reading. You will then in no time be able
to create websites like this.
*/
var $videoImage, $win, activeCaseIndex, backgroundImage, body, casesContainer, casesHeight, casesIsActive, continueContainer, currentPosition, currentSrc, docu, fullHeight, highresTimeout, html;
var imageSeqLoader, isChrome, isMobile, isTouch, kathartCoordinates, map, MAXSCROLL, oldImageID, preloader, preloaderValue, scrollHeight, setScrollTop, shadow, targetPosition, videoContainer;
var windowHeight, windowWidth;
var suspendCaseCalculation = false;
var contents = [];
var lockedScrollPos = null;
var totalAmountOfImages = 3028;
var showPreloadUntilPercent = 10;
var bgImgWidth = 512;
var bgImgHeight = 320;
var loadCounterForIE = 0;
$(function() {
body = $('body');
docu = $(document);
html = $('html');
windowHeight = $(window).height();
windowWidth = $(window).width();
backgroundImage = $('.background-images > img');
shadow = $('#shadow');
continueContainer = $('#continue');
videoContainer = $('#video');
casesContainer = $('#cases');
preloader = $('#preloader');
preloaderValue = preloader.find('.value');
$win = $(window);
isTouch = 'ontouchstart' in window;
isChrome = navigator.userAgent.indexOf('Chrome') > 0;
MAXSCROLL = totalAmountOfImages * 10;
isMobile = $(document).width() < 768;
$videoImage = $('.background-images > img');
if(isMobile || !isCanvasSupported()) {
location.href = 'http://www.kathart.dk/notsupported/notsupported.html';
}
else {
initVideo();
initNavigation();
initEmails();
initGoogleMap();
$('.logo').click(function(e) {
...