“lofslidernews” header issue

Question

Good morning guys!

I recently picked up MODx Evolution 1.0.6 (as Revolution was having display issues in Chrome) and went about building my template in Photoshop. I got the design down, as well as the slicing and export, and even built in a "news slider" (lofslidernews). I got it all functioning as intended on the test site (both local and remote), but when i came to integrate it into my MODx installation as a template (which is also a test site while i build the whole site itself), i couldn't get the slider working properly.

First of all, here's what the site SHOULD look like - Working Design.

However, here's what i've got when moved to MODx - Failing MODx Design - Sadface.

NOTE: Although the main content on the first link mentions Joomla!, it's not a Joomla! related plugin or module, and works perfectly within standard script. The actual content of the slider (e.g. descriptions and such) lie within the page as standard HTML, though i'll likely move this to it's own chunk as development continues.

As you can see, in the first link (plain HTML and script) everything functions, but in the second link (MODx), the news slider holds at the loader and never progresses. I've verified all the files are in place (by using a html version of the same page in the same location, to which it loads as expected). Obviously, with the standard HTML version, i used script links within the header as snippets wouldn't be available.

I looked into snippets and believe i've got this correct, but as i'm new to the CMS, i'd like some verification and pointers;

<?php
$modx->regClientCSS("http://www.innuendo-eu.co.uk/modx/jQuery/lofslidernews/css/style4.css");
$modx->regClientStartupScript("http://www.innuendo-eu.co.uk/modx/jQuery/lofslidernews/js/jquery.js");
$modx->regClientStartupScript("http://www.innuendo-eu.co.uk/modx/jQuery/lofslidernews/js/jquery.easing.js");
$modx->regClientStartupHTMLBlock("<script type='text/javascript'>
 $(document).ready(function(){  
        // buttons for next and previous item                        
        var buttons = { previous:$('#jslidernews1 .button-previous') ,
                        next:$('#jslidernews1 .button-next') };
         $obj = $('#jslidernews1').lofJSidernews( { interval : 7500,
                                                easing          : 'easeInOutCubic',
                                                duration        : 500,
                                                auto            : true,
                                                maxItemDisplay  : 3,
                                                startItem:0,
                                                navPosition     : 'horizontal', // horizontal
                                                navigatorHeight : null,
                                                navigatorWidth  : null,
                                                mainWidth:980,
                                                buttons:buttons} );     
    });
</script>");
?>

Please note: For the sake of troubleshooting, i linked directly to the whole URL of the scripts, as opposed to local referencing (i.e. prefix with a ./).

The rest of the page loads as would be expected, but the loader stays there. If i remove the first line of regClientCSS, the page loads, but there's no formatting and of course, the news slider doesn't function due to the lack of formatting.

The creative freedom i could potentially have with MODx over Joomla! (my current CMS) is very appealing and i'm confident the good people of SO can help me on the way. Any help with getting this working (and any general tips for MODx even) would be greatly appreciated!

Answer 1

"SyntaxError: Unexpected token = in line 17" in console

Your line 17: "= $('#jslidernews1').lofJSidernews( { interval : 7500,"

Original line 17: "$obj = $('#jslidernews1').lofJSidernews( { interval : 7500,"

this extension for chrome is useful for the detection of such errors - https://chrome.google.com/webstore/detail/jafmfknfnkoekkdocjiaipcnmkklaajd

Answer 2

I couldn't figure out how to correct the fault that was shown with lofslidernews (of which Vasis answer helped me find the reason it wasn't working), and so i switched to the Orbit jQuery Slider instead. I did have to do some editing of the sample code featured on that page (i.e. file names for scripts and CSS have version numbers in them, while the documentation page doesn't show this) but i managed to get it all hooked up without a problem. I've accepted Vasis answer on the basis it answered the original question (specifically regarding why it wasn't working).