JQuery NoConflict wrapping not working on this file

Question

I have a simple javascript file that I need to wrap in JQuery NoConflict but I cannot seem to get it to work. It is a rotating logo wall.

The page is at /t10.html

I have tried implementing the jQuery as variable $j, then anywhere in the script that calls $ I have replace with $j. This works for another script on the site but for some reason it does not work with this script. You can view and download both the CSS and JS files at /t10.html

Tried below, but to no avail.

$j = jQuery.noConflict(true);
$j(document).ready(function(){

Also tried wrapping the external JS file like the second answer says to do at How to be a jQuery no.conflict expert?. In fact I've tried all of these solutions on that page and still cannot get it to work.

Help!

I cannot put this on the site until I get this wrapped but what I've tried isn't working.

The code that calls the external JS file is below:

<link rel="stylesheet" href="/js/brandsbox/brandsbox.css" type="text/css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/brandsbox/brandsbox.js"></script>

<script type="text/javascript">

    $(document).ready(function(){ 

        $.brandsBox.embed('#slider_container', {

            "collection": "/em/customer-wall/collection.xml",
            "cols": 2,
            "rows": 5,
            "scrollingTransitionSpeed": "slow",
            "scrollingDelay": 2000,
            "scrollingMode": "full",
            "startOpacity": 1,
            "hoverOpacity": 1

        });

    });
</script>

<div id="slider_container" style="width: 218px; height: 500px;"></div>

---

I tried wrapping it like DoubleU23 suggested but the code did not fire (see same domain name but file /t11.html):

<script type="text/javascript">

// closure
(function(window, $, undefined){

  // shorthand for $.ready();
  $(function() {
    // put your code here


        $.brandsBox.embed('#slider_container', {

            "collection": "/em/customer-wall/collection.xml",
            "cols": 2,
            "rows": 5,
            "scrollingTransitionSpeed": "slow",
            "scrollingDelay": 2000,
            "scrollingMode": "full",
            "startOpacity": 1,
            "hoverOpacity": 1

        });

    });

})(window, jQuery.noConflict());
</script>

Answer 1

While @Bramar's and DoubleU23's answers are both technically correct, neither one worked on this script when I had it on the live site. Both solutions work on their own on my test page, meaning the script still fired and did its thing, but neither worked when put on the Magento page.

The issue is with Magento's Prototype JS library interfering with all jQuery scripts on the site. The other jQuery scripts have been fixed by outside developers but I was unable to use them for this project.

The final solution was to create an iframe with the code inside of it and to place it on my Magento template page. This isolated the JS to the iframe and caused on conflicts with Magento items such as the Add To Cart button.

Lesson learned: don't write off iframe's entirely. They may be useful in very limited and unique situations.

Answer 2

// closure
(function(window, $, undefined){

  // shorthand for $.ready();
  $(function() {
    // put your code here
  });

})(window, jQuery.noConflict());

---

i recommend to always use closures (this wrapper function you're talking about) you can read more on this topic by the keywords JavaScript Closures