I have the following content in an HTML file:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<script src="java_script.js"></script>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="vertical_slider.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<div id="wrapper">
<div id="carousel-wrapper">
<img id="shadow" src="img/gui/carousel_shadow.png" />
<div id="carousel">
<span id="pixar"><img src="img/large/pixar.jpg" /></span>
<span id="bugs"><img src="img/large/bugs.jpg" /></span>
<span id="cars"><img src="img/large/cars.jpg" /></span>
<span id="incred"><img src="img/large/incred.jpg" /></span>
<span id="monsters"><img src="img/large/monsters.jpg" /></span>
<span id="nemo"><img src="img/large/nemo.jpg" /></span>
<span id="radar"><img src="img/large/radar002665.png" /></span>
<span id="rat"><img src="img/large/rat.jpg" /></span>
<span id="toystory"><img src="img/large/toystory.jpg" /></span>
<span id="up"><img src="img/large/up.jpg" /></span>
<span id="walle"><img src="img/large/walle.jpg" /></span>
</div>
</div>
<div id="thumbs-wrapper">
<div id="thumbs">
<a href="#pixar" class="selected"><img src="img/small/pixar.jpg" /></a>
<a href="#bugs"><img src="img/small/bugs.jpg" /></a>
<a href="#cars"><img src="img/small/cars.jpg" /></a>
<a href="#incred"><img src="img/small/incred.jpg" /></a>
<a href="#monsters"><img src="img/small/monsters.jpg" /></a>
<a href="#nemo"><img src="img/small/nemo.jpg" /></a>
<a href="#radar"><img src="img/small/radar002665resized.jpg" /></a>
<a href="#rat"><img src="img/small/rat.jpg" /></a>
<a href="#toystory"><img src="img/small/toystory.jpg" /></a>
<a href="#up"><img src="img/small/up.jpg" /></a>
<a href="#walle"><img src="img/small/walle.jpg" /></a>
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</body>
</html>
Including both css and javascript files, with java_script.js and vertical_slide.css being called. The javascript works fine if inserted directly into the HTML file, but once moved to a separate file (java_script.js), it stops working properly. Images are not displayed correctly and the functionality is broken.
Upon inspecting elements, there are no errors shown, yet the script is not functioning as intended.
The javascript file contains:
(function test() {
('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: false,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll'
}
});
('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
('#thumbs a').click(function() {
('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
('#thumbs a').removeClass('selected');
(this).addClass('selected');
return false;
});
});
The function has been named "test", whereas previously it was anonymous. All functions that included "$" were causing errors and were therefore removed.
The accompanying CSS file looks correct without any obvious issues. It seems like the problem lies specifically within the javascript file when moved externally from the HTML document.