I am new to JQuery and thought I'd give it a go instead of a flash rotator as a banner to the website I am creating, my problem is that I have all the code needed from the http://jquery.malsup.com/cycle/basic.html, which i took the source code, but for some reason, in any browser, the images just do not rotate, here is my code:
<title>HOME</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="external/cascade/main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Home Care Repair">
<?php include 'external/scripts/main.php'; ?>
<style type="text/css">
.bannerRotator { height: 250px; width: 600px; margin: 0px; overflow: hidden;}
.bannerRotator img { padding: 0px; border: 0px solid #ccc; background-color: transparent; border-radius: 10px; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.bannerRotator').cycle(
fx: 'fade',
speed: 3000
)
});
function handleSelect(popLinks)
{
window.location = popLinks.value+".php";
};
</script>
<!-- CSS Support for Internet Explorer -->
<!--[if lte IE 9]>
<link rel=stylesheet href="external/cascade/internetExplorerCss/ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="headerContainer">
<div id="navigation" style="width: 818px;">
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="index.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png'); border-left: 1px solid #ccc;">Home</a></li>
<li class="topmenu"><a href="heating.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Heating</a></li>
<li class="topmenu"><a href="plumbing.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Plumbing</a></li>
<li class="topmenu"><a href="electrical.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Electrical</a></li>
<li class="topmenu"><a href="whyUs.php" style="width: 120px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Why Choose Us</a></li>
<li class="topmenu"><a href="faq.php" style="width: 85px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">FAQs</a></li>
<li class="topmenu"><a href="adviceHelp.php" style="width: 119px; height: 5px; line-height: 9px; background-image: url('../images/navigation/bgNav.png');">Advice and Help</a></li>
</ul>
</div>
<div id="header">
<a href="index.php" border="0"><img src="../images/header/title.png" alt="Home Care Repair Title Image" /></a>
</div>
<div id="headerNavigation">
<a href="index.php"> > Home</a> <a href="contactUs.php"> > Contact Us</a>
</div>
</div>
<div id="mainContent" style="background-image: url(../images/mainContent/mainContent.png); padding: 10px; width: 601px; height: 641px;">
<div class="bannerRotator">
<img src="../images/bannerRotater/shrek(1).jpg" width="600" height="250" />
<img src="../images/bannerRotater/contact(2).jpg" width="600" height="250" />
<img src="../images/bannerRotater/old(3).jpg" width="600" height="250" />
<img src="../images/bannerRotater/digital(4).jpg" width="600" height="250" />
</div>
MAIN CONTENT HERE
</div>
<div id="sideBar">
<div id="comboBox" style="background-image: url(../images/sidebar/comboBox.png);">
<select name="popLinks" onchange="javascript:handleSelect(this)" style="margin-top: 55px; margin-left: 35px;">
<option value="#">--------- Select an Option ---------</option>
<option value="contactUs">Contact Us</option>
<option value="faq">FAQs</option>
<option value="heating">Heating</option>
<option value="plumbing">Plumbing</option>
<option value="electrica">Electrical</option>
</select>
</div>
Can anyone help me because I am very stumped!!
Your problem is here:
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
You can't directly link to the Github "download" of a file and expect it to behave like a CDN. When you go to the URL, the browser tries to download the file. You should be seeing an error or warning in your console.
Unless a CDN link is provided for that purpose, you are expected to download the file and upload it to host on your own server.
The includes should look something more like this:
<script type="text/javascript" src="http://myDomain/myplugins/jquery.cycle.all.latest.js"></script>
or something like this:
<script type="text/javascript" src="/myplugins/jquery.cycle.all.latest.js"></script>
You're also missing braces within your code as follows:
$('.bannerRotator').cycle({
fx: 'fade',
speed: 3000
});