0

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

3 Answers 3

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?

5
  • I don't see the need for the self-executing jQ wrapper, either; I'd be happy to be wrong and learn the reasoning for it, though. Oct 26, 2011 at 20:43
  • 1
    This actually is considered best practice, since you scope everything inside its own namespace. A good description can be found here. Oct 26, 2011 at 20:47
  • Thanks for the link, @FloydThreepwood -- I've been using object literals for namespacing, but hadn't actually considered scoping jQuery with an anonymous function. Hope I can grok it and improve my practices. Oct 26, 2011 at 20:52
  • Worked like a charm thanks, I try to use the noconflict as much as possible otherwise ill forget when I add something else and then get frustrated when I cant pinpoint it. Oct 26, 2011 at 21:46
  • So this worked however I just ran into an issue where the scroller only loads the first image, why would that be? Oct 26, 2011 at 23:36
0

Try this:

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

});
0

Without knowing if you're calling the scroller correctly, there are still a few problems to solve before going much deeper:

  1. I may be wrong, but I don't think you need the self-executing jQuery wrapper (module pattern?) [update: You don't NEED it, but as per Floyd's response it may be a best-practice pattern you'll want to use]
  2. You shouldn't need noConflict, since you only have jQuery on the page, no other framework
  3. You have a window.onload call. But this is (sort of) what document ready is already doing. To be more accurate, there IS a difference (and jQuery can do window ready as well), but for your purposes you shouldn't need it. The document ready will be not only enough but better.

As far as I can see, this is what you intend to be doing:

$(document).ready(function(){   // or shorthand version thereof

  $("#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 
  });
});

On a side note: you can greatly reduce repetition by passing a map of common parameters into each of your thumbnailScroller() calls. In the event that scrollers might have some different behaviour, you can use .extend to join the maps (base and extended) together.

1
  • Where do you see 1.? Isn't it the module pattern? Oct 26, 2011 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.