"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!

Just curious what kind of display issues you had with Revolution in Chrome? Front end or manager? It's generally accepted that the Revo manager actually runs better in Chrome than anything else due to its fast JS handling — okyanet, Aug 06 '12 at 03:43
@okyanet The frontend output nothing, and only the initial starter page was visible on the backend making it impossible to add any resources or change anything related to the site. Only the top menu was visible throughout the backend after the first page. I checked numerous sources and could not find a fix that worked for me. — Scott P, Aug 09 '12 at 16:49
And for some strange reason, it's now working fine at the back end, though there's nothing visible in the front end (though i suspect this may be default for a fresh installation). — Scott P, Aug 09 '12 at 17:03
Yeah that's default for a new install. MODX gives you a blank canvas to start off with. — okyanet, Aug 10 '12 at 02:27

score 1 · Accepted Answer · answered Aug 05 '12 at 10:19

"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

score 0 · Answer 2 · answered Aug 05 '12 at 15:14

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).

"lofslidernews" header issue

2 Answers2