My image gallery (slider) stopped working

Question

Hi, I am using the Florance theme and it comes with a sliding image gallery using jquery and jcarousellite. Somehow it stopped working (it was ok 2 days) and error (object does not support this property or method) points to the script. The site in question is www.happystay.net

Please, i need some help. Thanks in advance.

Answer 1

I noticed you're using jQuery.noConflict() right before you declare the Carousel. Is there anything in particular on the page that you're trying to avoid conflict with?

I used Safari's javascript console to run the carousel without the jQuery.noConflict() part, and it seemed to kick into gear. Try editting the script to run using the plain old jQuery $ sign and see what happens.

Edit: Here is what the code might look like if you were to remove the noConflict.

<script type="text/javascript">
$(document).ready(function(){
    $(".mygallery").jCarouselLite({
        btnNext: ".nextb",
    btnPrev: ".prevb",
    visible: 1,
    easing: "backout",
    auto: 800,
    speed: 1500
  });
});
</script>

Generally speaking there is no reason to use noConflict unless another script is competing for the $ variable. A common example is if you are trying to use jQuery and MooTools on the same website.

Answer 2

please do this.... after line that has this <script type='text/javascript' src='http://www.happystay.net/wp-includes/js/jquery/jquery.js?ver=1.3.2'&gt;&lt;/script&gt;

put <script type="text/javascript"> var $jx = jQuery.noConflict(); </script>

it should now look like this... on line 17

<script type='text/javascript' src='http://www.happystay.net/wp-includes/js/jquery/jquery.js?ver=1.3.2'&gt;&lt;/script&gt;
<script type="text/javascript"> $jx = jQuery.noConflict(); // note i added this line</script>  
<script type='text/javascript' src='http://www.happystay.net/wp-content/themes/Florance/js/jquery.easing.1.1.js?ver=2.9.2'&gt;&lt;/script&gt; 
<script type='text/javascript' src='http://www.happystay.net/wp-content/themes/Florance/js/jcarousel.js?ver=2.9.2'&gt;&lt;/script&gt; 
<script type='text/javascript' src='http://www.happystay.net/wp-content/themes/Florance/js/jquery.mousewheel.js?ver=2.9.2'&gt;&lt;/script&gt; 
<script type='text/javascript' src='http://www.happystay.net/wp-content/themes/Florance/js/cufon.js?ver=2.9.2'&gt;&lt;/script&gt; 
<script type='text/javascript' src='http://www.happystay.net/wp-content/themes/Florance/js/Liberation_Serif_400.font.js?ver=2.9.2'&gt;&lt;/script&gt; 

then line 246 should now be this...

<script type="text/javascript"> 
$jx(document).ready(function(){
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
        btnPrev: ".prevb",
      visible: 1,
      easing: "backout",
      auto: 800,
       speed: 1500
    });

});
</script> 

Hope it fixes it....
demo here
explanation here

edit:

ok, so it's a wordpress... hmmmm how about in the php script add

echo "<script type='text/javascript'> var $jx = jQuery.noConflict();</script>";

after

wp_enqueue_script('jquery');