JQuery Cycle Plugin just doesn't work

Question

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!!

Sparky · Accepted Answer · 2012-10-12T22:59:39.373

2

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
});

edited Oct 12 '12 at 22:59

answered Oct 12 '12 at 22:36

Sparky

98,165
25
199
285

I was able to use it fine as the OP had it. He actually has a syntax error as described in my answer. – Abdullah Jibaly Oct 12 '12 at 22:51
@AbdullahJibaly: When you use the download link as a CDN, some browsers, like Webkit, see the wrong mime-type and attempt to download the file. Using the Github download link in place of a CDN is a very bad thing to do, even if it works in certain browsers. – Sparky Oct 12 '12 at 22:53
True, but it's not his problem in this case. (He just copied it that include from the plugin author's example). – Abdullah Jibaly Oct 12 '12 at 22:54
The error is: `Resource interpreted as script but transferred with MIME type binary/octet-stream`. – Sparky Oct 12 '12 at 22:56
That example is right here: http://jquery.malsup.com/cycle/basic.html – Abdullah Jibaly Oct 12 '12 at 22:56
What you're seeing is actually a warning, not an error. The browser correctly interpreted it as a script but it's letting you know that the MIME type set by the server was wrong. – Abdullah Jibaly Oct 12 '12 at 22:57
@AbdullahJibaly, I see. +1 on your posted answer. – Sparky Oct 12 '12 at 22:58

score 1 · Answer 2 · answered Oct 12 '12 at 22:49

1

You need to put braces around the parameters passed to cycle:

$(document).ready(function() {
    $('.bannerRotator').cycle({
        fx:    'fade', 
        speed:  3000
    });
});

JSBin example here: http://jsbin.com/oruwav/2/

answered Oct 12 '12 at 22:49

Abdullah Jibaly

53,220
42
124
197

JQuery Cycle Plugin just doesn't work

2 Answers2