TypeError: jQuery(...).slicebox is not a function

Question

Ok so I'm trying to use slicebox on my website and I can't get it work. It gets loaded, I mean the module is there, the script goes into the page but nothing is really shown.

If I don't load it's own jQuery I get that jQuery is not defined AND TypeError: jQuery(...).slicebox. When I load it's jQuery I get "TypeError: jQuery(...).slicebox is not a function" error in console.

The jQuery not defined problem is from jQuery not being loaded before slicebox I gather, that's why enabling it loaded in the module or putting it manually before anything else fixes it. The other error is the main problem I guess.

I tried on my template and on protostar. Same thing. I have tried 3 different joomla extensions all based on the base slicebox code - all give me the same problem.

I have tried not loading jQuery other than the one from the module - ofc then my whole page goes into mess but the module still won't give me the slicebox. I have no problem with any other jQuery things on my website. Mostly I get the problem with $ so I change it to "(function($) { ... })(jQuery);". This time this trick didn't help.

I have looked around for answers but couldn't find anything that helps me.

Oh and if I go over to IE, it gives an error like this:

slicebox = jQuery( '#sb-slider' ).slicebox( {
                        onReady : function() {
                            $navArrows.show();$navDots.show();$shadow.show();                           },
                        orientation : 'v',
                        perspective : 1200,
                        cuboidsCount : 5,
                        cuboidsRandom : false,
                        maxCuboidsCount : 5,
                        disperseFactor : 0,
                        colorHiddenSides : '#222',
                        sequentialFactor : 150,
                        Speed : 600,
                        easing : 'ease',
                        autoplay : true,
                        interval: 3000,
                        fallbackFadeSpeed : 300,

                        onBeforeChange : function( pos ) {
                            $nav.removeClass( 'nav-dot-current' );
                            $nav.eq( pos ).addClass( 'nav-dot-current' );
                        }
                    } ),

(X) Object doesn't support property or method 'slicebox'

---

Any suggestions how to make this work? I'm really surprised because this consistently refuses to work while all other jQuery scripts I use work without a problem.

EDIT: I have done one more test. Switched between various templates trying to see how things change. And now I see that while in my own template and protostar I get the above errors with this module active, then if I switch to Beez3 then the page loads as just blank white page O_o. But when I turn off the module the page loads fine.

EDIT: Ok, so I've got some development here. I have removed everything else I got in the head section, chiefly two things seemed to cause trouble:

<jdoc:include type="head" />

and my main template.js which then started giving me "TypeError: $(...).tooltip is not a function" error after I removed jdoc head. The mainshen.js is a simple script I use so that buttons work fine in joomla frontend editing, it's copypasta from protostar:

(function($)
{
    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip()

        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $(".btn-group label:not(.active)").click(function()
        {
            var label = $(this);
            var input = $('#' + label.attr('for'));

            if (!input.prop('checked')) {
                label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
                if (input.val() == '') {
                    label.addClass('active btn-primary');
                } else if (input.val() == 0) {
                    label.addClass('active btn-danger');
                } else {
                    label.addClass('active btn-success');
                }
                input.prop('checked', true);
            }
        });
        $(".btn-group input[checked=checked]").each(function()
        {
            if ($(this).val() == '') {
                $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
            } else if ($(this).val() == 0) {
                $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
            } else {
                $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
            }
        });
    })
})(jQuery);

Then I added things like this to the head instead (just fishing so it's pretty random):

  <link rel="stylesheet" href="http://localhost/joomla/plugins/content/fastsocialshare/style/style.css" type="text/css" />
  <link rel="stylesheet" href="http://localhost/joomla/modules/mod_je_slicebox3d/css/slicebox.css" type="text/css" />
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" type="text/css" />
  <link rel="stylesheet" href="/joomla/media/jui/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="/joomla/media/jui/css/bootstrap-responsive.min.css" type="text/css" />
  <link rel="stylesheet" href="/joomla/media/jui/css/bootstrap-extended.css" type="text/css" />
  <link rel="stylesheet" href="/joomla/media/system/css/frontediting.css" type="text/css" />
  <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
  <script src="http://localhost/joomla/modules/mod_je_slicebox3d/js/modernizr.custom.46884.js" type="text/javascript"></script>
  <script src="http://localhost/joomla/modules/mod_je_slicebox3d/js/jquery.slicebox.js" type="text/javascript"></script>

  <script src="/joomla/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>

And now it works...

The question is now, what is going on here? And how can I make that slicebox work with mainshen.js (the one with tooltip) and <jdoc:include type="head" />? Where is the conflict here and how to solve it without gutting joomla?

Here's how my index.php looks in the template, and it worked so far: pastebin

Answer 1

I found it! I found the answer! Omg in the end it was so simple.

So yes, the problem was - I guess? - with two jQuery libraries being loaded.

jdoc:include type="head"

Gives me the jQuery v1.11.2.

While the code in mod_je_slicebox3d.php (the main php file of the slicebox module, which also contains the script I have mentioned in the question), wants to load a slightly different one:

http://code.jquery.com/jquery-latest.pack.js

so: jQuery v1.11.1

I have tried before to simply copy paste (just to see what happens) all from http://code.jquery.com/jquery-latest.pack.js to the jQuery I have in /joomla/media/jui/js/jquery.min.js with no positive results.

But now I figured, I need to do this the other way, so inside mod_je_slicebox3d.php I have instead changed this:

(Line 68)

if ($params->get('jQuery')) {$doc->addScript ('http://code.jquery.com/jquery-latest.pack.js');}

to this:

if ($params->get('jQuery')) {$doc->addScript ('/joomla/media/jui/js/jquery.min.js');}

and BANG! I works now. Works with jhead and with my custom template .js file all without a problem now :).

Hope this will be of some use to others who encounter this same issue.