A Javascript Carousel with the API

While this may seem a fancy function to code, it’s not so difficult (especially as the code is below). Thanks to noobslide 1.2 and mootols (I’m not reinventing the wheel!)

Remember you will need the core files available here

The following code will make a lovely little carousel with 10 products from the category Clothing & Accessories (97) Example here (new window)

Another example with the category Electronics (4) Example here (new window)

This code above the head

<?php
	$catid = '97';
	define('API', 'PS');
	require_once('constants.inc.php');
	require_once('classes/class.ClientFactory.php');
	$oClient = ClientFactory::getClient(API_USERNAME, API_PASSWORD, API_USER_TYPE);
	$oRefineBy = new stdClass();
	$oRefineBy -> iId = 4;
	$oRefineBy -> sName = 'Category';
	$oRefineByDefinition = new stdClass();
	$oRefineByDefinition -> sId = '97';
	$oRefineByDefinition -> sName = 'Category';
	$oRefineBy -> oRefineByDefinition = $oRefineByDefinition;
	$aParams7 = array( "iLimit"=>10, "oActiveRefineByGroup" => $oRefineBy, "sSort" => "popularity", "bIncludeTree" => true, "bHotPick" => true);
	$oResponse= $oClient->call('getProductList', $aParams7);
	foreach($oResponse->oProduct as $key => $details){
		$image = $details->sAwThumbUrl;
		$name = $details->sName;
		$price = $details->fPrice;
		$link = $details->sAwDeepLink;
 
		if($key <= 4) {
			$leftimages = $leftimages.'<div><img src="'.$image.'" alt="'.$name.'" /></div>';
		}
 
 
		if($key > 4) {
			$rightimages = $rightimages.'<div><img src="'.$image.'" alt="'.$name.'" /></div>';
		}
 
		$mainimages = $mainimages.'<span><img src="'.str_replace('/thumb/','/preview/',$image).'" alt="'.$name.'" /></span>';
		$thedetails = $thedetails.'{title:\''.$name.'\', link:\''.$link.'\'},';
	}
 
	?>

And heres the rest of the code, the whole page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel & API Test</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="mootools-1.2-core.js"></script>
	<script type="text/javascript" src="_class.noobSlide.packed.js"></script>
	<script type="text/javascript">
	window.addEvent('domready',function(){
		var sampleObjectItems =[
			<? echo $thedetails; ?>
		];
		var info6 = $('box6').getNext().set('opacity',0.6);
		var nS6 = new noobSlide({
 
			mode: 'vertical',
			box: $('box6'),
			items: sampleObjectItems,
			size: 200,
			handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
			handle_event: 'mouseenter',
			autoPlay: true,
			addButtons: {
 
				play: $('play6'),
				stop: $('stop6'),
 
 
			},
			button_event: 'click',
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Back.easeOut,
				wait: false
			},
			onWalk: function(currentItem,currentHandle){
				info6.empty();
				new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
				this.handles.set('opacity',0.3);
				currentHandle.set('opacity',1);
			}
		});
		//walk to next item
		nS6.next();
	});
	</script>
</head>
 
<body>
 
 
<div id="cont">
  <div class="sample sample6">
	<div class="thumbs" id="handles6_1">
		<? echo $leftimages ?>
	</div>
	<div class="mask6">
		<div id="box6">
			<? echo $mainimages; ?>
		</div>
		<div class="info"></div>
	</div>
	<div class="thumbs" id="handles6_2">
		<? echo $rightimages ?>
	</div>
	<p class="buttons">
 
		<span id="stop6">Stop</span>
		<span id="play6">Play &gt;</span>
 
	</p>
</div>
</div>
</body>
</html>