<div id="feature_list">
  <ul id="tabs">
  <li>
  <a href="javascript:;">
  <img src="services.png" />
  <h3>Services</h3>
  <span>Lorem ipsum dolor sit amet consect</span>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="programming.png" />
  <h3>Programming</h3>
  <span>Lorem ipsum dolor sit amet consect</span>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="applications.png" />
  <h3>Applications</h3>
  <span>Lorem ipsum dolor sit amet consect</span>
  </a>
  </li>
  </ul>
  <ul id="output">
  <li>
  <img src="sample1.jpg" />
  <a href="#">See project details</a>
  </li>
  <li>
  <img src="sample2.jpg" />
  <a href="#">See project details</a>
  </li>
  <li>
  <img src="sample3.jpg" />
  <a href="#">See project details</a>
  </li>
  </ul>
  </div>

<li> <a href="javascript:;"> <span class="tite">$TITLE$</span> <span>$DATE$</span> </a> </li>

<li> <img src="$OTHER5$" alt="$TITLE$"/> <a href="$ENTRY_URL$">Перейти к записи</a> </li>

<div id="feature_list"> <ul id="tabs"> $MYINF_1$ </ul> <ul id="output"> $MYINF_2$ </ul> </div>

<style type="text/css">
   
  h3 {
  margin: 0;  
  padding: 7px 0 0 0;
  font-size: 16px;
  text-transform: uppercase;
  }

  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#tabs {
  left: 0;
  z-index: 2;
  width: 320px;
  }

  ul#tabs li {
  font-size: 12px;
  font-family: Arial;
  }
   
  ul#tabs li img {
  padding: 5px;
  border: none;
  float: left;
  margin: 10px 10px 0 0;
  }

  ul#tabs li a {
  color: #222;
  text-decoration: none;  
  display: block;
  padding: 10px;
  height: 60px;
  outline: none;
  }

  ul#tabs li a:hover {
  text-decoration: underline;
  }

  ul#tabs li a.current {
  background: url('http://jqueryglobe.com/labs/feature_list/feature-tab-current.png');
  color: #FFF;
  }

  ul#tabs li a.current:hover {
  text-decoration: none;
  cursor: default;
  }

  ul#output {
  right: 0;
  width: 463px;
  height: 240px;
  position: relative;
  }

  ul#output li {
  position: absolute;
  width: 463px;
  height: 240px;
  }

  ul#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#output li a:hover {
  background: #D33431;
  }
  </style>

<script type="text/javascript" src="http://jqueryglobe.com/labs/feature_list/jquery.featureList-1.0.0.js
"></script>

<script language="javascript">
  $(document).ready(function() {

  $.featureList(
  $("#tabs li a"),
  $("#output li"), {
  start_item : 0
  }
  );

  /*
   
  // Alternative

   
  $('#tabs li a').featureList({
  output : '#output li',
  start_item : 0
  });

  */

  });
  </script>