This effect was achieved using the jquery plugin from http://jqueryglobe.com/labs/feature_list/ and Ventrian News Articles - http://www.ventrian.com/
Similar effects could also be achieved using jquery plugins like:
For more info or to discuss this, please go to Support on this site or to the Ventrian forum
The Code
To achieve this rotating "feature list" display, I downloaded the examples and js from the above site, then configured an instance of the Latest News Articles module with the template:
HTMLHeader:
<style type='text/css'>
div#feature_list {
width: 750px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
position: absolute;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}
ul#feature_list_tabs {
left: 0;
z-index: 2;
width: 320px;
}
ul#feature_list_tabs li {
font-size: 12px;
font-family: Arial;
}
ul#feature_list_tabs li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}
ul#feature_list_tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#feature_list_tabs li a:hover {
text-decoration: underline;
}
ul#feature_list_tabs li a.current {
background: url('/js/jquery/images/feature-tab-current.png');
color: #FFF;
}
ul#feature_list_tabs li a.current:hover {
text-decoration: none;
cursor: default;
}
ul#feature_list_output {
right: 0;
width: 463px;
height: 240px;
position: relative;
}
ul#feature_list_output li {
position: absolute;
width: 463px;
height: 240px;
}
ul#feature_list_output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
ul#feature_list_output li a:hover {
background: #D33431;
}
</style>
<div id="feature_list">
<ul id="feature_list_tabs">
HTML Body:
[HASIMAGE]
<li class='feature_list_index'><a href="javascript:;">[IMAGETHUMB:50]<h3>[TITLE]</h3><span>[SUMMARY]</span></a></li>
<li class='feature_list_output_item'>
[IMAGE]
<a href="#">See details</a>
</li>
[/HASIMAGE]
[HASIMAGE]
<li class='feature_list_index'><a href="javascript:;">[IMAGETHUMB:50]<h3>[TITLE]</h3><span>[SUMMARY]</span></a></li>
<li class='feature_list_output_item'>
[IMAGE]
<a href="[LINK]">See details</a>
</li>
[/HASIMAGE]
HTML Footer: </ul>
<ul id="feature_list_output">
</ul>
</div>
<script type="text/javascript" src="/js/jquery/jquery.featureList-1.0.0.js"></script>
<script type='text/javascript'>
$().ready(function() {
$('.feature_list_output_item').appendTo($('#feature_list_output'));$.featureList( $("#feature_list_tabs li a"), $("#feature_list_output li"), { start_item : 0, transition_interval : 2500 } );});</script>
</ul>
<ul id="feature_list_output">
</ul>
</div>
<script type="text/javascript" src="/js/jquery/jquery.featureList-1.0.0.js"></script>
<script type='text/javascript'>
$().ready(function() {
$('.feature_list_output_item').appendTo($('#feature_list_output'));
$.featureList(
$("#feature_list_tabs li a"),
$("#feature_list_output li"), {
start_item : 0,
transition_interval : 2500
}
);
});
</script>