Hi,
I’m new to modx and currently working on my first project. After finishing the rough template of the site I stumbled upon an issue I’m struggling with:
My template has a rotator for images just below the page header. The images that are on display should be governed by the content (resource) that is displayed, basically a different set of images for each page. As I do not want a template for each individual page I was looking for a way to have the rotator content set dynamically as pages are chosen by the user.
I soon got swamped by chunks, property sets, TV’s and bindings... obviously my lack of experiences.
Is there a proper way of setting the images in the rotator based on the resources being on display?
I copied the template I have so far, below. The rotator is the div classed "rotator" and currently its contents are hard coded.
Any pointer are greatly appreciated!!
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
<link rel="stylesheet" type="text/css" href="assets/styles/site.css" />
<link rel="stylesheet" href="assets/components/nivoslider/nivoslider.css" type="text/css" />
<script type="text/javascript" src="assets/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/components/nivoslider/nivoslider.js"></script>
<script type="text/javascript">
$(window).load(function() {$('#slider').nivoSlider({controlNav: false, pauseTime: 8000, effect: 'fade'});});
</script>
</head>
<body class="site">
<div id="header">
</div>
<div class="rotator">
<div class="rotator-content">
<div id="slider" style="z-index: 1;">
<img src='assets/images/rotator/neist-point.jpg' />
<img src='assets/images/rotator/loch.jpg' />
<img src='assets/images/rotator/orbost.jpg' />
</div>
</div>
</div>
<div class="container-shadow">
<div class="container">
<div class="content-container">
<div class="content-left">
[[*content]]
</div>
<div class="content-right">
[[*content]]
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
