Updated to V3 – The Slider Carousel

Updated to V3 – The Slider Carousel:

Don’t forget you’ll need the V3 core files found on this page Core Files

An example of this code is here Fashion Forever Slide Carousel

In the head of the document:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php
 
require_once('constants.inc.php');
require_once('classes/class.ClientFactory.php');
$oRefineBy = new stdClass();
 
$oClient = ClientFactory::getClient(API_USERNAME, API_PASSWORD, API_USER_TYPE);
$oRefineBy->iId = 4;
$oRefineBy->sName = 'Category';
$oRefineByDefinition = new stdClass();
$oRefineByDefinition->sId = 97;
$oRefineByDefinition->sName = '';
$oRefineBy->oRefineByDefinition = $oRefineByDefinition;
$oProductDisplayListParams = array($oRefineBy);
 
$oClient = ClientFactory::getClient();
$returnedcolumns = array(sAwImageUrl,sMerchantImageUrl);
$getProductListparams = array("sQuery" => "", "iLimit"=>10, "iOffset"=>0, "sColumnToReturn" => $returnedcolumns, "sSort" => "popularity", "bIncludeTree" => true, "bHotPick" => true, "oActiveRefineByGroup" => $oProductDisplayListParams, "iAdult" => 1 );
$getProductList = $oClient->call('getProductList', $getProductListparams);
 
 
	foreach($getProductList->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.'\'},';
	}
 
	?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<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>


The Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

 
<style type="text/css">
#cont{width:400px;margin:0 auto;background:#fff;text-align:left;padding:0px}
 
#box6{
	position:absolute;
	width:200px;
}
#box6 span{
	display:block;
}
#handles6_1{
	float:left
}
#handles6_2{
	float:right
}
.mask6{
	position:absolute;
	margin-top:30px;
	left:50%;
	margin-left:-100px;
	width:200px;
	height:200px;
	overflow:hidden;
}
.sample6 .buttons{
	clear:both;
	text-align:center;
}
 
/* ********************************** */
 
.thumbs{
	width:50px;
}
.thumbs div{
	display:block;
	width:50px;
	height:50px;
	margin:3px 0;
	cursor:pointer;
}
 
.thumbs div img{
	display:block;
	width:100%;
	height:100%;
	border:none
}
 
.info{
	width:200px;
	height:auto;
	background:#000;
 
}
.info p, .info h4{
	color:#fff;
	padding:3px 8px;
	font-family:Arial;
}
.info h4{
	font-size:11px;
}
.info h4 a{
	float:right;
	background:#fff;
	color:#000;
	font-size:10px;
	padding:0 3px;
 
 
	text-decoration:none
}
 
span img{
	display:block;
	border:none;
}
* {margin:0;padding:0}
#cont li{margin-left:16px;}
 
#cont .description{padding:16px;margin:10px 0;background:#eee}
 
.sample{padding:10px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
h4.stitle{color:#666;margin:0 0 5px 0}
 
.links {padding:10px;margin-top:20px}
.links a{font-size:14px;color:#0080FF;text-decoration:none}
.links a:hover{font-weight:bold}
 
 
 
.buttons{padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}
</style>


In the body:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<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>

These two files are included and can be found here Noobslide JS File and Mootools JS

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

You must be logged in to post a comment.