Question

So I have read other peoples posts regarding this issue and still cannot get mine to work no matter how I organize it, so anyway.

I have essentially a gallery with a slider and a div in which I want to replace content, at the moment only the slider works. Here is what I have in my head

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>

So the first on is obviously my jquery call and then the next to are for the slider that I did not create but had found online.

Then in my page I have the following code to call this up,

<div id="biocontent">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit nec sem iaculis vitae laoreet sem convallis. Donec sed lorem ante, quis fermentum nisl. Nullam adipiscing fermentum rhoncus. Aenean dui lectus, condimentum sed aliquet a, euismod vitae dui. Donec tempus faucibus tortor, feugiat fringilla nibh posuere eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a elit ut quam laoreet venenatis. Proin pharetra semper interdum. Phasellus porttitor imperdiet libero. Aenean ultricies rhoncus metus eget semper.
<br /><br />
Morbi rutrum ornare tortor, quis aliquam felis commodo et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed justo mauris, congue nec porttitor non, vehicula sed nisi. Praesent ultrices euismod massa, sit amet semper nisi elementum sit amet. Sed ut facilisis erat. Sed vestibulum ullamcorper magna, id euismod mauris posuere id. Aenean ac euismod mauris. Aliquam non mi ac sapien commodo adipiscing. Suspendisse nec felis a est convallis scelerisque. Mauris tempus pharetra euismod.

    </div>

    <div id="tS2" class="bioworkscroller">
        <div class="bioscollerContainer">
            <div class="bioscoller">

        <a href="testvid.html"><img src="img/thumbs/img3.jpg" /></a>
        <a href="#"><img src="img/thumbs/img4.jpg" /></a>
        <a href="#"><img src="img/thumbs/img5.jpg" /></a>


            </div>
        </div>
<a href="#" class="bioscollerPrevButton"></a>
<a href="#" class="bioscollerNextButton"></a>
    </div>

and then below that I have all my javascript for the ajax call and slider,

   (function($) { 
   $(document).ready(function(){   
$("#links a").bind("click", function(e){ 
    e.preventDefault();
    var pageLocation = $(this).attr("href");
   $.ajax({ 
    url: pageLocation, 
    success: function(data){ 
        $("#biocontent").html(data); 
    },
    dataType : "html"
     });
});
}); })(jQuery)
jQuery.noConflict(); 
(function($){
window.onload=function(){ 
$("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
$("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
$("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
 }
 })(jQuery);

I have the ajax switch working in its own file without the slider, but cannot get them both to work, I feel like this has something to do with the ‘jQuery.noConflict()’ call but cannot figure out how to get around this, when I run it in in the javascript console no errors come up.

Any help will be greatly appreciated

Answer 1

Since $(document).ready is a much better wrapper for window.onload remove this and pack both in one doc.ready.

(function($) { 
$(document).ready(function(){   
      $("#links a").bind("click", function(e){ 
         e.preventDefault();
         var pageLocation = $(this).attr("href");
         $.ajax({ 
              url: pageLocation, 
              success: function(data){ 
              $("#biocontent").html(data); 
           },
           dataType : "html"
         });
   });

   $("#tS1").thumbnailScroller({ 
       scrollerType:"hoverAccelerate", 
       scrollerOrientation:"horizontal", 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:800, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });

   $("#tS2").thumbnailScroller({ 
       scrollerType:"clickButtons", 
       scrollerOrientation:"horizontal", 
       scrollSpeed:2, 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:600, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });
   $("#tS3").thumbnailScroller({ 
       scrollerType:"hoverPrecise", 
       scrollerOrientation:"vertical", 
       scrollSpeed:2, 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:800, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });


}); 
})(jQuery)

I don’t see a reason to use jQuery.noConflict(), or are you using any non jQuery Scripts in your page?