Thread: jcarousel lite / jquery image scroller for classipress

<div class="content">

<div class="content">
     <div class="main">
          <div class="widget">

<div class="widget_style">
<ul>

<?php while (have_posts()) : the_post(); ?>
<li class="active"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>. price: <?php echo get_option('currency'); ?><?php echo get_post_meta($post->ID, "price", true); ?>">
<?php if ( get_option('main_page_img') != "no" ) { ?>
<?php $images = get_post_meta($post->ID, "images", true);
      if (empty($images)) {?>
[img]<?php bloginfo('template_url'); ?>/images/no_gpic.png[/img]</a><?php } else { ?>
[img]<?php echo get_bloginfo('template_url').[/img]<?php
      if ( strstr($images, ',')) {
      $matches = explode(",", $images);
      $img_single = $matches[0];
      $img_single = explode(trailingsla****(get_option('siteurl')) . "wp-content/uploads/classipress/", $img_single);
      echo $img_single[1];
      } else {
      $img_single2 = $images;
      echo $img_single2;}?>" alt="Listing Photo" border="0" /></a>

      <?php } } ?>

      <?php endwhile; ?>[/list]
</div>

     </div>
  </div>
</div>

<?php wp_head(); ?>

?>

<script type="text/JavaScript">
    $(document).ready(function() {
        $(".widget_style").jCarouselLite({
            btnPrev: ".previous",
            btnNext: ".next",
		    auto: 6000,
			visible: 7,
            /*this makes it a true carousel rather than a slideshow*/
            circular: true
        });
    });
	</script>

.widget {
width:895px;
margin-left: 22px;
padding-top:10px;
}
.widget a.previous{
	float:left;
	display:block;
	background:url(images/sprev.jpg) bottom;
	width:34px;
	height:34px;
	margin-top:28px;
	margin-right:2px;
}

.widget a.next{
	float:right;
	display:block;
	background:url(images/snext.jpg) bottom;
	width:34px;
	height:34px;
	margin-top:-71px;
}

.widget_style {
text-align:left;
padding:0px 0px 0px 0px;
}

.widget_style ul {
margin:0;
padding:0;
}

.widget_style li {
height:89px;
width:109px;
background:url(images/imgbg.png) left top no-repeat;
list-style:none;
margin:0;
padding:10px 0px 0px 10px;
}

.widget_style img {
width:90px;
height:68px;
}

<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/includes/js/global.js'></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/iconified.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/iconified.css" media="screen" />
<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/includes/js/fancybox/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/includes/js/fancybox/jquery.fancybox-1.2.6.pack.js'></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/includes/js/fancybox/jquery.fancybox-1.2.6.css" type="text/css" />