CODEWITHSUNDEEP
javascriptjqueryslider
LaurenWomack
LaurenWomack

Reputation: 13

Coin Slider: $ is not defined

I'm trying to implement Coin Slider (http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/) on my website. However, I can't get it to work. Firefox error console brings up '$ is not defined'.

I only really know HTML and CSS and thought this would just be a case of copying and pasting code. If it's something simple to fix that would be great, but I may have bitten off more than I can chew!

Thanks for any help.

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="coin-slider.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../style.css" />
<style type="text/css">
</style>
    </head>
    <body>
    <div id="wrapper">
<!-- Begin Content -->
     <div id="content">
    <div id='coin-slider'>
     <a href="" target="">
    <img src='../portfoliopages/Funpets/splashpresliced.jpg' >
      <span>
      Description for img01
    </span>
    </a>
    <a href="" target="">
      <img src='../portfoliopages/Funpets/eggprespliced.jpg' >
     <span>
     Description for imgN
     </span>
     </a>
    <a href="" target="">
    <img src='../portfoliopages/Funpets/baby.jpg' >
      <span>
      Description for img01
    </span>
    </a>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#coin-slider').coinslider({ width: 550,
    height: 220,
    spw: 7,
    sph: 5,
    delay: 3000,
    sDelay: 30,
    opacity: 0.7,
    titleSpeed: 500,
    effect: '',
    navigation: true,
    links : true,
    hoverPause: true });
    });
    </script
    </div>
    </div>
     <!-- End Content -->
    </div>
    </div>
<!-- Begin Footer --></div> </div>
     <!-- End Footer -->
    </body>
    </html>

Upvotes: 0

Views: 925

Answers (3)

Marc Uberstein
Marc Uberstein

Reputation: 12541

Make sure you have no 404 errors while loading the page. Enable FireBug in firefox and go the the Net setting, reload the page and check your http responses (Or any other Debugger/Inspect tool)

You can try replacing your script source to full URLs to test if your code is working :

For Jquery : http://workshop.rs/projects/coin-slider/jquery-1.4.2.min.js

For Coin Slider : http://workshop.rs/projects/coin-slider/coin-slider.min.js

I got the full urls from the Coin Slider example/demo page. You can open the links and download it to your local machine.

Upvotes: 0

Dave Hogan
Dave Hogan

Reputation: 3221

The error $ is not defined is typical when the page cannot find jQuery or jQuery is being referenced before it's loaded. In your instance jQuery is being loaded first so I'd assume your path to jQuery is wrong. Double check the path to jquery and that you can browse to the jquery JS file jquery-1.4.2.js

Upvotes: 1

jakee
jakee

Reputation: 18566

That means the jQuery variable $ is not defined. I guess you just copypasted without downloading jQuery.

This particular piece of code requires you to have downloaded jQuery, named the file jquery-1.4.2.js and locatde it in the same place as this file. You should get the coin-slider.min.js there as well. You can probably find it attached to the tutorial.

Upvotes: 1

Related Questions