page_header.php 

$have_new_pm = $have_unread_pm = 0;

 

$porno_forums = $bb_cfg['porno_forums'] ? $bb_cfg['porno_forums'] : 0;
$new_torrent = $db->sql_query("SELECT t.topic_id, ph.post_html, ph.post_id, tt.topic_title, tt.topic_time
          FROM   ".BT_TORRENTS_TABLE." AS t, ".POSTS_HTML_TABLE." AS ph, ".TOPICS_TABLE." AS tt
          WHERE ph.post_id = t.post_id
          AND   tt.topic_id = t.topic_id
          AND   tt.forum_id NOT IN (".$porno_forums.")
          GROUP BY t.reg_time DESC LIMIT 24
");
  $i = 0;
while ($tor = $db->sql_fetchrow($new_torrent))
  {
      $i++;
      preg_match_all('#\img.*?src=\"http://(.*?)\".*?\>#', $tor['post_html'], $out, PREG_SET_ORDER);
      $title = $tor['topic_title'];
      if (@$out[0][1] != '') {
        $last_release = '<a class="fancy" rel="group" href="viewpost.php?id='.$tor['post_id'].'"><img src="thumbnail.php?sizex=95&sizey=130&path=http://'.@$out[0][1].'" title="'.$title.'" /></a>&nbsp;';
        $last_key = true;
      } else {
        $last_release = '';
        $last_key = false;
      }
      $template->assign_block_vars('last_release', array(
         'LAST_KEY'     => $last_key,
         'LAST_RELEASE' => $last_release,
         'TITLE'        => $title,));
  }


page_header.tpl 

<script type="text/javascript" src="{#BB_ROOT}misc/js/jquery.pack.js?v={$bb_cfg['js_ver']}"></script>

 
<link rel="stylesheet" href="./templates/default/css/jquery.fancybox.css?v={$bb_cfg['css_ver']}" type="text/css">
<script type="text/javascript" src="{#BB_ROOT}misc/js/ui/jquery.mousewheel.js?v={$bb_cfg['js_ver']}"></script>
<script type="text/javascript" src="{#BB_ROOT}misc/js/ui/jquery.scrollable.js?v={$bb_cfg['js_ver']}"></script>
<script type="text/javascript" src="{#BB_ROOT}misc/js/ui/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{#BB_ROOT}misc/js/ui/jquery.fancybox-1.2.1.pack.js"></script>


   

<script>
$(function() {
  $("div.scrollable").scrollable({
      size: 8,
      items: '#thumbs',
      hoverClass: 'hover',
      keyboard: false
    });
});
$(document).ready(function() {
  $("a.fancy").fancybox({
    'overlayShow'     : true,
    'zoomSpeedIn'     : 600,
    'zoomSpeedOut'    : 500,
    'easingIn'        : 'easeOutBack',
    'easingOut'       : 'easeInBack',
    'frameWidth'      : screen.width-300,
    'frameHeight'     : screen.height-300,
    'hideOnContentClick' : false
  });
});
</script>
<table cellpadding="0" cellspacing="0" class="poster">
<tr>
<td class="pad_2">
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<!-- BEGIN last_release -->
<!-- IF last_release.LAST_RELEASE -->
<div class="tCenter">{last_release.LAST_RELEASE}</div>
<!-- ENDIF -->
<!-- END last_release -->
</div>
</div>
<!-- next link -->
<a class="next"></a>
</td>
</tr>
</table>


 main.css    

/* root element for the whole scrollable setup */
div.scrollable {  
  position:relative;
  overflow:hidden;
  width: 93%;
  height:143px;
}
#thumbs { 
  position:absolute;
  width:20000em;  
  clear:both;
}
a.prev, a.next {
  margin-top:118px; 
}
#thumbs div {
  float:left;
  width:110px;
  height:135px;
  color:#fff;
  cursor:pointer;
  padding: 3px 3px 3px 3px;
}
#thumbs div.hover {
  background-color:#D0DFEF;
}
#thumbs div.active {
  background-color:#6699CC;
  cursor:default;
}
div.scrollable {
  float:left;   
}
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
  display:block;
  width:18px;
  height:18px;
  background:url(../images/left.png) no-repeat;
  float:left;
  margin:55px 5px;
  cursor:pointer;
}
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
  background-position:0px -18px;    
}
a.disabled {
  visibility:hidden !important;   
}
a.next, a.nextPage {
  background-image:url(../images/right.png);
  clear:right;
}
div.navi {
  margin-left:47%;
  width:250px;
  height:20px;
}
div.navi a {
  width:8px;
  height:8px;
  float:left;
  margin:3px;
  background:url(../images/navigator.png) no-repeat;     
  cursor:pointer; 
}
div.navi a:hover {
  background-position:0 -8px;      
}
div.navi a.active {
  background-position:0 -16px;     
}
.poster {
  margin: 3px 4px 0; padding: 0 8px; width: 99%;
  background: #EFEFEF; border: solid #CFD4D8; border-width: 1px 0px;
}
