<script src="http://mutabor-666.narod.ru/js/slides.min.jquery.js"></script>  
<script>  
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'http://mutabor-666.narod.ru/images/loading.gif',
play: 3000,
pause: 2000,
hoverPause: true
});
});
</script>  

<div id="container">
<div id="example">
  <img src="http://mutabor-666.narod.ru/img/slide/new_ribbon.png" alt="New Ribbon" id="ribbon">
<div id="slides">
  <div class="slides_container">
  <?if($IMG_SMALL_URL1$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL1$"></a><?endif?>
  <?if($IMG_SMALL_URL2$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL2$"></a><?endif?>
  <?if($IMG_SMALL_URL3$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL3$"></a><?endif?>
  <?if($IMG_SMALL_URL4$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL4$"></a><?endif?>
  <?if($IMG_SMALL_URL5$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL5$"></a><?endif?>
  <?if($IMG_SMALL_URL6$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL6$"></a><?endif?>
  <?if($IMG_SMALL_URL7$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL7$"></a><?endif?>
  <?if($IMG_SMALL_URL8$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL8$"></a><?endif?>
  <?if($IMG_SMALL_URL9$)?><a href="$IMG_URL1$" title="Happy Bokeh Thursday!" target="_blank"><img src="$IMG_SMALL_URL9$"></a><?endif?>
  </div>
  <a href="#" class="prev"><img src="http://mutabor-666.narod.ru/img/slide/arrow_prev.png" alt="Arrow Prev"></a>
  <a href="#" class="next"><img src="http://mutabor-666.narod.ru/img/slide/arrow_next.png" alt="Arrow Next"></a>
</div></div></div>

/* -- Slide -- */
#container {position:relative;margin:0 auto;padding:0;width:524px;height:100%;text-align:center;z-index:0;}
#example {position:relative;width:524px;height:330px;}
#ribbon {position:absolute;top:-2px;left:-2px;width:96px;z-index:500;opacity:0.6; -moz-opacity:0.6;filter:alpha(opacity=60);}
#ribbon:hover {opacity:0.9; -moz-opacity:0.9;filter:alpha(opacity=90);}
#slides {position:absolute;top:0;left:0;z-index:100;}
#slides .next, #slides .prev {position:absolute;top:122px;left:-24px;width:24px;height:43px;display:block;z-index:101;opacity:0.4; -moz-opacity:0.4;filter:alpha(opacity=40);}
#slides .next:hover, #slides .prev:hover {opacity:0.9; -moz-opacity:0.9;filter:alpha(opacity=90);}
#slides .next {left:524px;}
.slides_container {position:relative;width:500px;height:auto;overflow:hidden;border:12px solid #B46974; -webkit-border-radius:10px; -moz-border-radius:10px;border-radius:10px; -moz-box-shadow:0 0 8px rgba(0,0,0,0.7); -webkit-box-shadow:0 0 8px rgba(0,0,0,0.7);box-shadow:0 0 8px rgba(0,0,0,0.7); filter: progid:DXImageTransform.Microsoft.shadow(direction=0, color=#AAB2C1, strength=2);}
.pagination {margin:4px auto 0;width:150px;list-style:none;text-align:center;}
.pagination li {float:left;margin:0 1px;}
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background: url('/img/slide/pagination.png');background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a {background-position:0 -12px;}
#footer {text-align:center;width:524px;margin-top:9px;padding:4.5px 0 18px;border-top:1px solid #dfdfdf;}
#footer p {margin:4.5px 0;font-size:1.0em;}
a:link, a:visited {color:#599100;text-decoration:none;}
a:hover, a:active {color:#599100;text-decoration:underline;}