I used
nivoSlider, particularly since the site would be using a number of slideshows and other rotators often on the same page. nivoSlider is a bit bigger than what I like, but once it's loaded in the page it can be used multiple times with different configurations.
There are a ton of them available, try Google for "jquery slideshow". Here's one interesting result.
http://vandelaydesign.com/blog/web-development/jquery-slideshow/
I usually have a snippet to load the rotator javascript and any custom css; this is for a rotator using the
showoff rotator:
<?php
$js = '
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){ $(\'#homerotator\').jshowoff({
links: false,
controls: true,
effect: \'fade\',
cssClass: \'basicFeatures\',
speed: \'10000\',
controlText: { play:\' \', pause:\' \', previous:\' \', next:\' \' },
hoverPause: false
});
});
// ]]></script>
';
$modx->regClientScript('assets/js/jquery.jshowoff.min.js');
$modx->regClientScript($js);
?>
The trick is to pick the script you like, and then use a snippet or TV to generate the list of images in the way the one you chose wants it. Some, like nivoSlider, just works on image tags found in a specified HTML element, some use unordered lists. The jshowoff
used here uses any specified HTML element to make a rotator out of anything; in this case a div used as a Ditto or getResources tpl.
<div class="rotator" id="slide[+id+]">
<div class="rleft">
<h2>[+longtitle+]</h2>
</div>
<div class="rright">
[+content+]
</div>
</div>
I like these, although they are somewhat limited in their effects
http://www.eyecon.ro/spacegallery/
http://fredhq.com/projects/roundabout
(actually, on checking back with the roundabout site, it's been considerably enhanced since I last looked at it... some very nice effects!)
[ed. note: sottwell last edited this post 14 years, 1 month ago.]
☆ A M B ☆