ResponsiveSlides.js slideshow not being called

Question

I am trying to add a responsiveSlides.js slideshow to a website I am working on (here), but the method doesn't seem to be being called. I'm guessing it is just a syntax error, but I can't for the life of me find it.

In the head of the site, I have

<link rel="stylesheet" type="text/css" href="{stylesheet=home/responsiveslides}" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://stonewatercc.com/js/responsiveslides.min.js"></script>

<script type="text/javascript">
  $(function () {
    $('#slider1').responsiveSlides();
  });
</script>

and the code containing the images for the slideshow (in the body) is

<ul class="rslides" id="slider1">
    <li><img src="{site_url}images/stonewatercc/slider/stonewater_pics01.jpg" alt=""></li>
    <li><img src="{site_url}images/stonewatercc/slider/stonewater_pics02.jpg" alt=""></li>
    <li><img src="{site_url}images/stonewatercc/slider/stonewater_pics03.jpg" alt=""></li>
</ul> 

I can put an alert before the line '$('slider1').responsiveSlides();', but if I put it after that line, it doesn't get called. I can type either url into the browser to get to the respective .js files.

I would really appreciate help with this since it is driving me mad knowing that it is probably something quite simple that I am just missing...

Answer 1

When you call it, you should use this:

(function ($) {
  $('#slider1').responsiveSlides();
}(jQuery));

This namespaces jQuery to this particular function, which will ensure you don't have any conflicting libraries, such as Prototype which I see is loaded.

To help with trouble shooting an issue of this nature you should first make sure you have jQuery by typing jQuery in your console. In the case of your site, it is there:

Next, try to get the object from the console: $('#slider1'). In doing so, you can see that it returns null:

Obviously there is something wrong because we can see id="slider1" by viewing source.

The final step I took was to make sure it was correct (I have never seen it $(function()...), so I typed directly into the console: (function($) { $('#slider1').responsiveSlides() }(jQuery)) and voila, your slideshow started.