Problem with Javascript

[tjs (D)]

Hi there,

I am trying to run the following as part of a page in Rapidweaver. This is the source page I have - this all runs fine as a standalone page:

<title>Traffic Jam Studio - 360 Photo - 32 Steps</title>

<script src="./modelook_files/jquery.min.js"></script>
<link rel="stylesheet" href="./modelook_files/jquery-ui.css">
<script src="./modelook_files/jquery-ui.min.js"></script>
<script src="./modelook_files/modelook.js"></script>

This runs fine as a standalone page: http://trafficjamstudio.com/product360s/32/

I am using stacks and foundation.

I add the following to the javascript tab:

<script src="http://trafficjamstudio.com/360/modelook_files/jquery.min.js"></script>
<script src="http://trafficjamstudio.com/360/modelook_files/jquery-ui.min.js"></script>
<script src="http://trafficjamstudio.com/360/modelook_files/modelook.js">
</script>
<link rel="stylesheet" href="http://trafficjamstudio.com/360/modelook_files/jquery-ui.css">

<script>
$(function () {
	$(".modelook").modelook({
		drawMethod: "singleCanvas",
		serialNumber: "lmvw5-rqco-5y0hm-t1hw-79c09",
		imagesUrlSchema: "http://trafficjamstudio.com/360/images/<width>x<height>/<element>.jpg",
		imagesXCount: 32,
		imagesYCount: 1,
		autoLoad: true,
		autoSpin: true,
		presentation: {
			width: 500,
			height: 503,
			singleTurnTime: null,
			bounceX: false
		},
		interface: {
			show: true,
			zoomButton: true,
			zoomScroll: true
		},
		zoom: { easing: true },
		playInitialSpeed: 0.3,      
		imagesSizes: [
			[500, 503], [900, 906], [1668, 1679]
		],
		beforeUrlMaskElement: function (nr) {
			var n = 4;
			return Array(n - String(nr).length + 1).join('0') + nr;
		}

	});
});

I then add this to the html stack:

This all works fine when I preview it in rapidweaver - I can see the product and rotate it etc. When I upload this to our site, it does not seem to load the javascript: http://trafficjamstudio.com/360/index.php

I know it works fine as the standalone page works ok plus it works in preview mode. I just do not know what I am doing wrong.

I’d appreciate any ideas as to why this does not work.

Thanks in advance for any tips.

D

[jabostick (Jason Bostick)]

I don’t have a solution for you, but the page inspector shows a couple of errors. One being that the jQuery version is too old for ‘MODElook’ to run. Then the next couple of javascript errors are related to not being able to find ‘MODElook’.

Sorry I can’t be of much help other than to maybe check with the developers of that code regarding the jQuery version being used?

[isaiah (Isaiah Carew)]

There is a script tag inside a script tag.

This is because you’ve included the script tag inside of the JS-tab. The content you put into the JS-tab will be wrapped in a script tag automatically.

As @jabostick says, there are several errors in the JS console when you load the page. The first thing you have to learn when using code – is how to debug.

So going forward you will probably want to learn how to open the developer window in your preferred browser, and check out the errors in the Console tab first thing.

Good luck and happy coding.

[tjs (D)]

Thanks to both of you. I’ll find out how to open the console tomorrow morning when I’m back:) I’ll relieve the multiple script tags too!