Could not able to import external Javascript file
Question
I'm kind of new to javascript programming, I am trying to build a basic image slideshow using a plugin called Cycle (jQuery plugin), I am trying to import this plugin to my code, but for some reason it doesn't work, I've included the jQuery library and it works just fine
This is the HTML (+ jQuery in the <head> tag):
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery</title>
<script src="scriptCycle.js"></script> /* This line doesn't work */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function(){
$("#slideshow").css("overflow", "hidden"); /* This line works just fine */
$("ul#slides").cycle({ /* This is from the Cycle plugin (scriptCycle.js) - doesn't work */
fx: "fade",
pause: 1,
prev: "#prev",
next: "#next"
});
$("#slideshow").hover(function() { /* This line works just fine */
$("ul#nav").fadeIn();
},
function() {
$("ul#nav").fadeOut();
});
});
</script>
</head>
<body>
<div id="container">
<div id="slideshow">
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
<ul id="slides">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
This is the CSS (style.css):
body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}
body {
background: #FFF
}
#container {
width: 1095px; margin: 40px;
position: relative;
}
#slideshow {
width: 800px; height: 400px; padding: 15px 0 0 12px;
background: #FFF;
overflow: scroll;
position: relative; z-index: 5;
}
div#slideshow ul#nav {
display: none;
list-style: none;
position: absolute; top: 210px;
}
div#slideshow ul#nav li#prev {
position: absolute;
left:30px;
}
div#slideshow ul#nav li#next {
position: absolute;
left:740px;
}
div#slideshow ul#nav li a {
display: block; width: 24px; height: 35px; text-indent: -9999px;
}
div#slideshow ul#nav li#prev a {
background:url(leftArrow.png);
}
div#slideshow ul#nav li#next a {
background:url(rightArrow.png);
}
div#slideshow ul#slides {
list-style: none;
}
div#slideshow ul#slides li {
margin: 0 0 20px 0;
}
There is 0 room for error with the file path, they can be found alongside one another in the same directory, What am I missing here guys?
2 answers
solution1
2 2015-04-30 23:02:15
Put <script src="scriptCycle.js"></script> AFTER the line that loads jquery.min.js , since you said it is a plugin for it. It's probably erring out.
solution2
0 2015-04-30 23:06:32
jquery should be placed before your custom script all scripts added to your index will work in order from top to bottom so its always calls the library you are trying to initiate first.
just change it to this below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="scriptCycle.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.