This solution came by way of Alen Grakalic at CSS Globe.
I have been keeping an eye our for a method of presenting Ditto (which is a MODx document aggregator) posts without taking up too much real estate on a Chamber of Commerce site. Once I ran across Grakalic’s easySlider. jQuery-driven solution I realized that it could be utilized for such a purpose. I have tried to outline my process below. As long as you are fairly familiar with the inner workings of the MODx application framework it ought to be a snap.
Download Files (Step 1)
Create Ditto Output (Step 2)
If you aren’t familiar with Ditto, it is a snippet inside of MODx that allows you to aggregate and present document lists and content quickly and easily. The presentation drives off of a Chunk inside of MODx that serves as an HTML template. Since easySlider uses an unordered list all you need to do is create a template like the one below that generates the list items:
<li> <div id="slidertitle"><a href="[~[+id+]~]" title="[+title+]">[+title+]</a></div> <p>[+summary+]</p> <div id="sliderfull"><a href="[~[+id+]~]" title="[+title+]">Full Article...</a></div> </li>
You then call in the template from the Ditto snippet call, something like:
[!Ditto? &tpl=`ditto_easySlider`!]
Place easySlider (Step 3)
Give you div container an id of ’slider’ and then place the appropriate call ins in the header of your document:
<script type="text/javascript" src="[(site_url)]assets/js/jquery.js"></script>
<script type="text/javascript" src="[(site_url)]assets/js/easySlider.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
prevText:'<< Previous',
nextText:'Next >>',
orientation:'horizontal'
});
});
</script>
Enjoy (Step4)
That’s really all there is to it. Here is my implementation of this solution. Part of our goal here was to present the posts as time sensitive articles while promoting community involvement by encouraging chamber members to submit their own area specific articles.
