{literal}
<style>
      .ad-image-description {
        position: absolute;
        bottom: 50px;
        left: 0px;
        padding: 2%;
        text-align: left;
        width: 100%;
        height:30px
        z-index: 2;
        background: url(/modules/mod_slider1/opa75.png);
        color: #000;
      }
 .ad-image-description a {
 text-decoration:none;
 color:red;
    }  
 #features {     
	width: {/literal}{$cfg.is_width}{literal}px;
	height: {/literal}{$cfg.is_height}{literal}px;
    } 
.jshowoff {     
	width: {/literal}{$cfg.is_width}{literal}px;
	height: {/literal}{$cfg.is_height}{literal}px;
    }         
 </style>     
{/literal}
<link rel="stylesheet" href="/modules/mod_slider1/jshowoff.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="/modules/mod_slider1/jquery.jshowoff.js"></script>


		<div id="features">

 {foreach key=aid item=article from=$articles}   
      
<div><a href="{$article.href}"><img src="{$article.image}" alt="{$article.title}" /></a>
<div class="ad-image-description">
<strong><a href="{$article.href}">{$article.title|truncate:$cfg.newsline:"...":true}</a></strong> 
<br> {$article.description|truncate:70:"...":true} <a href="{$article.authorhref}"><br>{$article.author}</a> </div>
</div>
						
 {/foreach}
 
   	</div>
    
{literal}
			<script type="text/javascript">		
				$(document).ready(function(){ $('#features').jshowoff({{/literal}{$links}{literal}controls: false,changeSpeed:1000}); });
			</script>
{/literal}      