Hi good folk of Stackoverflow. I have a problem that's doing my head in. I have a Js file that loads images into my web app. When I test it on localhost, it loads the images just fine. I also have a "ticking" noise that loads from it that works locally. My problem arises when I deploy everything to my production server. My images dont display and my ticking noise doesn't play. I am hoping one of you can point me in the right direction as to why this is happening.
How my folder is setup
Here is my .js file:
// Super Wheel Script
jQuery(document).ready(function($){
$('.wheel-with-image').superWheel({
slices: [
{
text: 'images/1.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#f3971c",
},
{
text: 'images/2.png',
value: 1,
message: "Commercial Property Finance Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/3.png',
value: 1,
message: "Agriculture Lend Pillar",
background: "#f3971c",
},
{
text: 'images/4.png',
value: 1,
message: "Structured Finance Solutions Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/5.png',
value: 1,
message: "Commercial Property Finance Lend Pillar",
background: "#f3971c",
},
{
text: 'images/6.png',
value: 1,
message: "ABF & FML Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/7.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#f3971c",
},
{
text: 'images/8.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/9.png',
value: 1,
message: "Agriculture Lend Pillar",
background: "#f3971c",
},
{
text: 'images/10.png',
value: 1,
message: "Structured Finance Solutions Lend Pillar",
background: "#00a4aa",
}
],
text : {
type: 'image',
color: '#CFD8DC',
size: 25,
offset : 10,
orientation: 'h'
},
line: {
width: 0,
color: "#78909C"
},
outer: {
width: 10,
color: "#e6e6e6"
},
inner: {
width: 10,
color: "#78909C"
},
marker: {
background: "#ff0000",
animate: 1
},
width: 700,
selector: "value",
});
var tick = new Audio('media/tick.mp3');
$(document).on('click','.wheel-with-image-spin-button',function(e){
$('.wheel-with-image').superWheel('start','value',1);
$(this).prop('disabled',true);
});
$('.wheel-with-image').superWheel('onStart',function(results){
$('.wheel-with-image-spin-button').text('Spinning...');
});
$('.wheel-with-image').superWheel('onStep',function(results){
if (typeof tick.currentTime !== 'undefined')
tick.currentTime = 0;
tick.play();
});
$('.wheel-with-image').superWheel('onComplete',function(results){
//console.log(results.value);
if(results.value === 1){
swal({
type: 'success',
title: "A question about...",
html: results.message
});
}else{
swal("Oops!", results.message, "error");
}
$('.wheel-with-image-spin-button:disabled').prop('disabled',false).text('Spin');
});
});