Witam,
Próbuję opanować powiązanie modx revo z posiadanym szablonem i javascript zdecydowanie odmawia współpracy.
Tak wygląda funkcjonujący szablon strony:
http://www.spades.pl/dev00/index.html
Wszystkie niezbędne funkcje (slider, menu, powiększanie obrazków, prosta galeria, itp.) działają bez problemu.
Dla testów użyłem tylko strony głównej.
Zainstalowałem modx revo 2.0.6, dodałem spolszczenie i nowy template z takim kodem:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>[[*pagetitle]]</title>
<meta charset="utf-8">
<meta name="description" content="[[*description]]">
<meta name="keywords" content="[[*keywords]]">
<meta name="author" content="[[*author]]">
<link rel="stylesheet" href="assets/templates/Spades/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/templates/Spades/css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/templates/Spades/css/style.css" type="text/css" media="all">
<!-- styles for prettyPhoto -->
<link rel="stylesheet" href="assets/templates/Spades/css/prettyPhoto.css" type="text/css" media="all">
<script type="text/javascript" src="assets/templates/Spades/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/templates/Spades/js/script.js"></script>
<script type="text/javascript" src="assets/templates/Spades/js/date.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="assets/templates/Spades/js/ie6_script_other.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/templates/Spades/js/js/html5.js"></script>
<![endif]-->
</head>
<body onLoad="myclock();">
[[*content]]
</body>
</html>
oraz
stronę Home z takim kodem:
<div class="tail-top">
<div class="tail-bottom">
<div id="main">
<!-- header -->
<header>
<!-- .logo -->
<div class="logo"> <a href="index.html">Communication<span>Providing best connection</span></a> </div>
<!-- /.logo -->
<form id="ClockForm" action="">
<fieldset>
<input type="text" id="clock" />
</fieldset>
</form>
<ul class="contacts">
<li class="phone">Freephone: +1 800 559 6580</li>
<li class="email"><a href="#">[email protected]</a></li>
</ul>
<nav>
<ul class="sf-menu">
<li><a href="index.html" class="current">Main</a></li>
<li><a href="index-1.html">About</a>
<ul>
<li><a href="more.html">Lorem ipsum dolor sit</a></li>
<li><a href="more.html">Nulla quis metus</a></li>
<li><a href="more.html">Vestibulum in velit justo</a></li>
<li><a href="more.html">Vivamus nisi massa</a></li>
<li><a href="more.html">Nullam commodo</a></li>
</ul>
</li>
<li><a href="index-2.html">Services</a></li>
<li><a href="index-3.html">Projects</a></li>
<li><a href="index-4.html">FAQs</a></li>
<li><a href="index-5.html">Solutions</a></li>
<li><a href="index-6.html">contacts</a></li>
</ul>
</nav>
<form action="" id="search-form">
<fieldset>
<input type="text" class="text" value="Search..." onFocus="if(this.value=='Search...'){this.value=''}" onBlur="if(this.value==''){this.value='Search...'}">
<a href="#" onClick="document.getElementById('search-form').submit()"><img src="assets/templates/Spades/images/button-search.gif"></a>
</fieldset>
</form>
</header>
<!-- content -->
<section id="content">
<div id="coin-slider"> <a href="#"><img src="assets/templates/Spades/images/slide-img1.jpg"></a> <a href="#"><img src="assets/templates/Spades/images/slide-img2.jpg"></a> <a href="#"><img src="assets/templates/Spades/images/slide-img3.jpg"></a></div>
<h2 class="extra1">Fresh ideas<br>
for growing<br>
your business</h2>
<div class="cont-box">
<div class="inner">
<div class="wrapper container_16">
<article class="grid_4">
<h2>Remote</h2>
<p>Praesent vestibulum molesti acuan nonumm eurissellus portusus.</p>
<ul class="list">
<li><a href="#">Praesent vestibulum molesti </a></li>
<li><a href="#">Acuan nonumm euriss</a></li>
<li><a href="#">Fusce suscipit vim</a></li>
<li><a href="#">Nascetur ridiculus mus</a></li>
<li><a href="#">Fsce feugiat malesuada odi</a></li>
</ul>
</article>
<article class="grid_4">
<h2>IP Phone</h2>
<p class="p2">Praesent vestibulum molesti acuan nonumm eurissellus portusu ociis natoque pe et mis parturie ntontes nascetur ridiculus ma dui.</p>
<p class="p2">Fsce feugiat malesuada odio. Morbi nunc odiovida atcursus nec uctus a lorem. Maecenas tristiq.</p>
<ul class="list">
<li><a href="#">Fusce suscipit vim</a></li>
<li><a href="#">Nascetur ridiculus mus</a></li>
</ul>
</article>
<article class="grid_4">
<h2>Hardware</h2>
<p>Mim sociis natoque petibus et mis parturie ntontes nascetur ridic.</p>
<ul class="list">
<li><a href="#">Praesent vestibulum molesti </a></li>
<li><a href="#">Acuan nonumm euriss</a></li>
<li><a href="#">Fusce suscipit vim</a></li>
<li><a href="#">Nascetur ridiculus mus</a></li>
<li><a href="#">Fsce feugiat malesuada odi</a></li>
</ul>
</article>
<article class="grid_4">
<h2>Internet</h2>
<p class="p2">Praesent vestibulm molesi acuan nonumm eurissellus portususipit varMim sociis natoque peibus et mis parturie ntontes nasctur ulus musNulla dui. Fsce feugiat suada odio. Morbi nunc odiov.</p>
<p>Rida atcursus nec uctus a lornas tristique orci ac sem. Duis ultrcies pharetra magna. Donec accusan malesuda orciec sit eros. Lorem ipsum dolor sit am.</p>
</article>
</div>
<div class="wrapper container_16">
<article class="grid_4"> <a href="more.html" class="button">Read More</a> </article>
<article class="grid_4"> <a href="more.html" class="button">Read More</a> </article>
<article class="grid_4"> <a href="more.html" class="button">Read More</a> </article>
<article class="grid_4"> <a href="more.html" class="button">Read More</a> </article>
</div>
</div>
</div>
</section>
<!-- aside -->
<aside class="bottom">
<div class="inside">
<div class="wrapper container_16">
<article class="grid_8">
<h2>The world of opportunities</h2>
<div class="img-box">
<figure><a href="assets/templates/Spades/images/tfile_gall_1_1.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="assets/templates/Spades/images/1page-img.jpg" alt=""></a></figure>
<h5 class="extra">Praesent vestibulum molesti acuanumm eurissellus portuenas tristiquesuipit var</h5>
<p>Mim sociis natoque p musNulla dui. Fsc muda odio. Morbi nunc odiovida ursus nec uca lorem. Maecenaristique orci ac sem. Duis u pharetra magnaccumsan malest am.</p>
et consectetuer adipiscing elit. Mauris fermen tum dictum magna. Sed oreet aliquam leo. Ut tellus dolor dapibus eget elementum vel curus eleife elit. </div>
<a href="more.html" class="button">Read More</a> </article>
<article class="grid_8">
<h2>Features</h2>
<dl>
<dt class="color1"><span>1</span>Professional researches</dt>
<dd>Mim sociis natoque p musNulla dui. Fsc muada odio. Morbi nunc odiovida ursus nec uca lorem. Maecenaristiq.</dd>
<dt class="color2"><span>2</span>Dynamic development</dt>
<dd>Mim sociis natoque p musNulla dui. Fsc muada odio. Morbi nunc odiovida ursus nec uca lorem. Maecenaristiq.</dd>
<dt class="color3"><span>3</span>Individual customer support</dt>
<dd>Mim sociis natoque p musNulla dui. Fsc muada odio. Morbi nunc odiovida ursus nec uca lorem. Maecenaristiq.</dd>
</dl>
</article>
</div>
</div>
</aside>
<!-- footer -->
<footer>
<div class="inside">Communication © 2010 • <a href="index-7.html">Privacy Policy</a>
<ul class="social-services">
<li><a href="#" title="Reddit" class="normaltip"><img src="assets/templates/Spades/images/icon-reddit.gif"></a></li>
<li><a href="#" title="Flickr" class="normaltip"><img src="assets/templates/Spades/images/icon-flickr.gif"></a></li>
<li><a href="#" title="Twitter" class="normaltip"><img src="assets/templates/Spades/images/icon-twitter.gif"></a></li>
<li><a href="#" title="Rss" class="normaltip"><img src="assets/templates/Spades/images/icon-rss.gif"></a></li>
<li><a href="#" title="Digg" class="normaltip"><img src="assets/templates/Spades/images/icon-digg.gif"></a></li>
</ul>
</div>
</footer>
</div>
</div>
</div>
efekt jest taki:
http://spades.pl/dev01/
czyli nie do końca zgodny z oczekiwaniami - nie działa slider, menu rozwijane kuleje, powiększanie obrazków również nie działa.
W zakresie slidera próbowałem per analogiae zastosować metodę opisaną tutaj:
http://designfromwithin.com/integrating-coda-slider-2-0-in-modx-revolution/
zrobiłem odpowiedniego chunka i stosowne TV, niestety efekt jest identyczny jak bez chunka i TV.
Jakiś pomysł? Co robię źle?
Pozdrawiam
