AppleByte IDX Fiddle

by Apple Ilagan

HTML

<script src="http://www.antimath.info/demos/cycle-carousel/plugins.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<div style="display:none !important; height:0;">
<script type="text/javascript" src="http://ihomefinder.idxre.com/idx/featuredslideshow.cfm?cid=60605"></script>    
</div>
        <div id="slideshow-wrapper">       	
        	<ul id="slideshow">
	        </ul>
			<div id="slideshow-controls">
        		<a href="#" id="prev">&lt; Prev</a>
				<a href="#" id="next">Next &gt;</a>
        	</div>
        </div>
		<div class="wrapp">
        <div id="slide-pager_prev">&lt;&lt;</div>
        <div id="slide-pager">
        	<ul class="pageme">
        	</ul>
        </div>
		<div id="slide-pager_next">&gt;&gt;</div>
        </div>

CSS

#slideshow-wrapper {
        		overflow: hidden;
                width: 800px;
                height: 400px;
                padding: 0;
                margin: 0 auto;
                border: 2px solid #EC9700;
        	}
			
            #slideshow {
                overflow: hidden;
                width: 400px;
                padding: 0;
                margin:30px auto;
                list-style-type: none;
            }
			
			#slideshow-controls {
				text-align: center;
			}
            
            #slideshow li {
            	padding: 0px;
                list-style-type: none;
            }
			
			#slideshow .price,
			#slideshow .title,
			#slideshow .detail
			 {display:none;}
			
			#slide-pager {
				margin: 20px auto 0;
			}
            
			#slide-pager ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				clear: both;
			}
			
			#slide-pager ul li {
				margin-right: 10px;
				border: 2px solid #fff;
				width:120px;
			}
			
			#slide-pager ul li img {display: block;}
			
			.wrapp {
				width: 800px;
				margin: 0 auto;
				position: relative;
			}	
			#slide-pager_prev {
				display: block;
				width: 40px;
				height: 30px;
				position: absolute;
				top: 28px;
				left: 10px;
				cursor:pointer;
				background:#CCC;
			}
			
			#slide-pager_next {
				display: block;
				width: 40px;
				height: 30px;
				position: absolute;
				top: 28px;
				right: 10px;
				cursor:pointer;
				background:#CCC;
			}
			
			#slide-pager ul li.activeSlide {background:#CCC;}
            
			#slide-pager .photo {width:100px; height:100px;}
			#slide-pager .photo img {width:auto; height:100px;}

JavaScript

$(window).load( function() {
				var list = "";
				jQuery(SLIDES.slides).each(function (index, value) {
						var imgsrc = value.src;
						var text = value.text;
						var url = value.link;
						var el = jQuery("&amp;lt;li&amp;gt;" + text + "&amp;lt;/li&amp;gt;");
						//Find price
						var price = el.find("b").html();
						//Find property title
	 if ( el.find("br").eq(0).next("br").length > 0 ) {
	el.find("br").eq(0).remove();	
	}
						var title = el.find("a").html();
						var index = ((title.indexOf("<br") - 1) > 0) ? title.indexOf("<br") - 1 : title.indexOf("<BR") - 1;
						title = title.substring(0, index);
						//Find stats
						el.find("br").eq(0).remove();
						el.find("b").remove();
						var statsStart = el.html().indexOf("<br");
						var statsEnd = el.html().indexOf("<a");
						var stats = el.html().substring(statsStart + 4, statsEnd);

list += "<li>"+
"<div class='photo'>" +
"<a href='"+url+"'><img src='"+imgsrc+"'></a>" +
"</div>" +
"<div class='price'>" +
price +
"</div>" +
"<div class='title'>" +
title +
"</div>" +
"<div class='detail'>" +
"<a href='"+url+"'>View Property &raquo;</a>" +
"</div>" +
"</li>"	
});
$("#slideshow").append(list);
$(".pageme").append(list);
$("#slideshow").fadeIn(100);

(function($){

$('#slideshow').cycle({
    fx: 'scrollHorz',
    speed: 'fast',
    timeout: 0,
	prev: '#prev',
	next: '#next',
	nowrap: 1,
    pager: '#slide-pager ul',
	pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#slide-pager ul li:eq(' + idx + ') a';
    },
	onPrevNextEvent: function(dir, id, el) {
        if (dir === true) {
            //alert('slide right');
			if (id >= 5) {
				//alert(i);
				$('#slide-pager_next').click();
			}
        }
        else {
            //alert('slide left');
			if (id >= 1) {
				//alert(i);
				$('#slide-pager_prev').click();
			}
        }
    }
});

$("#slide-pager").jCarouselLite({
    btnNext: "#slide-pager_next",
    btnPrev:...