ky

<link rel="stylesheet" href="{$base_dir}modules/homefeatured/style.css" type="text/css" media="screen" />
{literal}
<script type="text/javascript">
$(document).ready(function() {

	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .bloc").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active');
	$(".image_thumb ul li").click(function(){
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.bloc').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.bloc').height();	//Calculate height of block

		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser
			$(".main_image .bloc").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$(".main_image .bloc").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}

		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;

	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});

	//Toggle Teaser
	$("a.collapse").click(function(){
		$(".main_image .bloc").slideToggle();
		$("a.collapse").toggleClass("show");
	});

});//Close Function
</script>
{/literal}
<div id="main" class="container">
<div class="image_thumb">
 <ul>
 {foreach from=$products item=product name=homeFeaturedProducts}
 {assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}
 <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}first_item_of_line{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
  <a href="{$img_prod_dir}{$product.id_image}-large.jpg"><img src="{$img_prod_dir}{$product.id_image}-small.jpg" alt="{$product.legend|escape:htmlall:'UTF-8'}"/></a>
   <div class="desc">
  <div class="bloc">
   <h5><a href="{$productLink}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.name|escape:htmlall:'UTF-8'|truncate:30}</a></h5>
   <a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.description_short|strip_tags|truncate:60:'...'}</a>
	 <small>{displayWtPrice p=$product.price}</small>
     <p><a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{l s='view it' mod='homefeatured'}</a></p>

  </div>
</div>
</li>
 {/foreach}
 </ul>
 </div>

 <div class="main_image">
  {foreach from=$products item=product name=homeFeaturedProducts}
  {assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}
  <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}first_item_of_line{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
   <img src="{$img_prod_dir}{$product.id_image}-large.jpg" width="300" height="300" alt="{$product.legend|escape:htmlall:'UTF-8'}"/>
   <div class="desc">
    <div class="bloc">
  	 <h5><a href="{$productLink}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.name|escape:htmlall:'UTF-8'|truncate:30}</a></h5>
	 <a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.description_short|strip_tags|truncate:60:'...'}</a>
	 <small>{displayWtPrice p=$product.price}</small>
     <p><a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{l s='view it' mod='homefeatured'}</a></p>

    </div>
   </div>
   </li>
  {/foreach}
 </div>
</div>