Modification of the yii OrbitSlider extension by perochak
JavaScript PHP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


yii-OrbitSlider v1.3.1

yii-OrbitSlider is an Image or HTML Slider containing an Image Count, Navigation, thumbnails and can do both Horizontal and Vertical transitions.

Buit using the jQuery plugin OrbitSlider
  • Original Yii Extension By: perochak
  • Modified Extension By: an0nz
  • With thanks to: TomTheGeek


Extract files to /protected/extensions/ You should be left with a folder called OrbitSlider

Place your images in /images/banners/ and name the files as you please

The css below is optional and is simply an optimisation for IE6 and below.

<!--[if IE]> <style type="text/css">

.timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }

</style> <![endif]-->

<?php $path =Yii::app()->baseUrl.'/images/banners/'; $this->widget('application.extensions.OrbitSlider.OrbitSlider',

'image'=>true, 'file'=>$path.'banner-1.jpg', 'url'=>'#', 'style'=>'background-color:white;', 'caption'=>'background-color:white; prevents bleed through from slides beneath',

), array(

'image'=>false, 'content'=>'<strong>Anything is Possible</strong><br />Just fill this space', 'style'=>'background-color:#999999;', 'caption'=>'Custom HTML content',

), array(

'image'=>true, 'file'=>$path.'banner-2.jpg', 'url'=>'#', 'style'=>'background-color:white;', 'caption'=>'Optional Caption',

), array(

'image'=>true, 'file'=>$path.'banner-3.jpg', 'style'=>'background-color:white;',

), array(

'image'=>false, 'style'=>'background-color:#264d25;color:white;', 'content'=>'<strong>More Content</strong>', 'caption'=>'Optional caption text',

), array(

'image'=>true, 'file'=>$path.'banner-4.jpg', 'url'=>'#', 'style'=>'background-color:white;', 'caption'=>'What a pretty picture',


), 'slider_options'=>array(

'animation'=>'horizontal-slide', 'bullets'=>true, 'directionalNav'=>true, 'advanceSpeed'=>'8000',

), 'width'=>'400', 'height'=>'250',


); ?>

Default Options

  • 'timer'=>true,
  • 'bullets'=>true,
  • 'animation'=>'fade',
  • 'opacity'=>'0.5',
  • 'animationSpeed'=>'1500',
  • 'advanceSpeed'=>'8000',
  • 'startClockOnMouseOut'=>true,
  • 'startClockOnMouseOutAfter'=>'5000',
  • 'directionalNav'=>true,
  • 'captionAnimation'=>'fade',

Content Options

  • 'image'=>true/false,
  • 'content'=>'<strong>HTML Content goes here</strong>', (optional IF image=true and file specified)
  • 'file'=>'path to image', (optional IF image=false and content specified)
  • 'url'=>' OR site/about', (optional)
  • 'style'=>'background-color:white; etc', (optional)
  • 'class'=>'some-CSS-Class', (optional)
  • 'caption'=>'Text to show in the caption box', (optional)