Yii 1.1: orbitslider

A Images Slider - With Images Count and Navigation Horizental and Vertical Images Slider
13 followers

This extension could be used to create a slider of Images to display in horizontally and vertically.

This is based on Orbit Slider.

http://www.zurb.com/playground/jquery_image_slider_plugin

Requirements

Yii 1.1.5

Usage

Copy the OrbitSlider folder to the extensions

$this->widget('application.extensions.OrbitSlider.OrbitSlider',
              array(
                    'images'=>array(
                        array(
            'img'=>'images/banner/banner_1.png',
             'url'=>'url',
            ), 
                        array(
            'img'=>'images/banner/banner_2.png',
             'url'=>'url2',
            ), 
                        array(
            'img'=>'images/banner/banner_3.png',
             'url'=>'url3',
            ),                     
                    ),
                    'slider_options'=>array(
                        'width'=>'1000',
                        'height'=>'330',
                        'animation'=>'horizontal-slide',
                        'bullets'=>true,
                     ),
              )
 
 
);

Resources

...external resources for this extension...

Total 5 comments

#7805 report it
an0nz at 2012/04/19 07:18am
Modified OrbitSlider

Nice extension, needed to make a few updates for my requirements though.

Have put in the changes and bug fixes posted earlier for links and captions. Added the ability to have HTML content slides, custom css on each slide, working width/height options, and updated to the latest version of OrbitSlider.

Codes @ http://github.com/an0nz/yii-orbitslider if anyone is interested

#5816 report it
TomTheGeek at 2011/11/16 01:03am
Needs work

First go to http://www.zurb.com/playground/jquery_image_slider_plugin and download the latest version of the plugin. Then move the new jquery.orbit.js to assets/js, and the new orbit.css and orbit image folder to assets/css.

Second there are three parameters you can pass to the image array: img, caption and url. img is the file path to the image, caption is the caption, ect...

Third here is my modified ext\OrbitSlider\OrbitSlider.php. It's got a modified makeImages function and is cleaned up a bit.

<?php
/**
 * Description of OrbitSlider
 *
 * @author Perochak  <me@perochak.com> <me@perochak.com>
 * @uses Yii v.1.1.5
 *  Ver : 1.3
 */
 
class OrbitSlider extends CWidget {
 
    public $name = 'orbit';
    public $images=array();
    public $slider_options=array();
    public $default_options=array(
        'timer'=>true,
        'bullets'=>true,
        'animation'=>'fade',
        'width'=>'400',
        'height'=>'300',
        'opacity'=>'0.5',
        'animationSpeed'=>'800',
        'advanceSpeed'=>'5000',
        'startClockOnMouseOut'=>true,
        'startClockOnMouseOutAfter'=>'5000',
        'directionalNav'=>true,
    );
    public function init() {
        parent::init();
    }
 
    public function makeImages() {
        $html = '<div id="' . $this->name . '">' . "\n";
        $i=0;
        $caption='';
        foreach ($this->images as $img) {
            $image = '<img src="' . $img['img'] . '"';
            if(isset($img['caption'])){
                $image.=' alt="" data-caption="#htmlCaption'.$i.'"';
                // $image.=' alt="dasdf" caption="#img'.$i.'"';
                //$caption .= '<span class="orbit-caption" id="img'.$i.'">' . $img['caption'] . '</span>' . "\n";
                $caption .= '<span class="orbit-caption" id="htmlCaption'.$i.'">' . $img['caption'] . '</span>' . "\n";
            }
            $image.= '/>';
 
            if(isset($img['url']))
            {
             /* Originally the url parameter only accepted controller/action string not links to an external site like http://www.example.com.
              * My fix is below. Now when I want to link to an external site I pass a plain string but
              * if I want a controller/action I wrap it in an array. Checking for "http://" at the beginning would be another way to do it.  */
                if(is_array($img['url'])) {
                    $image = '<a href="'.Yii::app()->createUrl($img['url'][0]).'" data-caption="#htmlCaption'.$i.'">'.$image.'</a>';
                } else {
                    $image = '<a href="'.$img['url'].'" data-caption="#htmlCaption'.$i.'">'.$image.'</a>';
                }
            }
            $html.=$image . "\n";
            $i++;
        }
        $html .= '</div>' . "\n";
        $html .=$caption;
        return $html;
    }
 
    /**
     * Run the widget, including the js files.
     */
    public function run() {
        $cs = Yii::app()->clientScript;
 
        $dir = dirname(__FILE__) . DIRECTORY_SEPARATOR;
        $baseUrl = Yii::app()->getAssetManager()->publish($dir . 'assets');
 
        foreach($this->slider_options as $key=>$val){
            $this->default_options[$key]=$val;
        }
        $this->default_options = CJavaScript::encode($this->default_options);
 
        $clientScript = Yii::app()->getClientScript();
 
        $clientScript->registerCssFile($baseUrl . '/css/orbit.css'); //http_build_query($cssparams)
 
        $clientScript->registerCoreScript('jquery');
 
        $clientScript->registerScriptFile($baseUrl . '/js/jquery.orbit.min.js');
 
        $js =  "$(window).load(function() {
            $('#{$this->name}').orbit(
        $this->default_options
            );
        });";
 
        $cs->registerScript('Yii.Orbit' . $this->name, $js);
        echo $this->makeImages();
    }
 
}
?>
#2833 report it
ejac at 2011/02/15 12:49am
Not working properly

I guess you need to make test first before uploading extensions here...

#2464 report it
PeRoChAk at 2011/01/06 06:26am
Updated

Updated Caption error

#2425 report it
DarkNSF at 2010/12/29 03:24pm
Doesn't seem to work properly?

All of the image are overlapping each other and the descriptions just appear as a unordered list behind the images.

No javascript errors, the css and javascript file both seem to be linked properly, my image urls are valid and match the structure needed for the gallery.

One thing I did notice is that demo url you posted is running jQuery 1.4.2, Yii 1.1.5 uses jQuery 1.4.4..

Leave a comment

Please to leave your comment.

Create extension