I am new with CMS Made Simple 1.4.1 (and no knowledge of Smarty) and I am doing some tests to know if this is the correct tool form me.
I'm trying to insert and use a javascript gallery (http://docs.prototype-ui.com/rc0/Carousel) on the home template, but the system can't read it, at least not the javascript. I know that because at the top of the page appears this error:
Code: Select all
string(115) "Smarty error: [in template:17 line 137]: syntax error: unrecognized tag 'var' (Smarty_Compiler.class.php, line 590)"This is the code I am using at my home's template (the gallery is between HTML comments and at the end of the header section-tag):
Code: Select all
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}
<__script__ src="carousel/lib/prototype.js" type="text/javascript"></__script>
<__script__ src="carousel/lib/effects.js" type="text/javascript"></__script>
<__script__ src="carousel/dist/carousel.js" type="text/javascript"></__script>
<link href="carousel/themes/carousel/classic.css" rel="stylesheet" type="text/css" />
</head>
</__body>
<div id="pagewrapper">
{* start accessibility skip links *}
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
{* end accessibility skip links *}
<hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "For template: Left menu + 1 column" *}
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
</div>
{* End Header *}
{* Start Search *}
<div id="search">
{search}
</div>
{* End Search *}
{* Start Breadcrumbs *}
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
{* End Breadcrumbs *}
{* Start Content (Navigation and Content columns) *}
<div id="content">
{* Start Sidebar *}
<div id="sidebar">
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
{* End Navigation *}
{* Start News *}
<div id="news">
<h2>News</h2>
{news number='3' detailpage='news'}
</div>
{* End News *}
</div>
{* End Sidebar *}
{* Start Content Area *}
<div id="main">
<div style="float: right;">{print showbutton=true script=true}</div>
<h2>{title}</h2>
{content} <br />
<!--- GALLERY -------------------------------------------------->
<h1>Prototype UI : functional test : Carousel : Classic theme test</h1>
<h3>Horizontal</h3>
<div id="horizontal_carousel">
<div class="previous_button"></div>
<div class="container">
<ul>
</ul>
</div>
<div class="next_button"></div>
</div>
<p style="clear: both;"></p>
<__script__ type="text/javascript">
// <![CDATA[
function runTest() {
var ul = $$("#horizontal_carousel .container ul").first();
// Fill carousel
var html = $R(0,31).inject("", function(html, index) {
return html + '<li><img alt="Image'+ index + '" src="carousel/assets/images/image' +
index + '.png"/>Image #' + index + "</li>";
});
ul.update(html);
new UI.Carousel("horizontal_carousel");
}
Event.observe(window, "load", runTest);
// ]]>
</__script>
<!----------------------------------------------------->
{* Start relational links *}
<div class="hr"></div>
<div class="right49">
<p>{anchor anchor='main' text='^ Top'}</p>
</div>
<div class="left49">
<p>{cms_selflink dir="previous" label="Previous page: "} <br />
{cms_selflink dir="next"}</p>
</div>
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
{* End relational links *}
<hr class="accessibility" />
</div>
{* End Content Area *}
</div>
{* End Content *}
{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
<div id="footer">
{global_content name='footer'}
</div>
{* End Footer *}
</div>{* end pagewrapper *}
<__body>
</__html>
Any one can help me or give some kind of advice?, I will appreciate it. Sorry for the off topic and for my poor english.
Thanks.
