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

  • Which extension are you using? Or are you trying to develop your own custom module? – fruppel Aug 27 '15 at 7:37
  • If this is a 3rd party extension, I really do hope they haven't used <script> tags to import the JS file – Lodder Aug 27 '15 at 7:43
  • I'm using "JE 3D SliceBox" link but that's the 4th I have tried. I have also tried, Vina Slicebox Image Slider , Hot Slicebox and Skyline Slicebox Slider. I didn't look at console errors for each of them but each of them didn't work and they all use the core code that is jquery.slicebox.js and modernizr.custom.46884.js. – Borg777 Aug 27 '15 at 10:54

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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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